less和sass简单对比

less和sass的本质区别

1. less是基于javascript运行，所以less是在客户端处理。sass是基于Ruby的，是在服务器端处理。less使用@,而sass使用$

• 很多开发者不选用less是因为less输出修改过的css到浏览器需要依赖于javascript引擎，而javascript引擎需要额外的时间来处理。
• 优化方式:只在开发环节使用less

less和sass的用法区别

1. 变量: @ $
2. 混合(Mixin)

//less
.border {
   border-top: 1px dotted #333;
}
article.post {
   background: #eee;
   .border;
}
ul.menu {
   background: #ccc;
   .border;
}
 
//sass 
@mixin border{ //样式规则前面添加@minix声明，规则它是个嵌套
   border-top: 1px dotted #333; 
}
article.post {
   background: #eee;
   @include border;
}
ul.menu {
   background: #ccc;
   @include border;
}
 

3. 带参数混合(Parametric mixins)

//less
.border-radius(@radius:3px){
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
.border-radius(10px)
 
//sass
@mixin border-radius($radius:3px){
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}
@include border-radius(10px)

4. 选择器继承

    .menu{
        border:1px solid #ddd;
    }
    .footer{
        @extend .menu;
    }
 
    //等同于=====
    .menu, .footer{
        border:1px solid #ddd;
    }

5. 嵌套规则(Nested rules)

#site-body{
    .post-header{
        h2{}
        a{
            &:visted{}
            &:hover{}
        }
    }
}
 

6. 运算

//less
@base_margin:10px;
@double_margin:@base_margin*2;
 
//sass,可以直接换算单位
2in + 3cm + 2px = 3.514in;    //sass
2in + 3cm + 2px = Error;    //less

7. color函数(color-stop??????)

//less
@blue:#369;
.submit{
    background:-webkit-gradient(linear,center top,center bottom,from(lighten(@blue,10%)),color-stop(100%,@blue))
}
//lighten是用百分比来减轻颜色，这个例子是在@blue的基础上减少10%
 
//sass似乎有更多的颜色函数选择

8. 条件语句和控制

//less不支持这个功能
 
//sass if...else
@if lightness($color)>30%{
    background-color:#000;
}@else{
    background-color:#ccc;
}
 
//sass中简单的for循环语句
@for $i from 1px to 10px{
    .border-#{i}{
        border:$i solid blue;
    }
}
 
//sass甚至支持and、or和not，以及<,>,<= ,>= ,==等操作符
 

9. 命名空间

//将一些公用的样式创建分组，使用的时候直接调用
 
#defaults{
    .nav_list(){
        list-style:none;
        margin:0;
        padding:0;
    }
    .button(){}
}
//调用
nav ul{
    #defaults > .nav_list;
}
 

10. 作用域

• less中重新定义的变量只在自己作用域是新定义的值，而less中重新定义变量后，代码中此处之后的该变量的值，将会被重写

11. 转义

• 无效的css语法或less不能识别的，通常是IE的Hack。
  .class{
  filter:~'calc(100% - 30px)'
  }