首页 > 代码库 > Less和Sass的使用

Less和Sass的使用

2024-09-18 18:55:35   221人阅读

【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;
            }
        }
    }
}

　　

 

Less和Sass的使用


联系
我们