【Less】给 CSS 加点料
博客阐明
文章所波及的材料来自互联网整顿和集体总结，意在于集体学习和教训汇总，如有什么中央侵权，请分割自己删除，谢谢！
阐明
相比Sass的高调宣言，Less就比拟低调了，看上面官网的介绍
官网地址：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。
感激
万能的网络
以及勤奋的本人，集体博客，GitHub测试，GitHub
公众号-归子莫，小程序-小归博客