less 笔记

November 20, 2017

作为CSS的一种扩展语言，使得CSS开发更便捷。 变量 # less中的变量使用@开头。 // LESS @color: #4D926F; #header { color: @color; } h2 { color: @color; } /* 生成的 CSS */ #header { color: #4D926F; } h2 { color: #4D926F; } 甚至可以用变量名定义为变量: @fnord: "I am fnord."; @var: 'fnord'; content: @@var; --> content: "I am fnord."; 请注意 LESS 中的变量为完全的 ‘常量’ ，所以只能定义一次. 字符串嵌入 # 变量可以用类似ruby和php的方式嵌入到字符串中，像@{name}这样的结构: @base-url: "http://assets.fnord.com"; background-image: url("@{base-url}/images/bg.png"); 作用域 # LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止. 引入文件 # 你可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带: @import "lib. ...