less和sass的本质区别
- less是基于javascript运行，所以less是在客户端处理。sass是基于Ruby的，是在服务器端处理。less使用@,而sass使用$
- 很多开发者不选用less是因为less输出修改过的css到浏览器需要依赖于javascript引擎，而javascript引擎需要额外的时间来处理。
- 优化方式:只在开发环节使用less
less和sass的用法区别
- 变量: @ $
- 混合(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;
}
- 带参数混合(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)
- 选择器继承
.menu{
border:1px solid #ddd;
}
.footer{
@extend .menu;
}
//等同于=====
.menu, .footer{
border:1px solid #ddd;
}
- 嵌套规则(Nested rules)
#site-body{
.post-header{
h2{}
a{
&:visted{}
&:hover{}
}
}
}
- 运算
//less
@base_margin:10px;
@double_margin:@base_margin*2;
//sass,可以直接换算单位
2in + 3cm + 2px = 3.514in; //sass
2in + 3cm + 2px = Error; //less
- 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似乎有更多的颜色函数选择
- 条件语句和控制
//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，以及<,>,<= ,>= ,==等操作符
- 命名空间
//将一些公用的样式创建分组，使用的时候直接调用
#defaults{
.nav_list(){
list-style:none;
margin:0;
padding:0;
}
.button(){}
}
//调用
nav ul{
#defaults > .nav_list;
}
- 作用域
- less中重新定义的变量只在自己作用域是新定义的值，而less中重新定义变量后，代码中此处之后的该变量的值，将会被重写
- 转义
- 无效的css语法或less不能识别的，通常是IE的Hack。
.class{
filter:~'calc(100% - 30px)'
}
-
