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

 

③匹配规则

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

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

@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的基本语法，可能不是太好看，但是希望能对看到这篇文章的人有所帮助，谢谢了

고마워요~~