jQuery的less和scss之less的基本介绍（一）

时间：2023-11-26 15:00:14
简单的整理了一下less的基本用法，希望对大家有所帮助ㅎㅎ
一、less基础语法
1.声明变量：@变量名:变量值
使用变量:@变量名
例如
@color : #ff0000;
@length : 100px;
#div1{
    width: @length;
    height: @length;
    background-color: @color;
}

变量使用规则 
多次频繁出现的值，后期需要统一修改的值，牵扯到数值运算的值，推荐使用变量。

less中的变量类型
①数值类：不带单位的123 不带单位的1px
②字符串类型：  带引号的"啊哈哈哈" 不带引号的red #ff00000
③颜色类： red
④值列表类型：多个值用逗号或空格分隔  css中出现的属性值，在less中都可以用作变量名
2.混合(Mixins)
①无参混合
声明:.class()；
调用，在选择器中，使用.class调用
例如
.boderradius{
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
②有参无默认混合
声明:.calss(@param){ }；
调用:.class(@paramValue)；
例如
.boderradius1(@radius){
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}
③有参默认混合
声明:.calss(@param:10px){}
调用.class()或.class(@paramValue)
例如
.boderradius2(@radius:10px){
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius.class{    width: 10px;    height: 10px;    .boderradius2();}
注意事项
如果声明时没有给参数默认值，则调用时必须赋值，否则报错；
无参混合实际上就是一个普通的class选择器，会被编译到css文件中
而有参混合，在编译时，不会出现在css文件中。
3.less中的匹配模式
①声明:@pipei(条件一，参数){}@pipei(条件二，参数){}@pipei(条件三，参数){}
②调用@pipei(条件的值，参数的值){}；
例如
.piPei(lefts,@width:10px){
     margin-left: @width;
}
.piPei(rights,@width:10px){
     margin-right: @width;
}

.piPei(tops,@width:10px){
     margin-top: @width;
}

.piPei(bottoms,@width:10px){
     margin-bottom: @width;
}
.piPei(@_,@width:10px){
     margin-bottom: @width;
}
@position:lefts;
.class1{
    .piPei(@position,10px);
}
③匹配规则
根据调用时输入的条件值，去寻找与之匹配的混合执行
@_表示不管匹配成功与否，都会执行的选项。
@arguments
4.@arguments特殊变量
在混合中，@arguments表示混合传入的所有参数，，@arguments中的多个参数之间，用空格分隔。
例如
.argu(@width,@style,@color){
    //border:@width @style @color;
    border: @arguments;//跟上面boder效果一样
}
.class2{
    .argu(10px,solid,#ff0000)
}
5.less中的加减乘除运算
less中的所有变量和数值可以进行加减乘除运算
需要注意的是 当颜色值运算时，红绿蓝分三组运算，组内单独计算，组间互不干涉
6.less中的嵌套
less中允许css选择器按照HTML代码的构造进行嵌套。
①less中的嵌套默认时后代选择器，如果需要子代选择器，则需在前面加大于号
②&符号表示上一层选择器比如上述&表示section ul:hover
例如
#section{
    width: 800px;
    height: 200px;
    background-color: #ccc;
    p{
        color: red;
    }
    ul{
        list-style: none;
        >li{
            float: left;
            width: 200px;
            height: 50px;
            &:hover{
                background-color: yellow;
            }
        }

    }

}

以上就是我简单整理的less的基本语法，可能不是太好看，但是希望能对看到这篇文章的人有所帮助，谢谢了

고마워요~~

相关文章