less语法

发表于 | 分类于

1. 变量

可以将属性的值赋值给一个变量，变量为完全的 “常量” ，所以只能定义一次
例如：

1
2
3
4
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
结果 #header { color: #6c94be; }

也可以用变量名定义为变量
例如：

1
2
3
4
@fnord: "I am fnord.";
@var: 'fnord';
content: <font color="blue">@@var</font>;
结果 content: "I am fnord.";

2. 混合

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。
例如：

1
2
3
4
5
6
7
8
9
10
11
12
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}

#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}

结果

1
2
3
4
5
6
7
8
9
10
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

@arguments包含了所有传递进来的参数。不必单独处理每一个参数。
例如：

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

结果

1
2
3
box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;

3. 模式匹配

根据传入的参数来改变混合的默认呈现
例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//让.mixin根据不同的@switch值而表现各异
.mixin (dark, @color) {
color: darken(@color, 10%);
}
.mixin (light, @color) {
color: lighten(@color, 10%);
}
.mixin (@_, @color) {
display: block;
}
//运行
@switch: light;
.class {
.mixin(@switch, #888);
}

结果

1
2
3
4
.class {
color: #a2a2a2;
display: block;
}

mixin就会得到传入颜色的浅色。如果@switch设为dark，就会得到深色。
具体实现如下：
第一个混合定义并未被匹配，因为它只接受dark做为首参
第二个混合定义被成功匹配，因为它只接受light
第三个混合定义被成功匹配，因为它接受任意值
只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的传入值。

4. 命名空间

为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来
例如：

1
2
3
4
5
6
7
8
9
10
#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

使用

1
2
3
4
#header a {
  color: orange;
  #bundle > .button;
}

5. 作用域

less中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止
例如：

1
2
3
4
5
6
7
8
9
10
@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
#footer {
  color: @var; // red  
}

6. 注释

CSS形式的注释在less中是依然保留，less同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉

7. 引用@import

  • 可以在less文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带
    例如：

    1
    2
    @import "lib.less";
    @import "lib";

  • 如果想导入一个CSS文件而且不想less对它进行处理，只需要使用.css后缀就可以，这样less就会跳过它不去处理它

    1
    @import "lib.css";

8. 字符串插值

即将@后面的变量使用{}括起来，然后整体使用””包裹即可。
例如：

1
2
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

9. 避免编译~

有时候我们需要输出一些不正确的CSS语法或者使用一些 less不认识的专有语法。
要输出这样的值我们可以在字符串前加上一个 ~，并将要避免编译的值用 “”包含起来。
例如：

1
2
3
.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

结果

1
2
3
.class {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

10. JavaScript 表达式

  • JavaScript 表达式也可以在.less 文件中使用，可以通过反引号的方式使用

    1
    @var: `"hello".toUpperCase() + '!'`;    //@var: "HELLO!";

  • 也可以访问JavaScript环境

    1
    @height: `document.body.clientHeight`;

less的使用：见https://xieshuangting.github.io/2018/07/01/less的使用/