CSS预处理语言Less常用语法

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

Less是一种动态样式语言，属于css预处理语言的一种
它使用类似CSS的语法为CSS的赋予了动态的特性
如变量，继承，运算，函数等，更方便css的编写和维护实现css模块化

less 可以在多种语言，环境中使用，包括浏览器端、桌面客户端、服务端
其实它非常简单
要想使用less我们需要下载它
我选择利用npm包管理器下载
npm install less less-loader

修改配置文件webpack.config.js

module: {
    loaders: [
        ...
        {test: /\.less$/, loader: 'style!css!less'},
        ...
    ]
}

#变量

<div class="container">
    <div class="item"></div>
</div>

在less中我们可以使用变量

@w:100px;
@h:100px;
@c:orangered;
.container {
    width: @w;
    height: @h;
    background-color: @c;
}

这样做就可以得到一个100×100的橘黄色元素
相当于

.container {
    width: 100px;
    height: 100px;
    background-color: orangered;
}

#混合
less中 独立选择器样式可以被直接用在其他选择器样式之中

.border {
    border: 2px solid black;
}
.container {
    .border;
}

相当于

.container {
    border: 2px solid black;
}

---

并且混合还可以带参数，像函数一样

.border(@border_width) {
    border: @border_width solid black;
}
.container {
    .border(2px);
}

参数还可以设置默认

.border(@border_width:2px) {
    border: @border_width solid black;
}
.container {
    .border;
}

通过它我们可以在兼容写法中减少冗余代码

.borderRadius (@radius:5px)
 {
	 -webkit-border-radius: @radius;
	 -moz-border-radius: @radius;
	 -ms-border-radius: @radius;
	 -o-border-radius: @radius;
	 border-radius: @radius 
 }

---

@arguements指代所有变量参数

border_arg (@w:2px, @x:solid, @c:black) { 
	border: @arguments; 
}

相当于

border_arg (@w:2px, @x:solid, @c:black) { 
	border: @w @x @c; 
}

border_arg { 
	border: 2px solid black; 
}

#模式匹配
现在我想要画一些不同的图形

@w:100px;
@h:100px;
.draw(circle, @color) {
    width: @w;
    height: @h;
    background-color: @color;
    border-radius: 50%;
}
.draw(square, @color) {
    width: @w;
    height: @h;
    background-color: @color;
    border-radius: 5%;
}

这两组样式名称一样都叫做draw
区别就是一个匹配circle，另一个匹配square
如果想要画一个红色的圆

.container {
    .draw(circle, red);
}

想要画一个绿色正方形

.container {
    .draw(square, green);
}

这就是模式匹配
不过还不够简洁
公共的部分可以这样提取出来

@w:100px;
@h:100px;
.draw(circle, @color) {
    border-radius: 50%;
}
.draw(square, @color) {
    border-radius: 5%;
}
.draw(@_, @color) {
    width: @w;
    height: @h;
    background-color: @color;
}

"@_"就是代表公共的模式匹配
所有的子模式匹配都会拥有这些样式

---

利用这个模式匹配我们可以简化一些常用样式的写法

.pos(a) {
	position:absolute; 
}
.pos(f) { 
	position:fixed 
};

#样式计算
在less中，我们可以更轻松的进行样式计算
完全不需要calc()

.container {
    width: @w + 50px;
    height: @h * 2;
    background-color: red;
}

#嵌套
less中样式中可以嵌套样式

li { 
    a {
        color:#000;
        &:hover{
            color:#bbb;
        }
    }
}

“&”引用自身
相当于原生CSS的

li a {
    color:#000;
} 
li a:hover {
    color: #bbb;
}

这样的嵌套样式让样式结构更清晰

#避免编译

.container {
    width: calc(100% - 200px);
    height: 100px;
    background-color: red;
}

这段代码我们在css中可能没有任何问题
但是less不认识它
解决办法是使用 ~'xxxx'
可以避免编译

.container {
    width: ~'calc(100% - 200px)';
    height: 100px;
    background-color: red;
}

[==主页传送门==](http://blog.csdn.net/q1056843325)