enoyao

**运算** 在less.js里面任何数字、颜色代码或者变量相互之间都能运算 ``` @base: 5%; @filler: @base * 2; @other: @base + @filler; #header2 { color: #888 / 4;//#@222 background-color: @nice-blue + #111; height: 100% / 2 + @filler;//50%+10% width:...

**函数** less自定义了部分常用的函数，例如百分比转换，颜色变化等等 ``` @height: 0.5; @size: 10px+10; @color: #666 + 111; #header2 { color: @color; height: percentage(@height);//0.5->50% font-size: saturate(@size,10%);//增加10%饱和度 background-color: spin(lighten(@color, 25%), 10);//颜色亮度降低25%,并且色相值增加10 } ``` [函数参考手册](http://less.bootcss.com/functions/) 特别说明一个default函数 ``` // bigCat...

**混合** 混合就是可以预先定义好一个样式，然后用它放到我们想去使用该样式的大括号内触发 这样就可以轻松实现继承 注意`my-other-mixin()`不带参数的Mixin ``` .my-mixin { color: black; } //定义一个混合方法，想使用的时候再去触发 .my-other-mixin() { background: white; } .my-font-mixin { font-size: 20px; } .cat, #wscat{ background-color: aquamarine; } #header3 { .my-mixin; .my-other-mixin;//可以省略括号...

**嵌套规则** css一些基于父元素寻找子节点添加样式的写法，我们可以用less来简化 ``` text Nav Logo ``` ``` #header4 { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } &:before{ content: "你好"; } &-wsscat{ background-color: bisque; }...

**作用域** `@var`会在作用域范围内一个一个往外找，知道找到最接近的那个变量定义作为值 ``` logo ``` ``` @var: white; #header5 { @var: red; #logo { color: @var; // red } } ```

**选择器** 把变量作为CSS类名或者ID名 ``` @bg: background; .@{bg} { background-color: black; } ``` 上面这一句将转化为下面这一句，注意一定要这样写`.@{bg}`不能漏掉`{}` ``` .background { background-color: black; } ```

**带参数的Mixin（混入）** ``` logo ``` 注意定义好的`.bg(...){...}`一定要放在正常的css选择器里面去触发 ``` .bg(@color:#555555, @size:16px) { background-color: @color; font-size: @size; } .background{ .bg } ``` 当然我们也可以把他当函数传参数来使用，例如改成下面这个样子 ``` .bg(@color, @size) { background-color: @color; font-size: @size; } .background{ .bg(#555555,16px)...

**命名空间** #wsscat和#wsa两个不同的命名空间，如果两者之间要通信可以这样 ``` #wsscat > .home; #wsscat > .logo ``` ``` #wsscat{ @bg:#000000; @width:100px; .home{ background-color: @bg; } .logo{ width:@width; &:hover{ color: #7FFFD4+@bg; } } } #wsa{ .home{ #wsscat >...

**注释** ``` // 单行注释，编译后不会输出 /* 多行注释，用原生CSS的/*注释....*/形式，经过编译后会输出 */ ``` ``` //Wsscat /* *Wsscat * */ ``` 所以上面这代码，第一行转化为css的时候不输出，第二行则输出

**导入** less样式文件可以用@import '文件路径'来引入我们外面写好的另一份less文件 `@import 'styles.less';` 如果我们不带扩展名或者带非`.less`的扩展名编译的时候都会被认为是less文件 `@import 'styles';` @import能放在less文件的任何位置，区别于css的@import，它只能放在文件首行 还有@import还提供了六个可选配置项(分别为reference,inline,less,css,once,multiple)，用来改变引入文件的特性，语法为： `@import (配置项) '文件路径';` 具体如下： 1. @import (reference) "文件路径"; 　　将引入的文件作为样式库使用，因此文件中样式不会被直接编译为css样式规则。当前样式文件通过extend和mixins的方式引用样式库的内容。 2. @import (inline) "文件路径"; 　　用于引入与less不兼容的css文件，通过inline配置告知编译器不对引入的文件进行编译处理，直接输出到最终输出。注意：引入的文件和当前文件会被编译为一个样式样式 3. @import (less) "文件路径"; 　　默认使用该配置项，表示引入的文件为less文件。 4....