【Less】给 CSS 加点料
博客说明
文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！
说明
相比Sass的高调宣言，Less就比较低调了，看下面官网的介绍
image-20211122224805223
官网地址：Less中文网
什么是 Less
已经知道了什么是Sass的情况下，相信对什么是Less应该也会比较的清晰了，它也是CSS的武器，让CSS更加强大。（感觉最近说话有点朴素了哈）
官方回答：Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。
总结：既然官方都怎么简洁低调了，就不用太多花里胡哨的了
安装Less
可以使用 npm来安装 Less。
npm install -g less
在浏览器中也可以使用
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
Less变量
变量这种东西当然是第一个来讲的。Less 变量使用 @ 符号。
语法
@variablename: value;
示例
@base-font: Helvetica, sans-serif;
@my-color: red;
@my-font-size: 18px;
body {
font-family: @base-font;
font-size: @my-color;
color: @y-font-size;
}
转换为CSS代码
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
其实就是把变量的使用直接放入对应的值内。
变量的作用域
Sass的变量其实是有作用域的，Sass 变量的作用域只能在当前的层级上有效果，如果当前找不到，就像父节点上寻找
@myColor: red;
h1 {
@myColor: green; // 只在 h1 里头有用，局部作用域
color: @myColor; // green
}
p {
color: @myColor; // red
}
Less的嵌套规则
这个是方便我们书写的好东西，也是最显而易见的新增。
嵌套
嵌套还是直接看代码来的痛快
less代码
nav {
ul {
margin: 0;
padding: 20px;
}
li {
color: #FFFFFF;
}
}
css代码
nav ul {
margin: 0;
padding: 20px;
}
nav li {
color: #FFFFFF;
}
有点像HTML的形式了
@规则嵌套和冒泡
@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。
@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。
// less
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
width: 800px;
}
}
// css
.component {
width: 300px;
}
@media (min-width: 768px) {
.component {
width: 600px;
}
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
.component {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
.component {
width: 800px;
}
}
导入文件@import
“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉。
现在就不要问为什么要使用导入文件的方式了，问就是方便！就是真香！方便面：真香？？？
语法
@import filename; //less可省略
@import "filename.css";
混合Mixins
混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法
示例
.important-text {
color: red;
font-size: 24px;
font-weight: bold;
}
咋一看，这不就是一个普通的class样式吗
使用混合
.text {
.important-text();
}
less的使用混合，那是相当的随意，非常好用！
映射Maps
从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。
比如在做一个主题色的时候，就可以很好的选择Less的映射。
示例
// less
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
// css
.button {
color: blue;
border: 1px solid green;
}
写在最后的话
写了Sass之后写了less，发现了很多共通的，也有许多差一点，感觉知识又浏览了一遍。使用Less呢，如果你的应用需要使用多种主题，可以考虑使用less。
感谢
万能的网络
公众号-归子莫，小程序-小归博客
网友评论