【Less】给 CSS 加点料前端cssless

【Less】给 CSS 加点料博客说明

文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！

说明相比Sass的高调宣言，Less就比较低调了，看下面官网的介绍

文章图片

官网地址：Less中文网
什么是 Less 已经知道了什么是Sass的情况下，相信对什么是Less应该也会比较的清晰了，它也是CSS的武器，让CSS更加强大。（感觉最近说话有点朴素了哈）
官方回答：Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。
总结：既然官方都怎么简洁低调了，就不用太多花里胡哨的了
安装Less 可以使用 npm来安装 Less。

npm install -g less

在浏览器中也可以使用

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。
感谢