/Less中的注释，但这种不会被编译
/*
* 这也是Less中的注释，但是会被编译
*
* [Less中的变量]
*
* 1、声明变量：@变量名：变量值；
* 使用变量：@变量名
*
* >>>Less中变量的类型：
* ①数字类 ①10px ②字符串：无引号字符串 red 有引号字符串 "haha"
* ②颜色类red #000000 rgb() ③值列表类型：用逗号或空格分割 10px solid red
*
* >>>变量使用原则：
* 多次频繁出现的值、需要修改的值，设为变量。
*
* 2、混合(MiXins)
*
* ①无参混合
* 声明： .name() 选择器中调用： .name;
* ②带参混合
* 无默认值声明： .name(@param){} 调用： .name(parValue);
* 有默认值声明： .name(@param:value){} 调用： .name(parValue); parValue可省
* >>>如果声明时，参数没有默认值，则调用时必须赋值，否则报错！
* >>>无参混合，会在css中编译除同名的class选择器，有参的不会；
*
* 3、LESS的匹配模式
* 使用混合进行匹配，类似于if结构；
* >>>声明： .name(条件一，参数){} .name(条件二，参数){} .name(@_，参数){}
* >>>调用： .name(条件值，参数值)；
* >>>匹配规则：根据调用时提供的条件值，去寻找与之匹配的"MiXins"执行。其中@_表示永远需要执行的部分。
*
* 4、LESS中的运算
* + - * / 可带单位，可不带单位 颜色运算时，红绿蓝分三组计算，组内可进位，组间互不干涉
LESS中的嵌套：保留HTML中的代码结构
* 1. 嵌套默认是后代选择器，如果需要子代选择器，则在子代前面加>
* 2. &表示上一层， &:hover表示上一层的hover事件
SASS
//注释一：不会被编译
/* * 注释二：非压缩模式，会被编译 */
/*！ * 注释三：重要注释，压缩模式也会被编译 */
1、Sass中的变量：
* 使用$变量名：变量值，声明变量；
*
* 如果变量需要在字符串中嵌套，则需使用井号{}包裹：
* border-井号{$left}:10px solid blue ;
* 2、Sass中的运算，会将单位也进行运算。使用时需注意最终单位；
* 10px*10px=100px*px
*
* 3、Sass中的嵌套：选择器嵌套 属性嵌套 伪类嵌套
* 选择器嵌套ul{li{}}后代
* ul{>li{}}子代
* &：表示上一层div{ul{li{&=="div ul li"}}}
* 属性嵌套：属性名与{}之间必须有冒号，例如border:{color:red;}
* 伪类嵌套： ul{li{&:hover{"ul li:hover"}}}
*
* 4、混合宏、继承、占位符
* ①混合宏：声明@mixin name($param:value){}
* 调用@include name(value);
* >>>声明时，可以有参，可以无参；可带默认值，也可不带；但是，调用时，必须符合声明规范；同less
* >>>优点：可以传参，不会生成同名class
* >>>缺点：会将混合宏中代码，copy到对应的选择器中，产生冗余代码
* ②继承：声明： .class{} 调用： @extend .class;
* >>> 优点：继承的相同代码，会提取到并集选择器中，减少冗余代码；
* >>> 缺点：无法进行传参、会在css中，生成一个同名class
* ③占位符：声明： %class{} 调用： @extend %class;
* >>> 优点：继承相同代码，会提前到并集选择器；不会生成同名的class选择器；
* >>> 缺点：无法进行传参；
*
* 综上所述：当需要传递参数时，用混合宏；当有现成class时，用继承；当不需要参数，也不需要class时，用占位符；
*
* 5、if条件结构：
* @if 条件{}
* @else{}
* 6、for循环结构：
* @for $i from 1 to 10{} 不含10；
* @for $i from 1 through 10{} 包含10；
* 7、while循环结构
* $j:1;
*
*
*
*
* $j:$j+1;
* 8、each循环遍历
* @each item in a,b,c,d{
* //item 表示每一项
* }
*
* 9、函数 ：
* @function func($length){
$length1:$length*5;
@return $length1;
}
调用：func(10px);