less全知全解

96
nightZing
2017.12.11 18:43 字数 1945

一.简介

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;
前端杂技