注释
less和sass注释一样
// 单行注释 (不会被编译)
/*
多行注释 (会被编译)
*/
1. 定义变量
less变量定义格式： @变量名：取值；
// 全局变量
@w: 200px;
@h: 200px;
.box{
@w: 300px; // 局部变量
width: @w;
height: @h;
color: @c; // 不会报错，可以先使用后定义
}
@c：red;
sass变量定义格式：$变量名：取值；
// 全局变量
$w: 200px;
$h: 200px;
.box{
$w: 300px; // 局部变量
width: $w;
height: $h;
// color: $c; // 会报错，不能先使用后定义
}
// $c: red;
less定义变量使用的@，sass定义变量使用的$
less变量可以先使用后定义，sass变量不是延迟加载，不可以先使用后定义
less和sass都区分全局变量和局部变量
2. 变量插值（了解即可，基本不会用到）
less变量插值
@w: width;
.box{
@{w}: 200px;
height: 200px;
}
sass变量插值
$w: width;
.box{
#{$w}: 200px;
height: 200px;
}
less变量插值使用方式：@{变量名}，sass变量插值使用方式：#{$变量名}
3. 运算
less和sass运算是一样，可以使用+ - * /运算
.box{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
margin-left: (-200px * 0.5);
}
4. 混合
4.1.1 less混合定义：.混合名称{} 或者 .混合名称(){}；less混合使用：.混合名称 或者 .混合名称()
// .center{
.center(){
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.box{
width: 200px;
height: 200px;
// .center;
.center();
}
如果混合名称后面没有带()，预处理的时候，会保留混合代码
如果混合名称后面有带()，预处理的时候，不会保留混合代码
4.1.2 sass混合定义：@mixin 混合名称{} 或者 @mixin 混合名称(){}；sass混合使用：@include 混合名称 或者 @include 混合名称()
// @mixin center{
@mixin center(){
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.box{
width: 200px;
height: 200px;
// @include center;
@include center();
}
sass中不管混合名称后面有没有带()，预处理的时候，都不会保留混合代码
4.2 less和sass混合都可以带形参/指定默认值形参/给指定形参赋值
less不带默认值形参
.model(@w, @h, @c){
width: @w;
height: @h;
color: @c;
}
.box{
.model(200px, 200px, red);
}
less带指定默认值形参
.model(@w: 200px, @h: 200px, @c: red){
width: @w;
height: @h;
color: @c;
}
.box{
.model(); // 不传值，使用默认值
}
less给指定形参赋值
.model(@w: 200px, @h: 200px, @c: red){
width: @w;
height: @h;
color: @c;
}
.box{
.model(@h: 100px); // height会使用传递的值
}
sass不带默认值形参
@mixin model($w, $h, $c){
width: $w;
height: $h;
color: $c;
}
.box{
@include model(200px, 200px, red);
}
sass带指定默认值形参
@mixin model($w: 200px, $h: 200px, $c: red){
width: $w;
height: $h;
color: $c;
}
.box{
@include model();
}
sass带指定默认值形参
@mixin model($w: 200px, $h: 100px, $c: red){
width: $w;
height: $h;
color: $c;
}
.box{
@include model($h: 200px);
}
4.3 可变参数
less
// .animation(...){ // ...: 可变参数，可以传递0个或多个参数
// 至少传递 @name 和 @time 值
.animation(@name, @time...){
transition: @arguments;
}
sass
// .animation($args...){ // $args...: 可变参数，可以传递0个或多个参数
.animation($name, $time, $args...){ // 至少传递 $name 和 $time 两个参数
transition: $name $time $args;
}
less是通过JS实现的，可以使用@arguments来获取到所有传递进来的参数
sass不是通过JS实现的，需要先定义一个可变参数args来获取到所有传递进来的参数
5. less 和 sass 导入其他 .less 文件或 .scss 文件
两者都是通过 @import 导入
// less 导入其他 .less 文件
@import "model.less";
// sass 导入其他 .scss 文件
@import "model.scss";
其实原生的 CSS 也支持通过 @import 来导入其他的 CSS 文件，只不过不常用。因为原生 CSS 通过 @import 导入其他的 CSS 文件，只有执行到 @import 时，浏览器才会去下载对应的 .css 文件，这导致请求次数变多，页面加载起来特别慢。
而 less 和 sass 中的 @import 是直接将导入的文件拷贝到当前文件中生成一份 css，所以只会请求一次，页面加载起来速度快。
6. 内置函数
less 和 sass 中都提供了内置函数方便我们使用
sass 可以自定义函数
@function sum($num){
@return $num + $num;
}
7. 继承
less 继承
.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.box:extend(.center){
width: 200px;
height: 200px;
}
sass 继承
.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.box{
@extend .center;
width: 200px;
height: 200px;
}
混合和继承区别
混合：直接拷贝，有多少个地方使用就拷贝多少份
继承：并集选择器，不会拷贝，只会保留一份
8. 条件判断
less 通过when给混合添加执行限定条件，只有条件满足才会执行混合中代码
// .model(@w, @h) when (@w = 100px){ // 只有宽度等于100px，才会执行
//.model(@w, @h) when (@w = 100px), (@h = 100px){ // 当宽度等于100px，或者高度等于100px，才会执行
.model(@w, @h) when (@w = 100px) and (@h = 100px){ // 当宽度等于100px，并且高度也等于100px，才会执行
width: @w;
height: @h;
}
.box{
// .model(200px, 100px); // 宽度不等于100px，所以不会执行混合中代码
// .model(200px, 100px); // 高度等于100px， 所以会执行混合中代码，并且宽度的值是传递的200px
.model(100px, 100px); // 宽度高度都等于100px，所以会执行混合中代码
}
sass 可以通过 @if(条件语句){} @else if(条件语句){} ... @else(条件语句){} 来判断
9. 循环
sass 支持两种循环：for循环和while循环
for循环
// @for $i from 起始整数 through 结束整数 {}
// @for $i from 起始整数 to 结束整数 {}
// 两者书写一样，区别在于 to 不包尾
ul{
li{
@for $i 3 through 6 { // 第3到第6个li元素背景颜色变为红色
&:nth-child(#{$i}){
background-color: red;
}
}
}
}
while循环
ul{
li{
$i: 3;
@while($i <= 6) {
&:nth-child(#{$i}){
background-color: red;
}
$i: $i + 1;
}
}
}
