CSS预处理语言Less常用语法

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;
}

==主页传送门==