首页 > 代码库 > LSEE和SASS的区别

LSEE和SASS的区别

/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的区别