目录
  1. 1. Less
  2. 2. 命令行安装
  3. 3. 用法
    1. 3.1. 嵌套
      1. 3.1.1. 普通嵌套
      2. 3.1.2. @规则嵌套
    2. 3.2. 变量
    3. 3.3. 混合
      1. 3.3.1. 普通混合
      2. 3.3.2. 不编译混合
      3. 3.3.3. 带参数混合
      4. 3.3.4. @arguments的用法
      5. 3.3.5. 清除浮动应用
    4. 3.4. 转义
    5. 3.5. 条件判断
    6. 3.6. 运算
    7. 3.7. 函数
    8. 3.8. 映射
    9. 3.9. 注释
    10. 3.10. 导入
Less - CSS 预处理器

Less

Less 是一种动态样式语言,属于 CSS 预处理器的范畴,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。

Less

命令行安装

1
2
3
4
$ npm install less -g

// 命令行编译
$ lessc styles.less styles.css

用法

嵌套

普通嵌套

1
2
3
4
5
6
7
8
9
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}

编译为:

1
2
3
4
5
6
7
8
9
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}

你还可以使用此方法将伪选择器(pseudo-selectors)与混合(mixins)一同使用。下面是一个经典的 clearfix 技巧,重写为一个混合(mixin) (& 表示当前选择器的父级):

1
2
3
4
5
6
7
8
9
10
11
12
13
.clearfix {
display: block;
zoom: 1;

&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}

@规则嵌套

@ 规则(如 @media@supports)可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面,同一规则集中的其它元素的相对顺序保持不变。

1
2
3
4
5
6
7
8
9
10
11
12
.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;
}
}

编译为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.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;
}
}

变量

  1. 作为普通属性值只来使用:直接使用 @变量名
1
2
3
4
5
6
7
8
9
10
11
// 声明
@primary-color: #f90;
@width: 10px;
@height: @width + 10px;

// 使用
#div {
background-color: @primary-color;
width: @width;
height: @height;
}
  1. 作为选择器和属性名:@{selector的值} 的形式
1
2
3
4
5
6
7
8
9
10
11
12
// 声明
@w: container-wrap;
@bg: background;

#@{w} {
@{bg}: #f6f6f6;
}

// 编译为:
#container-wrap {
background: #f6f6f6f;
}
  1. 变量的作用域和延迟加载
1
2
3
4
5
6
7
8
9
10
@var: 0px;
.class {
@var: 1px;
.brass {
@var: 2px;
width: @var;
@var: 3px;
}
width: @var;
}

编译为:

1
2
3
4
5
6
.class {
width: 1px;
}
.class .brass {
width: 3px;
}

作用域:变量同级优先,再从父级继承;

延迟加载:同级出现两个变量,后声明优先;


混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式,类似于 JavaScript 中的函数, 目的是提高代码的重用性。

普通混合

1
2
3
4
5
6
.bgc {      
color: red;
}
.container {
.bgc(); // 普通混合,将其它样式类属性引入
}

编译为:

1
2
3
4
5
6
.bgc {
color: red;
}
.container {
color: red;
}

不编译混合

1
2
3
4
5
6
7
8
9
10
11
12
13
.my-mixin {
color: black;
}

// 该混合不会被输出
.my-other-mixin() {
background: white;
}

.class {
.my-mixin();
.my-other-mixin();
}

编译为:

1
2
3
4
5
6
7
.my-mixin {
color: black;
}
.class {
color: black;
background: white;
}

带参数混合

1
2
3
4
5
6
7
8
9
10
// .border-radius(@radius: 5px) 可设置默认值
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

#header {
.border-radius(4px);
}

编译为:

1
2
3
4
5
#header {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius 4px;
}

@arguments的用法

1
2
3
4
5
6
7
8
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
.big-block {
.box-shadow(2px; 5px);
}

编译为:

1
2
3
4
5
.big-block {
-webkit-box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
box-shadow: 2px 5px 1px #000;
}

清除浮动应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 定义
.clearfix() {
&::after {
content: "";
display: block;
clear: both;
}
}

// 使用
.container {
width: 100%;
padding: 20px;
.clearfix(); // 使用混合
}

转义

转义(Escaping)允许你使用任意字符串作为属性或变量值。任何 ~"anything"~'anything' 形式的内容都将按原样输出,除非 interpolation

1
2
3
4
5
6
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}

编译为:

1
2
3
4
5
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
}
}

注意,从 Less 3.5 开始,可以简写为:

1
2
3
4
5
6
@min768: (min-width: 768px);
.element {
@media @min768 {
font-size: 1.2rem;
}
}

在 Less 3.5+ 版本中,许多以前需要“引号转义”的情况就不再需要了。


条件判断

使用 when 关键字实现条件判断。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.arrowSet() {
width: 0;
height: 0;
overflow: hidden;
border-width: @pixel;
border-style: solid;
}

.arrow(@direction, @color:#000, @pixel:5px) when (@direction = up) {
.arrowSet();
border-color:@color transparent transparent transparent;
}
.arrow(@direction, @color:#000, @pixel:5px) when (@direction = down) {
.arrowSet();
border-color:transparent transparent @color transparent;
}
.arrow(@direction, @color:#000, @pixel:5px) when (@direction = left) {
.arrowSet();
border-color:transparent transparent transparent @color;
}
.arrow(@direction, @color:#000, @pixel:5px) when (@direction = right) {
.arrowSet();
border-color:transparent @color transparent transparent;
}


.box {
.arrow(up);
.arrow(right, red, 100px);
}

运算

算术运算符 +-*/ 可以对任何数字、颜色或变量进行运算。如果可能的话,算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义,则忽略单位。

1
2
3
4
5
6
7
8
9
10
11
// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

calc() 特例:

为了与 CSS 保持兼容,calc() 并不对数学表达式进行计算,但是在嵌套函数中会计算变量和数学公式的值。


函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。更多函数在Less 函数手册中有详细介绍。

1
2
3
4
5
6
7
8
@base: #f04615;
@width: 0.5;

.class {
width: percentage(@width); // 小数转换为百分比 => 50%
color: saturate(@base, 5%); // 将颜色饱和度增加 5%
background-color: spin(lighten(@base, 25%), 8); // 颜色亮度减小25%,色相增加8
}

映射

从 Less 3.5 版本开始,你还可以将混合(mixins)和规则集(rulesets)作为一组值的映射(map)使用。

1
2
3
4
5
6
7
8
9
#colors() {
primary: blue;
secondary: green;
}

.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}

编译为:

1
2
3
4
.button {
color: blue;
border: 1px solid green;
}

注释

1
2
3
4
/* 一个块注释
* style comment! */
@color: red;
// 行注释

导入

1
2
3
4
// 导入文件
@import url('variable.less');
@import url('variable'); // 可省略后缀
@import 'variable'; // 简写

参考文献:

文章作者: Vincent F0ng
文章链接: https://vincef0ng.cn/post/less-tutorial/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Vincent F0ng

评论(支持Markdown)