CSS预处理语言Less常用语法

Posted 2022-02-26 刻刻帝丶

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)