海阔天空

手机扫码查看

Sass和Less

Sass和Less都属于CSS预处理器，CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，
如：变量、语句、函数、继承等概念。
将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。
Sass后缀名.scss
Less后缀名.less

语法：

注释
css单行注释不会被编译出来，多行注释会被编译出来

变量
Less变量 @number:123px;
Sass变量 $number:123px;

插值
Less @key:margin;
@{key}:auto;
Sass $key:margin;
#{$key}:auto;

作用域
Less:
@number:123px;
.box3{@number:456px;width:@number;//456px}

Sass:作用域有顺序的
$number:123px;
.box3{$number:456px;width:@number;height:@number;//456px}

选择器嵌套
ul{
list-style:none;
li{
float:left;
div{margin:20px;}
p{margin:20px;}
}
}

伪类嵌套
ul{
list-style:none;
li{
float:left;
div{margin:20px;}
p{margin:20px;}
}
&:hover{color:red;//&去除ul后面的空格}
}

属性嵌套Sass,Less不支持
ul{
list-style:none;
li{
float:left;
div{margin:20px;}
p{margin:20px;}
}
&:hover{
color:red;//&去除ul后面的空格
font:{
size:10px;
weight:bold;
}
}
}

运算、单位、转义、颜色
width:@number*3;
height:@number +20em;//Sass不支持单位不同进行换算
padding:20px / 1.5;//Less除法操作，Sass默认分割操作
padding:~”20px / 1.5″;//不运算padding:20px /1.5
padding:(20px / 1.5);//Sass做除法运算
color:#010203 *3;//#030609

函数
width:round(3.5px);//四舍五入
height:percentage(0.2);//百分比20%
random()//只支持Sass
sqrt(25%)//开方 只支持Less
font-size:sum(4px,5px);
自定义函数
@function sum($n,$m){
@return $n+$m;
}

混入
Less:
.show{display:’block’;}
.show(@color){//如果不想编译此样式，在样式名后面加()括号，括号里面可以带参数
color:@color;
}
.box{
width:100px;
.show;
.show(blue);
}

Sass:
@mixin show{
display:’block’;
}
@mixin show($color){
display:’block’;
}
.box{
width:100px;
@include show;
@include show(red);
}

命名空间Less
#nm(){
.show{display:inline-block;}
}
.box1{
#nm.show;
}

继承
Less:
.line{display:inline;}
.box1{ &:extend(.line);}
.box2{ &:extend(.line);}
编译后
.line,
.box1,
.box2{
display:inline;
}

Sass:
%line{display:inline;}//不会编译出来
.line{display:inline;}
.box1{@extend .line;}
.box2{@extend .line;}
编译后
.line,.box1,.box2{display:inline;}

合并
Less:
.box3{
background+ : url(1.png);//+符号是用，逗号隔开
background+ : url(2.png);
transform+_ :scale(2);//+_ 符号是用 空格 隔开
transform+_:rotate(30deg);
}
编译后：
.box3{
background:url(1.png),url(2.png);
transform:scale(2) rotate(30deg)
}

Sass:
$background:{
a : url(1.png),
b: url(2.png)
}
$transform :{
a:scale(2),
b:rotate(20deg)
}
.box3{
background:map-values($background);//键值对
transform: zip(map-values($transform)…);//把逗号转成空格
}

媒体查询
.box2{
width:10px;
@media all and (min-width:768px){
width:600px;
}
@media all and (min-width:1440px){
width:900px;
}
}

条件
Less:
@count:3;
.get(@cn) when ( @cn >4){
width:100px + @cn;
}
.box{
.get(@count);
}

Sass:
$count:3;
.box1{
@if($count>4){
width: 100px + $count;
}
@else{
width: 10px + $count;
}
}

循环
Less:递归循环
@conut2 :0;
.get2(@cn) when (@cn <3){
.get2((@cn+1));
.box-@{cn}{
width:100px +@cn;
}
}
.get2(@count2);

Sass:支持for、foreach
@for $i from 0 through 2{
.box-#{$i}{
width:100px + $i;
}
}

导入
Less:
@import ‘文件路径’;