Less总结篇-CSS预处理语言

1.了解

Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量，Mixin，函数等特性，使CSS更易维护和扩展。更少可以运行在Node或浏览器端。

2.使用方法

方法一：“袋鼠”工具，下载单独软件先在本地转译，再把生成的.css文件引入；

方法二：使用less的脚本进行实时转译，如下：

<link rel="stylesheet/less"  href="styles.less" />
...
<script src="less.js" type="text/javascript"></script>

注意： 
    1.link中自己写的less的rel=“stylesheet/less”；
    2.引入less脚本之前书写.less自书写需转译的less ；

方法三：使用npm全局安装less，然后逐步转译less文件

//安装
$ npm install -g less
//解析
$ lessc  styles.less
//解析完后保存
$ lessc styles.less > styles.css

方法四：在vue中使用less-loader，具体修改如下：

step1：安装 less 和 less-loader ，在项目目录下运行如下命令：
    npm install less less-loader --save-dev

step2：webpack.config.js中添加如下代码，对后缀为less的文件进行解析依赖
    module: {
        rules: [
            ...
            {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader",
            }
        ]
    }

step3：页面中<style>标签中添加 lang="less"
    <style scoped lang="less"> ... </style>

3.语法

1、变量：其实本质是常量，因为它是不可变的，只允许定义一次。

@val001 : #5B83AD;                  //变量为：属性值
@val002 : color;                    //变量为：属性值
@val003 : className;                //变量为：类名
@val004 : "../image";               //变量为：url
@val005 : "../../themes";           //变量为：导入半路径
@val006 : "content string";         
@val007 : "val006";                 //变量为：变量名称

@import "@{val005}/backTheme.less";
div { 
    @{val002}: @val001; 
    content: @@val007;
    background: url("@{val004}/big/big.png");
} 
.@{val003}{ 
    font-size: 10px;
}
———————————————————————————————————————————————————————————————————————————————————————————
//输出
div { 
    color: #5B83AD; 
    content: "content string";
    background:yrl("../image/big/big.png");
}
.className{ 
    font-size:10px;
}

2、混入(Mixins)：一组属性在其他样式中出现。

.redColor{                          //输出的被混入对象
    color:red;
}
.noshow(){                          //不输出的被混入对象
    padding:10px;
    &:hover{                        //属性的混入
        color:blue;
    }
}
.cont{
    font-size:16px;
    .redColor() !important;         //redColor里的所有属性都会带 !important
    .noshow;                        //有木有小括号都是可以的
}
—————————————————————————————————————————————————————————————————————————————————————————
//输出
.redColor{
    color:red;
}
//.noshow不会输出
.cont{
    font-size:16px;
    color:red !important;
    padding:10px;
}
.cont:hover{
    color:blue;
}

注意：
    1.混入时属性混入可以将（）小括号去掉；
    2.可以使用类名，id名进行混入；
    3.不想要引用的样式输出，可以使用.noshow(){}，加小括号的方式；

3、参数混入：可以理解成函数传递参数。

