less学习：基础语法总结

一、 less是什么

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

注意1）：less使用.less作为文件后缀。通过第三方工具，可以一键或者实时编译成对应的css文件。也就是说：实际项目中，我们编辑的是.less文件，但引用时依旧像往常一样引用.css文件。通过第三方工具（例如Koala），可以实现.less文件一发生改变，就生成同名的.css文件。

注意2）：LESS的基础语法基本上分为以下几个方面：变量、混合(Mixins)、嵌套规则、运算、函数、作用域等。

例子如下：

1）.less文件显示：

 @base: #f938ab;/*定义变量*/

.box {

  color: @base;

 /*使用函数*/

  border-color: lighten(@base, %);

  /*嵌套*/

  &-content{

    width:%;

  }

  .title{

    color:#ccc;

  }

}

通过第三方工具（例如Koala），翻译成的css样式如下：

2）.css文件显示：

.box {

  color: #f938ab;

  border-color: #fdcdea;

}

.box-content {

  width: %;

}

.box .title {

  color: #ccc;

}

二、less的语言特性

1、变量

注意，由于变量只能定义一次，其本质就是“常量”；

@nice-blue: #5B83AD;

@light-blue: @nice-blue + #;

#header {

  color: @light-blue;

}

编译为：

#header {

  color: #6c94be;

}

变量代换：如选择器名称，属性名称，URL和@import

1）：选择器

@mySelector: banner;

.@{mySelector} {

  font-weight: bold;

  line-height: 40px;

  margin:  auto;

编译为：

.banner {

  font-weight: bold;

  line-height: 40px;

  margin:  auto;

}

2）：网址

@images: "../img";

// 用法

body {

  color: #;

  background: url("@{images}/white-sand.png");

}

3）：import语句： @import "@{themes}/tidal-wave.less";

import语句它可以保存一个路径的变量。这是非常有用的，当你参考一个共同的父目录。

例子：演示了如何在 import 语句使用变量：

<html>

<head>

  <link rel="stylesheet" href="style.css" type="text/css" />

  <title>LESS Variables in Import Statements</title>

</head>

<body>

<div class="myclass">

<h2>Welcome to Yiibai Yiibai</h2>

<p>LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p>

</div>

</body>

</html>

接下来，创建文件 style.less。

@path : "http://www.yiibai.com/less";

@import "@{path}/external1.less";

.myclass{

 color : #A52A2A;

}

从下面码的路径 http://www.yiibai.com/less/external1.less 导入所述 external.less 文件到 style.less 文件：

external1.less

.myclass{

background: #C0C0C0;

}

你可以编译 style.less 使用下面的命令来生成 style.css 文件：

lessc style.less style.css

接着执行上面的命令，它会自动创建 style.css文件，下面的代码：

style.css

body {

  background: #C0C0C0;

}

p {

  color: #A52A2A;

}

输出的结果如下：

保存上述的HTML代码在 less_variables_interpolation_import.html 文件。
在浏览器中打开该HTML文件，得到如下输出显示。

4）属性

@property: color;

.widget {

  @{property}: #0ee;

  background-@{property}: #;

}

编译后：

.widget {

  color: #0ee;

  background-color: #;

}

5）变量名：可以用一个变量名定义变量

@fnord:  "I am fnord.";

@var:    "fnord";

content: @@var;

编译后：

content: "I am fnord.";

2、混合（Mixin）：混合是包括从一个规则集到另一个规则集（“在混合”），一堆属性的一种方式。

.bordered {

  border-top: dotted 1px black;

  border-bottom: solid 2px black;

}

我们要使用内的其他规则集这些属性。好了，我们只是在我们想要的属性，像这样的类名下降：

#menu a {

  color: #;

  .bordered;

}

.post a {

  color: red;

  .bordered;

}

属性.bordered类现在会出现在两个#menu a和.post a。（请注意，您也可以使用#ids如混入。）

1）带参数的mixin :混合也可以使用参数，这是变量传递给选择块

例子：

.border-radius(@radius) {

  -webkit-border-radius: @radius;

     -moz-border-radius: @radius;

              border-radius: @radius;

}

下面是能组合成的不同的规则集：

#header {

  .border-radius(4px);

}

.button {

  .border-radius(6px);

}

2）参数混合也可以有默认值的参数：

.border-radius(@radius: 5px) {

  -webkit-border-radius: @radius;

     -moz-border-radius: @radius;

          border-radius: @radius;

}

我们可以调用它的默认值：

#header {

  .border-radius;

}
//输出：它将包括为5px边界半径。

3）也可以使用不带参数的参数混入。

.wrap() {

  text-wrap: wrap;

  white-space: -moz-pre-wrap;

  white-space: pre-wrap;

  word-wrap: break-word;

}

