Sass和Less
Sass和Less都属于CSS预处理器，CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一种编程的特性，如：变量、语句、函数、继承等概念。将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。
Sass官网地址：http://sass-lang.com/
Less官网地址：http://lesscss.org/
语法：
注释:
//单行注释不会被编译出来 /* 多行注释，也就是CSS的注释方式，可以编译出来 */
变量：
Less @variable_name
Sass $variable_name
插值:
Less
@variable_name : margin; @{variable_name} : auto;
Sass
$variable_name : margin; #{$variable_name} : auto;
作用域
Less 变量查找遵循就近原则。
Sass 作用域是有顺序的
选择器嵌套
ul{
li{
div{margin:10px;}
p{margin:20px}
}
}
伪类嵌套
ul{
li{
div{margin:10px;}
}
&:hover{
background:red;
}
}
属性嵌套(仅Sass有，Less没有)
ul{
&:hover{
background:red;
font : {
size:10px;
weight:bold;
}
}
}
运算、单位、转义、颜色
Less:
单位：当两个数值相加时，若单位不同，以第一个数值的单位为准
转义：~"20px / 1.5"
颜色：颜色的数值 * 2 = 数值二倍的颜色
@num : 100px;
.box1{
width : @num * 3;
height : @num + 2em;
margin : 2em + @num;
pading : ~"20px / 1.5";
color : #102302 * 2;
}
Sass:
单位：Sass中比较严格，单位不同，不能进行运算
运算：默认 / 是进行分割操作；若想运算需加括号：(20px / 1.5)
颜色：同样可以计算
$num : 100px;
.box2{
width : $num * 3;
margin : 20px / 1.5;
pading : (20px / 1.5);
color : #102302 * 2;
}
函数
通用：
round() 四舍五入取整
percentage() 转换成百分比的形式
...
Less特有:
sqrt() 开方
...
Sass特有:
random() 产生随机数
...
还可自定义函数：
@function sum($n,$m){
@return $n + $m;
}
fontsize : sum(4px,5px);
混入(把不同的CSS组合到一起)
Less：
/*既渲染又混入*/
.show{
display : ‘block‘;
}
/*仅混入，()可以表示仅混入，也可以进行传参*/
.hide(){
display : ‘none‘;
}
.box3{
fontsize : 16px;
.show;
.hide();
}
Sass:
/*Sass仅混入，加()也可传参*/
@mixin show{
display : block;
}
.box4{
width : 100px;
@include show;
}
命名空间(仅Less有)
#nm(){
.show{display : inline-block; }
}
.box5{
#num.show;
}
继承
Less:
.line{
display : inline;
}
.box6{
&:extend(.line);
}
.box7{
&:extend(.line);
}
Sass:
.line{
display : inline;
}
.box7{
@extend .line;
}
.box8{
@extend .line;
}
/*line仅占位，不渲染*/
%line{
display : inline;
}
.box7{
@extend %line;
}
.box8{
@extend %line;
}
合并(多个值合并到一齐)
Less:
.box9{
/*
合并用‘,‘隔开
*/
background+ : url(a.png);
background+ : url(b.png);
/*
合并用空格隔开
*/
tranform+_ : scale(2);
tranform+_ : rotate(30deg);
}
Sass:
$background : (
a : url(a.png),
b : url(b.png)
);
$tranform : (
a : scale(2),
b : rotate(30deg)
);
.box9{
background : map-values($background);
transform : zip(map-values($tranform)...);
/*
zip()把逗号去掉变成空格
*/
}
媒体查询
.box10{
@media all and (min-width : 768px){
width : 600px;
}
}
条件
Less:
@count : 5; .get(@cn) when (@cn > 4){ width : 100px + @cn; } .get(@cn) when (@cn < 4 ){ width : 10px + @cn; } .box11{ .get(@count); }
Sass:
$count : 5; .box11{ @if($count >4){ width : 100px + @count; } @else{ width : 10px + @count; } }
循环
Less:
@count2 : 0; .get2(@cn) when (@cn < 3){ .get((@cn+1)); .box-@{cn}{ width : 100px + @cn; } } .get2(@count2);
Sass:
@for $i from 0 through 2{ .box-#{$i}{ width : 100px + $i; } }
导入
@import ‘./xxx.scss‘
@import ‘./xxx.less‘
...