css less语法-蒲公英云

css less语法

less
  1、安装
   cnpm install -g less
   (1)耗费性能,不能在开发环境中使用
       在文件引入less编译器
        <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.10.3/less.min.js" ></script>
        或下载好的less.js文件
       引入less样式
       <link rel='stylesheet/less' type='text/css' href='less文件路径'></link>    
   (2)命令行编译less文件
        在less文件所在文件夹,启动命令行
        lessc 待编译文件.less 编译后文件.css
  2、语法
    (0)可直接计算表达式
        width:2*3px;
    (1)设置变量
        @变量名:样式
        直接@变量名使用
    (2)样式的引用
        .a{xx}
        .b{.a;} 即可引用a类的样式
    (3)带参数的样式引用,相当于函数
        .a(@变量)  //该样式不会显示出来
        {
            样式:@变量
        }
        .b{
            .a(样式值);//不加引号
        }
    (4)带参数默认值的样式引用
        .a(@变量:样式值)  //该样式不会显示出来
        {
            样式:@变量
        }
        .b{
            .a(样式值);//不加引号,若不传值则按默认值显示
        }
    (5)同名函数,不同样式
        .a(不加@名称,@参数,...){样式}
        .a(不加@名称2,@参数,...){样式}
        ,a(@_,@参数,...){样式};  表示不论选择哪个函数,都会带上该函数内的样式
        .b{.a(不加@名称,值,...);...}使用
    (6)能看出层级的嵌套
        选择器1{
            样式;
            选择器2{
                样式;
            }
        }
        表示设置选择器1元素的样式,及其子元素选择器2的样式
    (7)自动填充参数
        .a(@参数1,@参数2,@参数3,..)
        {
            样式:@arguments; //会将参数全部放在这里,若设置了默认值,则调用该函数则不需要传入参数
        }
        .b{.a(值1,值2,...);}
    (8)!important
        在样式后添加该标记,会让样式后追加该标记
        在方法会调用类后追加,会让其所有属性都追加该标记
    (9)不编译指定内容
    .a{
        content:~"内容";//在浏览器上将会原样显示
    }

代码示例:
less文件:

@main-color:red;
.a{ 
  background-color: @main-color;
}
.b{ 
  color:@main-color;
}
.c{ 
    border: solid 1px red;
}
.d{ 
    .c;
}
.e(@bk){ 
    background-color: @bk;
}
.f{ 
    .e(red);
}
.g(@col:red)
{ 
    color:@col;
}
.h{ 
    background-color: yellow;
    .g;
}
.i{ 
    border:solid 2*3px red !important;
}
.j{ 
    color:red; h1{ 
        color:yellow;
    }
}
.k(@width:1px,@solid:solid,@color:red){ 
    border:@arguments;
}
.l{ 
    .k;
}