给 CSS 加点料 ~

LESS（Leaner Style Sheets 的缩写） 为 CSS 赋予了动静语言的个性，如变量，继承，运算，函数等，它是一门向后兼容的 CSS 扩大语言。

以后最新版本：Less 3.0

官网文档：http://lesscss.org

疾速入门：http://www.bootcss.com/p/lesscss

源码地址：https://github.com/less/less.js

<!-- more -->

1. 浏览器应用

1.1. 编译成 *.css ????

  • node.js

    ➜  npm install -g less➜  lessc styles.less styles.css
  • koala

    这是一个简略易用的 GUI 工具，能够对 less 进行实时编译、压缩等，详见：http://koala-app.com/index-zh.html

    更多工具，请拜访官网：http://lesscss.org/tools/#guis-for-less

  • webapck（后续待补充...）

1.2. 借助 less.js

<!-- 首先引入 less 文件，留神这里的 rel 类型 --><link rel="stylesheet/less" type="text/css" href="styles.less" /><!-- 之后引入 less.js 文件 --><script src="//cdn.bootcss.com/less.js/3.0.0/less.min.js" ></script>

留神：

  • *.less 文件肯定要在引入 less.js 之前引入。
  • 请在 web 服务环境下应用，间接双击关上可能报错。

2. 语法规定

2.1. 变量（Variables）

// 定义变量@bg-color: #fffccc;// 应用变量body {    background-color: @bg-color;}输入：body {  background-color: #fffccc;}

还反对这样：

@size: 14px;@content-font-size: 'size';h3 {    font-size: @@content-font-size;}输入：h3 {  font-size: 14px;}

2.2. 混合（Mixins）

