css预编译之less

css预编译之less

使用的编译工具
因为使用less语法写出来的文件，他的扩展名为".less",这种文件，浏览器是不认同的，所以我们需要用工具把这个文件编译成符合css原本语法的”.css“文件。
编译工具我们可以使用vscode中的插件EasyLESS，还可以使用单独的软件koala（考拉），当我们创建less文件，保存后他会自动将less文件转化成css文件
（vscode插件下载地址）

less语法
1：变量
变量是变成里面最重要的概念，用一个名称来代表一个值，定义是使用这个名称来代替这个值。
好处：这个名称对应的值改变了，定义中使用这个名称地方的值就全部改变了，大大提高了效率。less定义变量需要加”@“符号。
代码示例：

// 定义保存数值的变量
@mywidth:100px;
// 定义保存颜色值的变量
@mycolor:hotpink;

.box01{
    width:@mywidth;
    height:@mywidth+200;
    background-color: @mycolor;
}
.box02{
    width:@mywidth+50;
    height:@mywidth+300;
    color:@mycolor; 
}

上面代码最终编译成下面代码：

.box01 {
  width: 100px;
  height: 300px;
  background-color: hotpink;
}
.box02 {
  width: 150px;
  height: 400px;
  color: hotpink;
}

2:混合
使用混合可以再一段css代码中通过类名插入另外一段css代码。
代码示例 :

.myborder{
    border-top:1px solid #3366cc;
    border-bottom:1px solid #3366cc;
}
.box{
    width: 300px;
    height: 300px;
    // 使用混合插入上面一段css代码
    .myborder();
}

上面代码最终编译成下面的代码

.myborder {
  border-top: 1px solid #3366cc;
  border-bottom: 1px solid #3366cc;
}
.box {
  width: 300px;
  height: 300px;
  border-top: 1px solid #3366cc;
  border-bottom: 1px solid #3366cc;
}

3:嵌套
使用嵌套可以将后代选择器或者叫做层级选择器写在一个大括号中,方便定义和阅读。
代码示例：

.mytitle{
    width:300px;
    height:50px;
    border: 1px solid #000;
    // 在内部嵌套子元素的样式定义
    span{
        float: left;
        line-height:50px;
        color:#333;
    }
    a{
        float:right;
        line-height:50px;
        color:#999;
        // 在内部嵌套伪类的样式定义
        &:hover{
            color:#f00;
        }
    }
}

上面代码最终编译成下面代码 ：

.mytitle {
  width: 300px;
  height: 50px;
  border: 1px solid #000;
}
.mytitle span {
  float: left;
  line-height: 50px;
  color: #333;
}
.mytitle a {
  float: right;
  line-height: 50px;
  color: #999;
}
.mytitle a:hover {
  color: #f00;
}

4：运算
在定义值的时候可以使用+ - * %进行运算。
代码示例：

@p2r:1/20rem;
.box{
    width:200/2*@p2r;
    height:200/2/20rem;
}

上面代码最终编译成下面代码：

.box {
  width: 5rem;
  height: 5rem;
}

5: 注释
less语法中注释分单行和多行注释。
代码示例 :

// 定义单行注释
/*
    定义
    多行注释
*/

6 : 导入
less文件中可以导入其他的less文件,从而实现文件的合并。
代码示例 :

@import "library"; // library.less

今天的学习就到这里啦~~我们下期再见