/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);

LSEE和SASS的区别