【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
公众号-归子莫，小程序-小归博客
发表回复