Less和Sass的使用

【Less中的变量】

　　1、声明变量：@变量名:变量值;

　　　  使用变量：@变量名

@length:100px;
@color:yellow;
@opa:0.5;

　　>>>Less中变量的类型：

　　　　①数字类：1 10px

　　　　②字符串：无引号字符串 red 有引号字符串 "haha"

　　　　③颜色类：red #000000 rgb()

　　　　④值列表类：用逗号或空格分隔10px solid red

　　>>>变量使用原则：多次频繁出现的值、需要修改的值，设为变量。

#div1{
    width: @length;
    height: @length;
    background-color: @color;
    opacity: @opa;
    .borderRadius;
    .setMargin(top_,10px);
}

　　

2、混合(Mixins)

　　①无参混合

　　　声明：.name{}; 选择器中调用 .name

　　②带参混合

　　　无默认值声明：.name(@param){} 调用：.name(parValue);

　　　有默认值声明：.name(@param:value){} 调用：.name(parValue); parValue可省

　　　　>>>如果声明时，参数没有默认值，则调用时必须赋值，否则报错

　　　　>>>无参混合，会在css中编译出同名的class选择器；有参的不会

3、Less的匹配模式

　　使用混合进行匹配，类似于if结构；

　　声明：.name(条件一,参数){} .name(条件二,参数){} .name(条件三,参数){} .name(@_,参数){}

.setMargin(top_,@width){
    margin-top: @width;
}
.setMargin(bottom_,@width){
    margin-bottom: @width;
}
.setMargin(@_,@width){
    padding: 10px;
}

　　调用：.name(条件值,参数值);

.setMargin(top_,10px);

　　匹配规则：根据调用时提供的条件值，去寻找与之匹配的"Mixins"执行。其中@_表示永远需要执行的部分。

4、Less中的运算

　　+ - * /

　　颜色计算时，红绿蓝分三组计算。组内可进位，组间互不干涉

【Less中的嵌套】

　　1、嵌套默认是后代选择器，如果需要子代选择器，则在子代前面加>

　　2、& 表示上一层，&:hover 表示上一层的hover事件

section{
    p{
        color: blueviolet;
        background-color: #00FFFF;
        text-align: center;
    }
    ul{
        padding: 0px;
        list-style: none;
        li{
            float: left;
            margin: 10px;
            width: 100px;
            border: 3px solid #00CED1;
            text-align:center;
            &:hover{
                background-color: cornflowerblue;
                color: white;
            }
        };
    }
}

 

【Sass中的变量】

　　1、声明变量：$变量名：变量值

　　2、变量在字符串中嵌套，需使用#{}包裹

border: #{$i}px solid red;　

　　3、Sass中的运算：会将单位也进行运算。使用时需注意最终单位

　　　　10px*10px=100px*px

　　4、混合宏、继承、占位符

　　　　①混合宏：声明@mixin name($param:value){}

@mixin hong($color:yellow){
    color: $color;
}

　　　　　　　　　调用@include name(value);

@include hong;

　　

　　　　>>>声明时可以有参，也可无参；可带默认值，也可不带；但是调用时必须符合声明规范，同less

　　　　>>>优点：可以传参

　　　　>>>缺点：会将混合宏中代码copy到对应的选择器中，产生冗余代码

　　　　②继承：声明：.class{}

.class{
    padding: 10px;
}

　　　　　　　　调用：@extend.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

@for $i from 1 through 4{
    .border#{$i}{
        border: #{$i}px solid red;
    }
}

　　7、while循环结构

　　　　$j:1,

　　　　@while 判断条件{}

$j:1;
@while $j<4{
    .while#{$j}{
        border:#{$j}px solid red;
    }
    $j:$j+1;
}

　　8、each循环遍历

　　　　@each $item in a,b,c,d{}

　　9、函数

　　　　@function func($name){}

@function func($length){
    $length:$length*5;
    @return $length;
}

　　【Sass中的嵌套】

　　1、选择器嵌套 ul{ li{} } 后代

　　　　ul{ >li{} } 子代

　　　　&表示上一层 div{ ul {li{ &=="div ul li" } } }

　　2、属性嵌套：属性名与{之间必须有: 例如 border:{color:red;}

　　3、伪类嵌套:ul{li{ &:hover{ "ul li:hover " } } }

　　　　

section{
    p{
        color: #2173B6;
        background-color: #00FFFF;
    }
    ul{
        padding: 0px;
        list-style: none;
        li{
            float: left;
            width: 100px;
            text-align: center;
            margin: 10px;
            border: {
                color: #4E81BD;
                style:solid;
                width: 10px;
            };
            &:hover{
                background-color: #6495ED;
                color: white;
            }
        }
    }
}