框架less和sass

　　　　less 　　　　

注释

//这种注释不能编译到CSS文件中
/*
 * 这种注释能编译到CSS文件中
 */

[less的基础语法]

1、  声明变量： @变量名 ：变量值
　　使用变量： @变量名

>>> 变量使用的原则
　　多次频繁出现的值，后期需要统一修改的值，涉及到数值运算的值，推荐使用变量
>>> less中的变量类型
　　在CSS中出现的属性值，在less中都可以用作变量名
　　①数值类：包括不带单位的(比如说：123)，不带单位的(包括1px)
　　②字符串类型:带引号的(比如说 "哈哈哈")，不带引号的(red #ff0000)
　　③颜色类： red #ff0000 RGB(255,255,0)
　　④值列表类型: 多个值用逗号或空格分隔 (10px solid red)

2、混合(mixins)

①无参混合
　　声明: .class{}
　　调用:在选择器中，使用.class;直接使用

②有参无默认值混合
　　声明： .class(@param){}
　　调用: .class(paramValue); 或 .class();

③有参有默认值混合
　　声明： .class(@param:@color：10px){}；
　　调用： .class(paramValue); 或 .class();

>>>如果声明时，没有给参数赋默认值，则调用时必须赋值，否则报错
>>>无参混合，实际上就是一个普通的class选择器，会被编译到CSS文件中;
　　而有参混合，在编译时，不会出现在CSS文件中。

3、less中的匹配模式

①声明：

@pipei(){条件一，参数}{} @pipei(){条件二，参数}{} @pipei(){@_，参数}{}

②调用:

@pipei(条件的值，参数的值){}

③匹配规则：
根据调用时输入的条件值，去寻找与之匹配的混合执行。

　@_表示不管匹配成功与否，都会执行的选项。

4、@arguments特殊变量：
在混合中，@arguments表示混合传入的所有参数。@arguments中的多个参数之间，用空格分隔。

.border(@width,@style,@color){
    border: @arguments;    //等同于 border: @width @style @color;
} 

5、less中的加减乘除运算
　　less中的所有变量和数值，可以进行加减乘除运算。
　　需要主要的是，当颜色值运算时，红绿蓝分三组运算。组内单独计算，组间互不干涉。

6、less中的嵌套
　　less允许css选择器按照HTML代码的结构进行嵌套。

section{
    >p{}
    ul{
        &:hover{}
    }
}   

①less中的嵌套，默认是后代选择器。如果需要子代选择，需要在前面加>
②&符号，表示这个&所在的上一层选择器。比如上述&，表示section ul：hover

 示例

@color : #ff0000;
@length: 100px;
#div1{
     @length;
    height: @length*2;
    background-color: @color;
}

无参混合

.borderRadius{
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

无参无默认值混合

.borderRadius1(@radius){
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

有参有默认值混合

.borderRadius2(@radius:50px){
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

@color : #ff0000;
@length: 100px;
#div1{
     @length;
    height: @length*2;
    background-color: @color;
}

匹配模式

.pipei(lefts,@10px){
    margin-left: @width;
}
.pipei(rights,@10px){
    margin-right: @width;
}
.pipei(tops,@10px){
    margin-top: @width;
}
.pipei(bottoms,@10px){
    margin-bottom: @width;
}
.pipei(@_,@10px){
    padding: 10px;
}
@poistion : lefts;
.class1{
    .pipei(@poistion,20px);
}

@arguments

.argu(@width,@style,@color){
    //border: @width @style @color;
    border: @arguments;
}
.class2{
    .argu(10px,solid,red);
}

less中的嵌套

#section{
     800px;
    height: 200px;
    background-color: #CCCCCC;
    p{
        color: red;
        font-weight: bold;   
    }
    ul{
        padding: 0px;
        list-style: none;
        li{
            float: left;
             200px;
            height: 50px;
            background-color: yellow;
            text-align: center;
            cursor: pointer;
            &:hover{
                background-color: green;
            }
        }
//      li:hover{
//          background-color: blue;
//      }
    }
}

　　　　scss　　　　

@charset "utf-8";

//↑使用scss文件编译时，必须声明字符集编码格式。

注释

//注释一:编译时，不会被编译到CSS文件中
/*
 * 注释二:在非compressed压缩模式下，会被编译到CSS文件中
 */
/*！
 * 注释三:重要注释。在各种压缩模式下，都会被编译到CSS文件中
 */

[SCSS基础语法]

1、scss中的变量
①声明变量： $变量名:变量值;
SCSS中允许将变量嵌套在字符串中，但是变量必须使用井{}包裹
eg：

border-#{$left}:10px solid red;

2、scss中的运算，会将单位进行运算。使用时需注意最终的单位是否正确。
eg：

10px * 10px = 100px*px 

3、scss中的嵌套：分为选择器嵌套 属性嵌套 伪类嵌套
①选择器嵌套

ul{ li{ } }

　　嵌套默认表示后代选择器，如果需要子代选择器，可以在选择器前加>
　　可以在选择器的{}中，使用&表示上一层的选择器。

②伪类嵌套：

li{ &：hover{ }}

　　在选择器的{}中，使用&配合伪类事件，可以表示当前选择器的伪类

③属性嵌套：

font:{size:18px;}

　　相当于 font-size：18px;

　　对于属性名有-分隔为多段的属性，可以使用属性嵌套。属性名的前半部分必须紧跟一个:，才能使用{}包裹属性的后半部分。

4、混合宏、继承、占位符:
①混合宏:使用@mixin声明混合宏，在其他选择器中使用@include调用混合宏

@mixin hunhe{} .class{ @include hehe;}
@mixin hunhe(@param){} .class{ @include hunhe(value);}
@mixin hunhe(@param:value){} .class{@include hunhe();}

　　>>>声明时，可以有参数，也可以没有参数。参数可以有默认值，也可以没有默认值。但是调用时，必须符合声明时的要求。与less中的混合相同。
　　>>>优点：①可以传参 ②不会产生同名的class
　　>>>缺点：调用时，会把混合宏中的所有代码copy到选择器中，产生大量的重复代码；

②继承:声明一个普通的class，在其他选择器中使用@extend继承这个class
.class1{} .class2{ @extend .class1;}
　　>>>优点:将相同代码，提取到并集选择器，减少冗余代码;
　　>>>缺点:①不能传参;②会生出一个多余的class

③占位符:使用%声明占位符，在其他选择器中使用@extend继承占位符；
　　%class1{} .class2{@extend %class1;}
　　>>>优点：①将相同的代码，提取到并集选择器，减少冗余代码；②不会产生一个多余的class

　　>>>缺点：不能传参

5、if条件结构：
　　条件结构需要写在选择器里面，条件结构的大括号直接包裹样式属性。
　　@if 条件{}
　　@else{}

6、@for循环：

@for $i from 1 to $10{} //不包含10
@for $i from 1 through 10{} //包含10

7、while循环；

$i:0;
@while $i<10{
　　$i=$i+1;
}

8、each 循环遍历

@each $item in a,c,c,d{
$item表示 a,c,c,d的每一项
}