初始使用(根据 less 官方指引)
1-初始安装
2-使用方式
2-1 命令式
通过 lessc 命令进行编译
// 1- 编译文件名 ---> 输出文件名lessc styles.less styles.css
复制代码
2-2 代码式
var less = require('less');
less.render('.class {width: (1+1)}', function (e, output) { console.log(output.css)})
复制代码
2-3 浏览器式
<!-- 引入通过引入less --><link rel="stylesheet/less" type="text/css" href="styles.less" />
<!-- 配置less, 需要处于less.js之前 --><script> less = { ...read the official website // http://lesscss.cn/usage/#using-less-in-the-browser-setting-options }</script>
<!-- 引入 `less.js`， 这里不同源会存在跨域问题，需要同源访问 --><script src="less.js"></script>
复制代码
3-变量（Variables）
3-1 变量声明 @
变量只能定义一次，其实与常量没什么区别。
变量不需要提前定义，属于懒加载
解决的问题:
通过变量的定义，减少重复的值
使用 @ 进行声明变量， 通过 : 作为赋值符号, 右边书写变量值，值如 css 一致
例如：
传统 css 写法：
a, .link { color: #428bca; // 重复定义}.widget { color: #fff; background: #428bca; // 重复定义}
复制代码
less 增强变量的概念的写法：
// Variables@link-color: #428bca; // sea blue // darken(), 可以使某种颜色加深程度从10-100%@link-color-hover: darken(@link-color, 10%);// Usagea,.link { color: @link-color;}a:hover { color: @link-color-hover;}.widget { color: #fff; background: @link-color-hover;}
复制代码
3-2 变量替换 {replace-variables}å
选择器（Selectors）替换
// 编译前@my-selector: banner;.@{my-selector} { font-weight: bold; line-height: 40px; margin: 0 auto;}// 编译后.banner { font-weight: bold; line-height: 40px; margin: 0 auto;}
复制代码
URLS 替换
用此方法，可以通过定义项目中的 cdn 服务位置，通过引入替换引入即可
@images: "../img";body { color: #444; background: url("@{images}/white-sand.png"); }
复制代码
模块 @import 替换
通过定义公共路径，进行导入替换公共路径
@themes: "../../src/themes";@import "@{themes}/tidal-wave.less";
复制代码
属性值(Properties) 替换
替换公共的样式属性名
// 编译前@property: color;.widget { @{property}: #0ee; background-@{property}: #999;}// 编译后.widget { color: #0ee; background-color: #999;}
复制代码
变量名
// 编译前@fnord: "I am fnord."；// 定义变量@var: "fnord"; // 引入上面的变量的名字content: @@var; // 通过 @@var --> @fnord --> "I am fnord"// 编译后content: "I am fnord.";
复制代码
3-3 懒加载特性 Lazy Loading
重复定义变量不会报错，变量查找是从 {} 的范围，逐级 {} 从下到上 顺序去找,
直至找到最外层
// 编译前.lazy-eval { width: @var;}@var: @a;@a: 9%
// 编译后.lazy-eval-scope { width: 9%;}
复制代码
// 编译前@var: 0;.class { @var: 1; .brass { @var: 2; three: @var; @var: 3; } one: @var;}// 查找: one --> 先找 @val： 1 --> 有了就用它// 查找：three --> 先找 @val: 3 --> 有了就用它
复制代码
// 编译后.class { one: 1;}.class .brass { three: 3;}
复制代码
覆盖默认变量
// library@base-color: green;@dark-color: darken(@base-color, 10%);
// use of library@import "library.less";@base-color: red;
// 当从库里面定义了 @base-color之后// 引入了库的内容，所以@base-color: red, 会覆盖掉 @base-color: green; 的值
复制代码
错误告警
原因：lessc --clean-css styles.less styles.min.css
Unable to load plugin clean-css please make sure that it is installed under or at the same level as less
此命令是因为 Less 的版本太高了，需要降低版本即可
评论