css预处理器less和scss之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);
}

③匹配规则根据调用时输入的条件值，去寻找与之匹配的混合执行@_表示不管匹配成功与否，都会执行的选项。@arguments4.@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的基本语法，可能不是太好看，但是希望能对看到这篇文章的人有所帮助，谢谢了

고마워요~~

秒客网

css预处理器less和scss之less介绍（一）

相关文章