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)