[聚合文章] less全知全解

  1. 首页
  2. 聚合文章
  3. 文章详情
CSS 2017-12-19 18 阅读
原文链接: http://www.jianshu.com/p/c49ec7626c90

一.简介

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;

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。