pre { .wrap }

编译后：

pre {

  text-wrap: wrap;

  white-space: -moz-pre-wrap;

  white-space: pre-wrap;

  word-wrap: break-word;

}

4）混合多参数：参数或者是分号或逗号分隔。建议使用分号。

两个参数，每一个包含逗号分隔的列表：.name(1, 2, 3; something, else)，
三个参数，每个包含一个数字：.name(1, 2, 3)，
使用虚拟分号创建混入调用一个参数包含逗号分隔的CSS列表：.name(1, 2, 3;)，
逗号分隔的默认值：.name(@param1: red, blue;)。

.mixin(@color) {

  color-: @color;

}

.mixin(@color; @padding:) {

  color-: @color;

  padding-: @padding;

}

.mixin(@color; @padding; @margin: ) {

  color-: @color;

  padding-: @padding;

  margin: @margin @margin @margin @margin;

}

.some .selector div {

  .mixin(#);

}

编译后：

.some .selector div {

  color-: #;

  color-: #;

  padding-: ;

}

5）命名参数：任何参数都可以通过其名称来引用，它们不必是任何特殊的顺序

.mixin(@color: black; @margin: 10px; @padding: 20px) {

  color: @color;

  margin: @margin;

  padding: @padding;

}

.class1 {

  .mixin(@margin: 20px; @color: #33acfe);

}

.class2 {

  .mixin(#efca44; @padding: 40px);

}

编译后：

.class1 {

  color: #33acfe;

  margin: 20px;

  padding: 20px;

}

.class2 {

  color: #efca44;

  margin: 10px;

  padding: 40px;

}

6）@arguments变量：@arguments有内混入特殊的意义，它包含传递的所有参数

.box-shadow(@x: ; @y: ; @blur: 1px; @color: #) {

  -webkit-box-shadow: @arguments;

     -moz-box-shadow: @arguments;

          box-shadow: @arguments;

}

.big-block {

  .box-shadow(2px; 5px);

}

编译后：

.big-block {

  -webkit-box-shadow: 2px 5px 1px #;

     -moz-box-shadow: 2px 5px 1px #;

          box-shadow: 2px 5px 1px #;

}

3、嵌套规则

例子如下：

#header {

  color: black;

}

#header .navigation {

  font-size: 12px;

}

#header .logo {

  width: 300px;

}

可以进行嵌套成如下的写法：

#header {

  color: black;

  .navigation {

    font-size: 12px;

  }

  .logo {

    width: 300px;

  }

}

由此产生的代码更简洁，模仿你的HTML的结构。

也可以捆绑伪元素使用这种方法，改写为一个mixin（&表示当前选择的父）：

.clearfix {

  display: block;

  zoom: ;

//捆绑伪元素

  &:after {

    content: " ";

    display: block;

    font-size: ;

    height: ;

    clear: both;

    visibility: hidden;

  }

}

4、运算：任何数字、颜色或者变量都可以参与运算。

例子1：
@base: %;

@filler: @base * ;

@other: @base + @filler;

color: # / ;

background-color: @base - color + #;

height: % /  + @filler;

例子2：
@var: 1px + 5;
//最终输出是 6px

5、函数：Less 内置了多种函数用于转换颜色、处理字符串、算术运算等

例子：如何将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等：

@base: #f04615;

@width: 0.5;

.class {

  width: percentage(@width); // returns `50%`

  color: saturate(@base, %);

  background-color: spin(lighten(@base, %), );

}

编译为：

.class {

  width: %;

  color: #f6430f;

  background-color: #f8b38d;

}

1）作为函数使用的Mixin

例子1：

.mixin() {

  @width:  %;

  @height: 200px;

}

.caller {

  .mixin();

  width:  @width;

  height: @height;

}

编译后：

.caller {

  width:  %;

  height: 200px;

}

例子2：

.average(@x, @y) {

  @average: ((@x + @y) / );

}

div {

  .average(16px, 50px);

  padding: @average;

}

编译后：

div {

  padding: 33px;

}

