LESS预处理语言入门-优快云博客

之前写页面样式都是用的css没有用过sass和less，现在就想了解学习一下这两个东西然后运用到平时的项目中去。

less是一门预处理语言，增加了变量，MIxin，函数等特性。

一、变量

@width:600px;
@color:#4D926F;
@height:200px;
.header{
    width: @width;
    height:@height;
    background-color: @color;
}

相当于：

.header{
    width: 600px;
    height:200px;
    background-color: #4D926F;
}

二、混合

混合可以将一个定义好的class1引入另一个class2中，从而使class2获得class1的全部样式。

有三种引入方法：

1.直接引入某个类的所有属性。

给.header添加一个边框

@width:600px;
@color:#4D926F;
@height:200px;
.box{
    border:1px solid;
}
.header{
    width: @width;
    height:@height;
    .box;
    background-color: @color;
}

2.引用带参数的无默认值的类属性。

.box2(@border_width){
    border:@border_width solid red;
}
.header{
    width: @width;
    height:@height;
    .box2(5px);
    background-color: @color;
}

3.引用带参数带默认值的类属性。

不进行传参，若传参可以覆盖默认值使用时可以。

.box2(@border_width:8px){
    border:@border_width solid red;
}
.header{
    width: @width;
    height:@height;
    .box2();
    background-color: @color;
}

三、嵌套：

我们可以在一个选择器中嵌套另一个选择器来实现继承。这样可以使层级关系更清楚，更方便使用。

.header{
    h1{   color: lightcoral;}}

相当于：

.header h1{
   color: lightcoral;
}

四、函数和运算：

用变量进行加减乘除，这里需要注意的一点是加减时“+”“-”要与前后空出一个空格，不然会报错，建议大家牵扯到运算时给运算后的结果加上()，方便解析。

.content{
    .box2(5px);
    width: (@width + 100);
    height:(@height*3);
    background-color: yellowgreen;
}

文章参考链接：https://blog.youkuaiyun.com/qq_36812990/article/details/79726705