- less是什么
- 为什么用less
- 怎么使用less
less是什么
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性
less有什么优势
使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
less怎么使用
关于less使用，在前期一定要规划好，哪里用什么颜色，也就是相当于一套规范，比如导航用是什么字体，什么颜色，标题用什么颜色，内容用什么颜色，这都要很好空子
利用npm安装
$ npm install less -g
利用lessc可以经行编译
$ lessc style.less > css.css
在浏览器中使用
直接在加载less
<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>
less有那些知识点
- 变量
- 混合
- 匹配模式
- 运算
- 嵌套规则
- @arguments变量
变量
利用@声明的变量，例如，声明一个颜色为red
@nav: red;
.nav {
color: @nav;
}
混合
在 LESS 中我们可以定义一些通用的属性集为一个 class，然后在另一个 class 中去调用这些属性，下面有这样一个 class：
.box {
font-size: 12px;
background: @color;
}
@color: #343434;
.nav {
color: @color;
.box;
}
带参数混合
在 LESS 中，你还可以像函数一样定义一个带参数的属性集合：
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
还可以设置默认值
.border-radius (@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
@arguments 变量
@arguments包含了所有传递进来的参数。 如果你不想单独处理每一个参数的话就可以像这样写：
.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);
输出
box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;
作用域
LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止。
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}
注释
利用/* ..... */注释
在less文件支持双斜线注释，但是在编译之后会被忽视掉
// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }
避免编译
有时候我们需要输出一些不正确的 CSS 语法或者使用一些 LESS 不认识的专有语法。
要输出这样的值我们可以在字符串前加上一个 ~，例如：
.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
输出
.class {
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}
在避免编译的值中间也可以像字符串一样插入变量：
.class {
@what: "Stuff";
filter: ~"ms:alwaysHasItsOwnSyntax.For.@{what}()";
}
导入
在LESS中，你既可以导入CSS文件，也可以导入LESS文件。但只有导入的LESS文件才会被处理（编译），导入的CSS文件会保持原样。如果你希望导入一个CSS文件，保留.css后缀即可：
导入的文件会自动放到前面
@import "style.css"
导入less文件会进行编译，
字符串插值
变量可以用像 @{name} 这样的结构，以类似 ruby 和 php 的方式嵌入到字符串中：
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
选择器插值
less
@name: blocked;
.@{name} {
color: red;
}
输出
.blocked {
color: red;
}
