Ethan | 博客

构建博客时，使用了less模块化书写css，个人感觉还是很爽的，这里记录下语法，下次书写时供直接查阅使用。

说明

LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，因此也可以在less中写普通的css。

Less本身是css的扩展，语法相对也比较简单，具体使用时，查询即可，这里推荐bootstrap提供的less学习资料，地址为：http://www.bootcss.com/p/lesscss/。

特点

变量
混合：在 LESS 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性
带参数混合：在 LESS 中，你还可以像函数一样定义一个带参数的属性集合。同时我们可以给参数设置默认值，这样在使用时可以选择不适用括号传递参数，也可以使用括号传递自己的参数
@arguments变量：包含了所有传递进来的参数
模式匹配:和传递进来一个标识符一样，在什么情况下，使用什么样式。我们想根据传入的参数来改变混合的默认呈现，例子如下：
```
.mixin(dark,@color){
  Color:darken(@color,10%);
}
.mixin(light,@color){
  Color:darken(@color,10%);
}
.mixin(@_,@color){
  Display:block;
}
运行
@switch: light;
.class {
.mixin(@switch, #888);
}
```
如上，.mixin就会得到传入颜色的浅色。如果@switch设为dark，就会得到深色。
具体实现如下：
- 第一个混合定义并未被匹配，因为它只接受dark做为首参
- 第二个混合定义被成功匹配，因为它只接受light
- 第三个混合定义被成功匹配，因为它接受任意值只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的传入值。
  我们也可以匹配多个参数：这个和重载有点类型，如果调用时只有一个参数，则选择一个参数的定义，重载你懂的。
导引表达式当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。如果你对函数式编程非常熟悉，那么你很可能已经使用过导引。
为了尽可能地保留CSS的可声明性，LESS通过导引混合而非if/else语句来实现条件判断，因为前者已在@media query特性中被定义。
```
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
```
说明：
1. when关键字用以定义一个导引序列
2. 导引中可用的全部比较运算有： > >= = =< <。
3. 导引序列使用逗号‘,’—分割，当且仅当所有条件都符合时，才会被视为匹配成功。
4. 导引可以无参数，也可以对参数进行比较运算。
5. 想基于值的类型进行匹配，我们就可以使用is*函式, 下面就是常见的检测函式：
  - iscolor
  - isnumber
  - isstring
  - iskeyword
  - isurl
6. 如果你想判断一个值是纯数字，还是某个单位量，可以使用下列函式：
  - ispixel
  - ispercentage
  - isem
7. 最后再补充一点，在导引序列中可以使用and关键字实现与条件：
```
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
```
8. 使用not关键字实现或条件
```
.mixin (@b) when not (@b > 0) { ... }
```
嵌套规则：LESS 可以让我们以嵌套的方式编写层叠样式.
运算：任何数字、颜色或者变量都可以参与运算.
Color函数：LESS 提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作。
Math函数：LESS提供了一组方便的数学函数，你可以使用它们处理一些数字类型的值。

命名空间：有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用。

bundle {
.button () {
  display: block;
  border: 1px solid black;
  background-color: grey;
  &:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
//你只需要在 #header a中像这样引入 .button:
#header a {
color: orange;
#bundle > .button;
}

作用域：LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.
字符串插值：变量可以用类似ruby和php的方式嵌入到字符串中，像@{name}这样的结构。
避免编译：有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.要输出这样的值我们可以将要避免编译的值用 “”包含起来然后字符串前加上一个 ~。
Javascript表达式：JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号的方式使用。
```
@var: `"hello".toUpperCase() + '!'`;
@height: `document.body.clientHeight`;
```

具体使用

客户端使用
- 引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:
- 然后点击页面顶部download按钮下载 less.js, 在中引入:
- 注意你的less样式文件一定要在引入less.js前先引入。
- 会自动将less转css，但是会浪费客户端性能
服务器的使用
- 可以直接使用gulp在发布的时候转换

Better

Less基础语法

说明

特点

具体使用

留言