咱们能够事后定义一个通用的属性集（mixin，如上面的 .bordered），而后在另一个须要用到的属性集（如上面的 #menu）外面去调用（或称作引入、合并），这种形式叫混合。

  • 根本应用

    .bordered { // 如果不想这个 mixin 被编译输入，能够写成 .bordered() { ... }    border-top: dotted 1px black;    border-bottom: solid 2px black;}#link {    display: inline-block;    .bordered; // .bordered(); 实现同样的性能，括号不是必须的。}输入：.bordered {  border-top: dotted 1px black;  border-bottom: solid 2px black;}#link {  display: inline-block;  border-top: dotted 1px black;  border-bottom: solid 2px black;}

  • 带参数的混合

    .border-radius (@radius) { // 不设置参数默认值，调用时必须传参，否则编译报错    border-radius: @radius;    -moz-border-radius: @radius;    -webkit-border-radius: @radius;}.border-radius2 (@radius: 5px) { // 设置参数默认值    border-radius: @radius;    -moz-border-radius: @radius;    -webkit-border-radius: @radius;}#header {  .border-radius(4px); // 传参 4px  //.border-radius; // 编译报错}#footer {    .border-radius2; // 编译失常，不传参时，能够省略 ()}输入：#header {  border-radius: 4px;  -moz-border-radius: 4px;  -webkit-border-radius: 4px;}#footer {  border-radius: 5px;  -moz-border-radius: 5px;  -webkit-border-radius: 5px;}

  • @arguments 变量

    @arguments 蕴含了所有传递进来的参数，如下示例

    .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {  box-shadow: @arguments;  -moz-box-shadow: @arguments;  -webkit-box-shadow: @arguments;}.div1 {    .box-shadow(2px, 5px);}输入：.div1 {  box-shadow: 2px 5px 1px #000000;  -moz-box-shadow: 2px 5px 1px #000000;  -webkit-box-shadow: 2px 5px 1px #000000;}

  • 匹配模式

    只有被匹配的混合才会被应用。

    变量能够匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的传入值。

    .mixin (dark, @color) { // 调用时，第一个参数必须传 dark 才会匹配    color: darken(@color, 10%);}.mixin (light, @color) { // 调用时，第一个参数必须传 light 才会匹配    color: lighten(@color, 10%);}.mixin (@_, @color) { // 不论第一个参数传什么，都会匹配    display: block;}@switch: light;.class {    .mixin(@switch, #888);}输入：.class {  color: #a2a2a2;  display: block;}

    也能够匹配多个参数，即依据调用时传参的多少，匹配对应的混合规定（如下）。

    .mixin2 (@a) { // 调用时传1个参数  color: @a;}.mixin2 (@a, @b) { // 调用时传2个参数  color: @b;}.class2 {    .mixin2(#888, #eee);}输入：.class2 {  color: #eeeeee;}

  • 导引（Guards ）

    应用关键字 when 依据表达式进行匹配混合（mixin）。

    为了尽可能地保留 CSS 的可申明性，Less 通过导引（Guards ）而非 if/else 语句来实现条件判断，因为前者已在 @media query 个性中被定义。

    如下示例：

    // when 关键字用以定义一个导引（Guards）序列（此例只有一个导引）.mixin (@a) when (lightness(@a) >= 50%) { // 色彩的亮度大于等于 50% 时匹配  background-color: black;}.mixin (@a) when (lightness(@a) < 50%) { // 色彩的亮度小于 50% 时匹配  background-color: white;}.mixin (@a) { // 不论传什么，始终匹配  color: @a;}.class3 { .mixin(#ddd) }.class4 { .mixin(#555) }输入：.class3 {  background-color: black;  color: #dddddd;}.class4 {  background-color: white;  color: #555555;}

    导引中可用的比拟运算符 >、>=、=、=<、<。

    // 关键字 true 只示意布尔真// 上面两种形式是等价的.truth (@a) when (@a) { ... }.truth (@a) when (@a = true) { ... }// 除关键字 true 以外的其它值都被视作布尔假.class {  .truth(40); // 这里的传参 40 被视作布尔假，不会匹配下面定义的混合（mixin）}

    导引序列能够应用基于 CSS media queries 的逻辑操作符

    // 用关键字 and 合并导引序列，示意条件的并且关系.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }// 用逗号 , 合并导引序列，示意条件的或者（or）关系.mixin (@a) when (@a > 10), (@a < -10) { ... }// 用关键字 not 取反.mixin (@b) when not (@b > 0) { ... }

    最初，如果想基于值的类型进行匹配，咱们就能够应用 is* 函式

    .mixin (@a, @b: 0) when (isnumber(@b)) { ... }.mixin (@a, @b: black) when (iscolor(@b)) { ... }

    可用的 is* 函数

    • iscolor
    • isnumber
    • isstring
    • iskeyword
    • isurl
    • ispixel 判断一个值的单位是否是 px
    • ispercentage 判断一个值的单位是否是 百分比
    • isem 判断一个值的单位是否是 em
    • isunit(value, unit) 判断一个值是否是指定的单位类型
    • isruleset

2.3. 嵌套（Nesting）

LESS 能够让咱们以嵌套的形式编写层叠款式

#header {  color: black;  .navigation {    font-size: 12px;  }  .logo {    width: 300px;    // 符号 & 示意以后选择器的父级    // 次要用于编写串联选择器，对伪类（如:hover、:focus）尤其有用    &:hover { text-decoration: none }  }}输入：#header {  color: black;}#header .navigation {  font-size: 12px;}#header .logo {  width: 300px;}#header .logo:hover {  text-decoration: none;}

@规定（At-rules）例如 @media 或 @supports，同样是能够被嵌套的，编译后，@规定被放在顶级，同一个规定集下的其它元素绝对程序放弃不变，如下示例：

.component {  width: 300px;  @media (min-width: 768px) {    width: 600px;    @media  (min-resolution: 192dpi) {      background-image: url(/img/retina2x.png);    }  }  @media (min-width: 1280px) {    width: 800px;  }}输入：.component {  width: 300px;}@media (min-width: 768px) {  .component {    width: 600px;  }}@media (min-width: 768px) and (min-resolution: 192dpi) {  .component {    background-image: url(/img/retina2x.png);  }}@media (min-width: 1280px) {  .component {    width: 800px;  }}

2.4. 运算（Operations）

任何数字、色彩或者变量都能够采纳运算符 加（ + ）、减（ - ）、乘（ * ）、 除（ / ） 进行运算。

在加、减或比拟数字之前，如果数字蕴含单位，则先转换成雷同的单位（比方 10mm 转成 1cm），并且以最左侧的单位为基准。如果单位是不可转换的（比方 px → cm）或转换是没有意义的，则会被疏忽。

@conversion-1: 5cm + 10mm; // 后果：6cm（10mm 先转成 1cm 而后再计算）@conversion-2: 2 - 3mm - 5cm; // 后果：-51mm（5cm 先转成 50mm 而后再计算）@incompatible-units: 2 + 5px - 3cm; // 后果：4px（cm 不能转成 px，所以单位被疏忽）@base: 5%;@filler: @base * 2; // 后果：10%@other: @base + @filler; // 后果：15%div {    color: #888 / 4; // 后果：#222222    height: 100% / 2 + @filler; // 后果：60%}

乘法 和 除法 运算不会转换数字，因为在大多数状况下，这是没有意义的：长度乘以长度会产生一个区域，而css不反对指定区域。所以，LESS 将会对数字进行原样操作（疏忽单位）,并将最左侧指定的单位带到后果里。

@base: 2cm * 3mm; // 后果：6cm

2.5. 函数（Functions）

LESS 提供了一系列针对色彩、字符串和数学运算的函数，详见官网文档。

上面是一些示例：

hue(@color);        // 获取色彩的色调saturation(@color); // 获取色彩的饱和度lightness(@color);  // 获取色彩的亮度// 基于一种色彩创立另一种色彩// @new 将会放弃 @old的 色调, 然而具备不同的饱和度和亮度@new: hsl(hue(@old), 45%, 90%);percentage(0.5); // 转成百分比 50%

2.6. 命名空间

有时候，为了更好组织 CSS 或者单纯是为了更好的封装，将一些变量或者混合（mixins）模块打包起来, 你能够像上面这样在 #bundle 中定义一些属性集：

#bundle {  .button () {    display: block;    border: 1px solid black;    background-color: grey;    &:hover { background-color: white }  }  .tab { ... }  .citation { ... }}

应用 > 援用某属性集上面的规定：

#header a {  color: orange;  #bundle > .button;}

2.7. 作用域（Scope）

LESS 中的作用域跟其余编程语言十分相似，首先会从本地查找变量或者混合（mixins）模块，如果没找到的话会去父级作用域中查找，直到找到为止。

@var: red;#page {  @var: white;  #header {    color: @var; // white，首先在 #header 里查找，而后 #page，而后再向外层  }}

2.8. 正文（Comments）

// 这种是 less 退出的正文，不会被编译/* 这种是保留的 css 正文，编译时保留 */

2.9. 引入（Importing） *.less 文件

@import "library"; // library.less 后缀名可带可不带@import "typo.css"; // 间接导入 CSS 文件，不想 LESS 对它进行解决

2.10. 变量嵌入字符串

变量能够用相似 ruby 和 php 的形式嵌入到字符串中，构造：@{name}

@base-url: "http://assets.fnord.com";background-image: url("@{base-url}/images/bg.png");

2.11. 应用 ~ 禁止编译

有时候咱们须要输入一些不正确的 CSS 语法或者应用一些 LESS 不意识的专有语法，这时能够应用合乎 ~，如下：

.class {  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";}输入：.class {  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();}

2.12. 应用 JavaScript 表达式

通过反引号的形式能够再 LESS 中应用 JavaScript 表达式。

@var: `"hello".toUpperCase() + '!'`; // 后果：HELLO!