less使用小结
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin(混入)、函数等特性,使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
使用之前需要安装,可以通过npm来进行安装
$ npm install -g less
1.变量
LESS 允许开发者自定义变量,变量可以在全局样式中使用,使得样式修改起来更加简单。
@mainColor:#E93223;
body{
color: @mainColor;
}
2.Mixin(混入)
混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法。
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered(); } .post a { color: red; .bordered(); }
.bordered
类所包含的属性就将同时出现在 #menu a
和 .post a
中了
3.嵌套
假设我们有以下 CSS 代码:
#header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; }
用 Less 语言我们可以这样书写代码
#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } }
用 Less 书写的代码更加简洁,并且模仿了 HTML 的组织结构。
你还可以使用此方法将伪选择器(pseudo-selectors)与混合(mixins)一同使用。下面是一个经典的 clearfix 技巧,重写为一个混合(mixin) (&
表示当前选择器的父级)
.clearfix { display: block; zoom: 1; &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } }
4.导入
“导入”的工作方式和你预期的一样。你可以导入一个 .less
文件,此文件中的所有变量就可以全部使用了。如果导入的文件是 .less
扩展名,则可以将扩展名省略掉:
@import "library"; // library.less
@import "typo.css";
.f_left{
float: @right;
}
5.运算及函数
算术运算符 +
、-
、*
、/
可以对任何数字、颜色或变量进行运算。如果可能的话,算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义,则忽略单位。无效的单位换算例如:px 到 cm 或 rad 到 % 的转换。
@back:#333; .test{ border: 1px solid @back*2; background: lighten(#000, 10%); color:darken(#000, 10%); }
saturate(@color, 10%); // 饱和度增加 10% desaturate(@color, 10%); // 饱和度降低 10% lighten(@color, 10%); // 亮度增加 10% darken(@color, 10%); // 亮度降低 10% fadein(@color, 10%); // 透明度增加 10% fadeout(@color, 10%); // 透明度降低 10% fade(@color, 50%); // 设定透明度为 50%
6.命名空间和访问符
有时,出于组织结构或仅仅是为了提供一些封装的目的,你希望对混合(mixins)进行分组。你可以用 Less 更直观地实现这一需求。假设你希望将一些混合(mixins)和变量置于 #bundle
之下,为了以后方便重用或分发:
#bundle() { .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white; } } .tab { ... } .citation { ... } }
现在,如果我们希望把 .button
类混合到 #header a
中,我们可以这样做:
#header a { color: orange; #bundle.button(); // 还可以书写为 #bundle > .button 形式 }
7.作用域
Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合(mixins),如果找不到,则从“父”级作用域继承。
@var: red; #page { @var: white; #header { color: @var; // white } }
与 CSS 自定义属性一样,混合(mixin)和变量的定义不必在引用之前事先定义。因此,下面的 Less 代码示例和上面的代码示例是相同的:
@var: red; #page { #header { color: @var; // white } @var: white; }