less 初试
一: 使用
- 在node 环境中。
- 安装
npm install -g less
或者用 yarn
yarn add less
- 编译
lessc styles.less style.css
- 在浏览器中
1 |
|
二:变量
这是显而易见的:Less 允许我们使用像JS 一样能声明并使用变量, 看下面的例子
1 |
|
编译成 css 后
1 |
|
三:Mixins
Less
允许我们将已有的 class
和 id
的样式应用到另一个不同的选择器上,请看下面的例子:
1 |
|
然后我们想要上面声明的属性能在其他的选择器上生效。我们只需要像下面这么写:
1 |
|
当然我们也可以用 id 选择器 作为 Mixins
四:嵌套
Less 允许你使用嵌套,不需要你像css 那样。 假设我们现在有这样的css:
1 |
|
在less 中我们可以这么写:
1 |
|
五: 运算符
算术运算符 +
, -
, *
, /
能操作任何 数字,颜色,或者变量。数学运算会在加,减或比较它们之前把单位考虑进去并转换数字。结果就是:最左侧作为最后转换的单位类型。 如果这个转换不成功或者没有意义的话, 单位会被忽略。px -> cm
,rad(弧度)-> %
这些转换后的单位都是会被忽略的。
1 |
|
*, /
乘除运算 并不会转换成 数值。 在大部分情况下,这种转换时没有意义的。因为 一个长度 * 另一个长度,结果时一个区域,或者说是一个面积。但是css 是不支持指定区域表示的。Less将按原样对数字进行运算,并为结果指定明确声明的单位类型。
1 |
|
你也能对颜色进行运算
1 |
|
然而你会发现Less 的颜色函数更有用。
*calc() *
为了 与 css 兼容, calc() 并不支持数学表达式,但是支持嵌套函数中的算术运算和变量
1 |
|
六: 函数
Less提供了一系列的函数来 改变颜色, 操作字符串, 和做运算。 更完整的函数下相关链接
使用这些函数是相当简单的。下面的这个例子 使用了 percentage
把 0.5 转化成 50%, 把颜色的饱和度增加5%, 然后背景色设置成 先饱和度减轻25%, 然后色相角再旋转 8°。
1 |
|
七: 命名空间和提取器
有时候你可能会 为了组织你的项目或者只是单纯的提供一些封装,而对你的minxins 进行分组。 在Less中你能很方便的做到这些。,为了之后的重用,以及分发,假设你想在’#bundle’中封装一些mixins和 变量。
1 |
|
现在假设你想在 #header a
中使用 .button
这个类名,我们可以这么做:
1 |
|
八: 作用域
Less 中作用域和 css 中很像。 变量和 Mixins 首先会在当前作用域中找,如果找不到就重’父’作用域中继承。
1 |
|
像css 自定义属性一样,mixin 和变量的定义不必放在引用他们之前。因此下面的 Less 代码与前面的示例相同:
1 |
|
九: 注释
块注释 和单行注释可以像下面这样
1 |
|
十: 引用
引用就像我们所知道的一样。 你可以 引入一个 .less 文件,所有在这个文件里面的变量都能被访问。
可以为.less 文件指定扩展名。
1 |
|
【完】