2）Mixin Guards的用法：常用的条件运算符：>、>=、<、<=、=；我们设定的条件还可以使用IS函数：iscolor、isnumber、isstring、iskeyword、isurl、ispixel、ispercentage...

    //->LESS代码

    .mixin (@a) when (lightness(@a) >= %) {

      background-color: black;

    }

    .mixin (@a) when (lightness(@a) < %) {

      background-color: white;

    }

    .box1{

      .mixin(#ddd);

    }

    .box2{

      .mixin(#);

    }

    //->编译为CSS的结果

    .box1 {

        background-color: black;

    }

    .box2 {

when是在设置条件，除了像上面的写法外，我们还可以通过when设置多个条件，而且条件中可以使用is函数。

    //->LESS代码:使用IS函数

    .mixin (@a; @b: ) when (isnumber(@b)) { ... }

    .mixin (@a; @b: black) when (iscolor(@b)) { ... }

    //->LESS代码:多条件，可以使用and或者逗号间隔

    .mixin (@a) when (isnumber(@a)) and (@a > ) { ... }

我们还可以通过与&特性结合实现'if'类型的语句。

    //->LESS代码:这里的意思是如果为true,.box的文字颜色才是白色

    @my-option: true;

    & when (@my-option = true) {

      .box {

        color: white;

      }

3)Loops ，当一个混合递归调用自己，再结合Guard条件表达式，就可以写出循环结构。使用递归循环最常见的情况就是生成栅格系统的CSS：

    //->LESS代码

    .generate-columns();

    .generate-columns(@n, @i: ) when (@i <= @n) {

      .column-@{i} {

        width: (@i * % / @n);

      }

      .generate-columns(@n, (@i + ));

    }

    //->输出的CSS

    .column- {

        width: %;

    }

    .column- {

        width: %;

    }

    .column- {

        width: %;

    }

    .column- {

4）Merge ：Merge特性可以从多个属性中将值，集合到某一个样式属性的列表中（也就是多样式效果）。在编写的时候，+代表以逗号分隔，+_代表多个之前以空格分隔。

    //->LESS代码

    .mixin() {

      box-shadow+: inset   10px #;

    }

    .myclass {

      .mixin;

      box-shadow+:   20px black;

    }

    .mixin2() {

      transform+_: scale();

    }

    .myclass2 {

      .mixin2;

      transform+_: rotate(45deg);

    }

    //->输出的CSS

    .myclass {

        box-shadow: inset   10px #,   20px black;

    }

    .myclass2 {

6、命名空间和访问器

有时候，你可能为了更好组织 CSS 或者单纯是为了更好的封装，将一些变量或者混合模块打包起来，一些属性集之后可以重复使用。
例子：

/*模块*/

#bundle {

  .button {

    display: block;

    border: 1px solid black;

    background-color: grey;

    &:hover {

      background-color: white

    }

  }

  .tab { /**/ }

  .citation { /**/ }

}

/*下面复用上面的一部分代码*/

#header a {

  color: orange;

  #bundle > .button;

}

编译生成：

#bundle .button {

  display: block;

  border: 1px solid black;

  background-color: grey;

}

#bundle .button:hover {

  background-color: white;

}

#bundle .tab {

  /**/

}

#bundle .citation {

  /**/

}

/*下面复用上面的一部分代码*/

#header a {

  color: orange;

  display: block;

  border: 1px solid black;

  background-color: grey;

}

#header a:hover {

  background-color: white;

}

LESS中的命名空间，属于高级语法，在日常项目中应用比较广泛。我们可以用LESS中的命名空间为自己封装一些日常比较常用的类名，以便以后做项目的时候更有效率。

7、作用域

子类里面的优先，找不到才往父类里找。

例子：

@var: red;

#page {

  @var: white;

  #header {

    color: @var; // 这里值是white

  }

}

也不会因为变量后面定义而影响作用域：

@var: red;

#page {

  #header {

    color: @var; // white

  }

  @var: white;

}

和上面的例子是一样的。

8、注释

css仅支持块注释。less里块注释和行注释都可以使用：

/* 一个注释块

style comment! */

@var: red;

// 这一行被注释掉了！

@var: white;

9、导入

和css一样，你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less扩展名，则可以将扩展名省略掉：

@import "library"; // library.less

@import "typo.css";

1）Import Directives ：从其他样式表中导入样式。

    //->LESS代码

    @import "public.less";

    .box {

      &:after {

        .clear;

      }

    }

    //->输出的CSS:会把public中的样式也输出

    .clear {

        display: block;

        height: ;

        content: "";

        clear: both;

        zoom: ;

    }

    .box:after {

        display: block;

        height: ;

        content: "";

        clear: both;

        zoom: ;

    }

我们发现上述的操作虽然实现了调取使用，但是会把public中的less也编译到了自己的这个css中，如果不想编译的话，我们需要配置一些参数：

    //->LESS代码

    @import (reference) "public.less";

    .box {

      &:after {

        .clear;

      }

    }

    //->输出的CSS:

    .box:after {

        display: block;

        height: ;

        content: "";

        clear: both;

        zoom: ;

    }

除了reference以外我们还可以配置一些其他的参数值： inline：在输出中包含源文件但不加工它 less：将文件作为Less文件对象，无论是什么文件扩展名 css：将文件作为CSS文件对象，无论是什么文件扩展名 once：只包含文件一次（默认行为） multiple：包含文件多次

具体参考：http://lesscss.cn/