.mixin(@x:10px; @y:10px; @z:10px; @color:#aaa) {
    width:@x;
    height:@y;
    padding:@z;
    color:@color;
    box-shadom:@arguments;
}
.class1 {
    .mixin(@color:#ddd; @x:50px);
}
—————————————————————————————————————————————————————————————————————————————————————————
//输出
.class1 {
    width:50px;
    height:10px;
    padding:10px;
    color:#ddd;
    box-shadom:10px 10px 10px #ddd;
}

注意：
    1.传参可以对参数名称进行规定，如：@color
    2.传参可以设定默认的数值，如：@clor:#aaa
    3.传递参数可以是多个，如：@x:10px; @y:10px; @z:10px; @color:#aaa
    4.传参定义了名称，其传递的实际参数顺序无所谓，如：@color:#ddd; @x:50px
    5.@arguments类似一个伪数组，可以直接使用，如：box-shadom:@arguments

//特殊：混入作为函数
.mixin2(@x;@y){
    @wid:@x;
    @hei:@y;
}
.class2{
    .maxin2(10px,20px);
    width:@wid;
    height:@hei;
}
———————————————————————————————————————————————————————————————————————————————————————————
//输出
.class2 {
    width:10px;
    height:10px;
}

注意：
    1.混入可作为函数，进行调用，然后返回对应的变量再赋值，如：.maxin2(10px,20px);width:@wid;

//特殊：条件混入
.mixin (@a) when (@a >= 50%) {
  background-color: black;
}
.mixin (@a) when (@a < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
——————————————————————————————————————————————————————————————————————————————————————————
//输出
.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

//特殊：循环在混入中的使用
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
    .column-@{i} {
        width: (@i * 100% / @n);
      }
    .generate-columns(@n, (@i + 1));
}
———————————————————————————————————————————————————————————————————————————————————————————
//输出：
.column-1 { width: 25%; }
.column-2 { width: 50%; }
.column-3 { width: 75%; }
.column-4 { width: 100%; }

4、嵌套：有父子关系的写在一起，接近于html的写法。

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
———————————————————————————————————————————————————————————————————————————————————————————
//输出
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

5、运算：利用+ - * / 进行计算得出最后的值并附上单位，常用的是宽高，百分比，颜色值

@val001:5px+10;      15px
@val002:5px+10px;    15px
@val003:5px+10cm;    15px
@val004:5%*2;        10%

注意：
    1.计算中出现多单位，单位以最左边单位为最终结果；
    2.计算中最好将单位标清楚，方便修改和设定；

6、格式化：使用“ ~ ”符号，允许任意字符串作为属性或属性值，并以原样返回

.weird-element {
  content: ~"^//* some horrible but needed css hack";
}
———————————————————————————————————————————————————————————————————————————————————————————
//输出
.weird-element {
  content: ^//* some horrible but needed css hack;
}

7、功能：可以转换颜色，操纵字符串和进行数学运算(使用较少，但在效果变更还是很实用的)

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`        //将0.5％转换为50％
  color: saturate(@base, 5%);                        //将基色的饱和度增加5％
  background-color: spin(lighten(@base, 25%), 8);    //将背景颜色设置为减轻25％并旋转8度的颜色
}

8、范围作用域：类似js中局部和全局的感觉，不一样的是局部的变量可以在后边定义

@var: red;

#page {
  #header {
    color: @var;      //white
  }
  @var: white;        //引用后边定义变量
}

9、导入：导入外部的样式，可以是less或者css等

@import "foo";             foo.less
@import "foo.less";        foo.less
@import "foo.php";         foo.less
@import "foo.css";         foo.css
@import (optional, reference) "foo.less";    //指令控制导入文件

注意：
    1.导入的语句写在哪里都无所谓，但是建议写在最顶端；
    2.根据文件扩展名，有如下规范：
        （1）如果文件有.css扩展名，则将其视为CSS，并将@import语句保留为原样；
        （2）如果它有任何其他扩展名，它将被视为less并导入；
        （3）如果它没有扩展名，以扩展名.less进行导入；
    3.@import (keyword) "文件名称";这才是最全的导入语法，其中【keyword】代表指令，可进行一些导入 
      文件的控制，并支持多指令控制且用逗号分开，可选指令如下：
            reference： 使用Less文件但不输出
            inline：    在输出中包含源文件但不处理它
            less：      无论文件扩展名是什么，都将文件视为Less文件
            css：       无论文件扩展名是什么，都将文件视为CSS文件
            once：      只包含一次文件（默认就是包含一次）
            multiple：  多次包含该文件
            optional：  找不到文件时继续编译（默认找不到就停止编译了）

4.常用内置函数

//字符串
    替换：replace(字符串,要替换的文本,替换成文本,正则标志);
            replace("One + one = 4", "one", "2", "gi");    //2+2=4

//列表
    长度：length(list的变量名称);
            @listall:1,2,3,4;
            n: length(@listall);    //n: 4
    提取：extract(list的变量名称,下标数字);
            val: extract(@listall,2)    //val: 3

//数字
    取整：ceil(小数)    向上取整
         floor(小数)    向下取整
         round(小数,小数位数)    四舍五入（并保留几位小数）