一.简介
1.less是什么
Less 是一门 一种动态样式语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node和浏览器上。
如以下的less代码：
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
最后会编译为：
.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
2. 在客户端使用
外联样式：引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less">
内联样式如下：
<style type="text/less">
// less 代码
</style>
接下来 下载 less.js 并通过 <script></script> 标签将其引入，放置于页面的 <head> 元素内：
<script src="less.js" type="text/javascript"></script>
注意：你的less样式文件一定要在引入less.js前先引入。
备注：请在服务器环境下使用！本地直接打开可能会报错！
监视模式
监视模式是客户端的一个功能，这个功能允许当你改变样式的时候，客户端将自动刷新。
要使用它，只要在URL后面加上'#!watch'，然后刷新页面就可以了。另外，你也可以通过在终端运行less.watch()来启动监视模式。
<script>less.watch();</script>
3.在服务器端使用
在服务器端安装 LESS 的最简单方式就是通过 npm(node 的包管理器), 像这样
$ npm install less
如果你想下载最新稳定版本的 LESS，可以尝试像下面这样操作:
$ npm install less@latest
4.使用
只要安装了 LESS，就可以在Node中像这样调用编译器:
var less = require('less');
less.render('.class { width: 1 + 1 }', function (e, css) {
console.log(css);
});
上面会输出
.class {
width: 2;
}
你也可以手动调用解析器和编译器:
var parser = new(less.Parser);
parser.parse('.class { width: 1 + 1 }', function (err, tree) {
if (err) { return console.error(err) }
console.log(tree.toCSS());
});
5.配置
你可以向解析器传递参数:
var parser = new(less.Parser)({
paths: ['.', './lib'], // Specify search paths for @import directives
filename: 'style.less' // Specify a filename, for better error messages
});
parser.parse('.class { width: 1 + 1 }', function (e, tree) {
tree.toCSS({ compress: true }); // Minify CSS output
});
6.在命令行下使用
你可以在终端调用 LESS 解析器:
$ lessc styles.less
上面的命令会将编译后的 CSS 传递给 stdout, 你可以将它保存到一个文件中:
$ lessc styles.less > styles.css
如何你想将编译后的 CSS 压缩掉，那么加一个 -x 参数就可以了.
二.less语法
1.变量
Less中的变量允许你在样式中的某个地方对常用值进行定义，然后应用到样式中，这样只要改变你定义的变量参数值就可以达到改变全局的效果，我们先来看一段代码：
/*======== 定义变量===========*/
@color: #4d926f;
/*======== 应用到元素中 ========*/
#header {
color: @color;
}
h2 {
color: @color;
}
以上代码会编译为：
/*======= Less 编译成 css ======*/
#header {
color: #4d926f;
}
h2 {
color: #4d926f;
}
Less中的变量还具有计算功能，如：
@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
编译为：
#header {color: #6c94be;}
注：在Less中的变量实际上就是一个“常量”，因为它们只能被定义一次。
2.混合
在 LESS 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性. 下面有这样一个class:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
那如果我们现在需要在其他class中引入那些通用的属性集，那么我们只需要在任何class中像下面这样调用就可以了:
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
.bordered class里面的属性样式都会在 #menu a 和 .post a中体现出来:
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入。怎么样，这样确实很方便很强大吧。
3.带参数混合
在 LESS 中，你还可以像函数一样定义一个带参数的属性集合:
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
然后在其他class中像这样调用它:
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
我们还可以像这样给参数设置默认值:
.border-radius (@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
所以现在如果我们像这样调用它的话:
#header {
.border-radius;
}
4.@arguments 变量
Mixins还有一个重要的变量：@arguments。
@arguments在Mixins中具是一个很特别的参数，当Mixins引用这个参数时，他将表示所有的变量，当你不想处理个别的参数时，这个将很有用，我们来看一个阴影的实例：
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
#header {
.boxShadow(2px,2px,3px,#f36);
}
以上代码编译为：
#header {
-moz-box-shadow: 2px 2px 3px #FF36;
-webkit-box-shadow: 2px 2px 3px #FF36;
box-shadow: 2px 2px 3px #FF36;
}
5.模式匹配
有些情况下，我们想根据传入的参数来改变混合的默认呈现，比如下面这个例子：
.mixin (@s, @color) { ... }
.class {
.mixin(@switch, #888);
}
如果想让.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);
}
就会得到下列CSS:
class {
color: #a2a2a2;
display: block;
}
如上，.mixin就会得到传入颜色的浅色。如果@switch设为dark，就会得到深色。
具体实现如下：
第一个混合定义并未被匹配，因为它只接受dark做为首参
第二个混合定义被成功匹配，因为它只接受light
第三个混合定义被成功匹配，因为它接受任意值
只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的传入值。
我们也可以匹配多个参数：
.mixin (@a) {
color: @a;
}
.mixin (@a, @b) {
color: fade(@a, @b);
}
6.导引表达式
当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。
为了尽可能地保留CSS的可声明性，LESS通过导引混合而非if/else语句来实现条件判断，因为前者已在@media query特性中被定义。
以此例做为开始：
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
when关键字用以定义一个导引序列(此例只有一个导引)。接下来我们运行下列代码：
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
就会得到：
class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}
7.导引比较运算
导引中可用的全部比较运算有： > >= = =< <。此外，关键字true只表示布尔真值，下面两个混合是相同的：
.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }
除去关键字true以外的值都被视示布尔假：
.class {
.truth(40); // Will not match any of the above definitions.
}
导引序列使用逗号‘,’—分割，当且仅当所有条件都符合时，才会被视为匹配成功。
.mixin (@a) when (@a > 10), (@a < -10) { ... }
导引可以无参数，也可以对参数进行比较运算：
@media: mobile;
.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }
.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }
最后，如果想基于值的类型进行匹配，我们就可以使用is*函式：
.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }
下面就是常见的检测函式：iscolor、isnumber、isstring、iskeyword、isurl
如果你想判断一个值是纯数字，还是某个单位量，可以使用下列函式：ispixel、ispercentage、isem
最后，你可以使用关键词 and 在 guard 中加入额外的条件:：
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
或者，使用关键词 not 否定条件：
.mixin (@b) when not (@b > 0) { ... }
8.嵌套规则
LESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS:
#header { color: black; }
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
#header .logo:hover {
text-decoration: none;
}
在 LESS 中, 我们就可以这样写:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
注意 & 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus。
例如：
.bordered {
&.float {
float: left;
}
.top {
margin: 5px;
}
}
输出：
.bordered.float {
float: left;
}
.bordered .top {
margin: 5px;
}
9.运算
任何数字、颜色或者变量都可以参与运算. 来看一组例子:
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;
LESS 的运算已经超出了我们的期望，它能够分辨出颜色和单位。如果像下面这样单位运算的话:
@var: 1px + 5;
LESS 会输出 6px。
括号也同样允许使用:
width: (@var + 5) * 2;
并且可以在复合属性中进行运算:
border: (@width * 2) solid black;
网友评论