less 的使用

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

  1. @base: #f938ab;
  3. .box-shadow(@style, @c) when (iscolor(@c)) {
  4.   -webkit-box-shadow: @style @c;
  5.   box-shadow:         @style @c;
  6. }
  7. .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  8.   .box-shadow(@style, rgba(0, 0, 0, @alpha));
  9. }
  10. .box {
  11.   color: saturate(@base, 5%);
  12.   border-color: lighten(@base, 30%);
  13.   div { .box-shadow(0 0 5px, 30%) }
  14. }

输出:

.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);
}

作为CSS的扩展，Less不仅与CSS向后兼容，而且它添加的其他功能都使用现有的CSS语法。这使学习“轻而易举”变得轻而易举，并且如果有疑问，可以让您回到普通CSS。

变数

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

输出:

#header {
  color: #6c94be;
}

请注意，变量实际上是“常量”，因为它们只能定义一次。

混入Mixins

混入是一种将一组属性从一个规则集中包含（“混入”）到另一个规则集中的方法。假设我们有以下类：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

我们想在其他规则集中使用这些属性。好吧，我们只需要在需要属性的类的名称中输入，如下所示：

#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}

.bordered该类的属性现在将同时出现在#menu a和中.post a。（请注意，您也可以将其#ids用作mixin。）

嵌套规则

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

在less中：

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

结果代码更加简洁，并且模仿了HTML的结构。

您也可以使用此方法将伪选择器与mixins捆绑在一起。这是经典的clearfix hack，重写为mixin（&代表当前选择器父对象）：

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

嵌套指令和冒泡

诸如media或的指令keyframe可以与选择器嵌套的方式嵌套。指令放在最上面，并且相对于同一规则集中其他元素的相对顺序保持不变。这称为冒泡。

条件指令，例如@Media，@supports并且@document还将选择器复制到其主体中：

.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: black;
  }
}

输出：

@media screen {
  .screen-color {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screen-color {
    color: red;
  }
}
@media tv {
  .screen-color {
    color: black;
  }
}

其余的无条件指令（例如font-face或keyframes）也会冒泡。他们的身体没有改变：

#a {
  color: blue;
  @font-face {
    src: made-up-url;
  }
  padding: 2 2 2 2;
}

输出

#a {
  color: blue;
}
@font-face {
  src: made-up-url;
}
#a {
  padding: 2 2 2 2;
}

运作方式

算术运算+，-，*，/可以在任意数量，颜色或可变的操作。如果可能的话，数学运算会在加，减或比较它们之前考虑单位并转换数字。结果具有最左侧明确说明的单位类型。如果转换是不可能的或没有意义，则将忽略单位。不可能的转换示例：px转换为cm或rad转换为％。

// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is 1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px

// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%

乘法和除法不会转换数字。在大多数情况下，这是没有意义的-长度乘以长度可以得到一个区域，而CSS不支持指定区域。Less将按原样对数字进行运算，并为结果明确指定单位类型。

@base: 2cm * 3mm; // result is 6cm

颜色分为红色，绿色，蓝色和Alpha尺寸。该操作分别应用于每个颜色尺寸。例如，如果用户添加了两种颜色，则结果的绿色尺寸等于输入颜色的绿色尺寸之和。如果用户将颜色乘以数字，则每个颜色尺寸都会相乘。

对颜色进行的操作始终会产生有效的颜色。如果结果的某个颜色尺寸最终大于ff或小于00，则该尺寸将四舍五入为ff或00。如果alpha最终大于1.0或小于0.0，则将alpha舍入为1.0或0.0。

@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355

转义

转义允许您将任意字符串用作属性或变量值。除插值外，里面的任何东西’anything’按原样使用。

.weird-element {
  content: ~"^//* some horrible but needed css hack";
}
输出
.weird-element {
  content: ^//* some horrible but needed css hack;
}

功能

Less提供了各种功能，可以转换颜色，操纵字符串和进行数学运算。它们在功能参考中有完整记录。

使用它们非常简单。下面的示例使用百分比将0.5转换为50％，将基本色的饱和度增加5％，然后将背景色设置为变亮25％并旋转8度的背景色：

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

命名空间和访问器

（不要与CSS@namespace或名称空间选择器混淆）。

有时，出于组织目的或为了提供一些封装，您可能希望对混合包进行分组。您可以在Less中非常直观地执行此操作，例如您想将一些mixin和变量捆绑在下#bundle，以便以后重用或分发：

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

现在，如果我们想混入我们的.button类#header a，我们可以这样做：

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

请注意，在命名空间中声明的变量将仅作用于该命名空间，并且将无法通过与引用mixin（#Namespace > .mixin-name）相同的语法在作用域之外使用。因此，例如，您不能执行以下操作：（#Namespace > @this-will-not-work）。

作用域

Less的作用域与编程语言非常相似。首先在本地查找变量和混入，如果找不到，编译器将在父作用域中查找，依此类推。

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

变量和mixin不必在使用前先声明，因此以下Less代码与前面的示例相同：

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;

在样式表中看到相同的值重复数十次甚至数百次的情况并不少见：

a,
.link {
  color: #428bca;
}
.widget {
  color: #fff;
  background: #428bca;
}

变量使您可以从一个位置控制这些值，从而使代码易于维护：

/ Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

// Usage
a,
.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}
.widget {
  color: #fff;
  background: @link-color;
}

可变插值

上面的示例着重于使用变量来控制CSS规则中的值，但它们也可以在其他地方使用，例如选择器名称，属性名称，URL和@import语句。

选择器

// Variables
@my-selector: banner;

// Usage
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}


编译为：
.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

网址

// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

引入声明

句法： @import “@{themes}/tidal-wave.less”;

请注意，在v2.0.0之前，仅考虑已在根或当前作用域中声明的变量，并且在查找变量时仅考虑当前文件和调用文件。

@themes: "../../src/themes";
@import "@{themes}/tidal-wave.less";

属性

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}
编译为
.widget {
  color: #0ee;
  background-color: #999;
}

变量名

也可以使用变量名称定义变量：

@fnord:  "I am fnord.";
@var:    "fnord";
content: @@var;

编译为
content: "I am fnord.";

引用父选择器 &

引用父选择器 & 的&操作者表示的父选择嵌套规则并且最常用的施加改性类或伪类到现有的选择器时：

a {
  color: blue;
  &:hover {
    color: green;
  }
}

编译为
a {
  color: blue;
}

a:hover {
  color: green;
}

请注意，如果没有使用&，则上面的示例将产生a :hoverrule（与标记内的悬停元素匹配的后代选择器），而这并不是我们通常希望使用nested的结果:hover。

“父选择器”运算符有多种用途。基本上，任何时候您都需要使用默认规则以外的其他方式组合嵌套规则的选择器。例如，的另一种典型用法&是产生重复的类名：

.button {
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }

  &-custom {
    background-image: url("custom.png");
  }

编译为

.button-ok {
  background-image: url("ok.png");
}
.button-cancel {
  background-image: url("cancel.png");
}
.button-custom {
  background-image: url("custom.png");
}

多 &

&在选择器中可能会出现多次。这使得可以重复引用父选择器而无需重复其名称。

.link {
  & + & {
    color: red;
  }

  & & {
    color: green;
  }

  && {
    color: blue;
  }

  &, &ish {
    color: cyan;
  }
}

编译为：
.link + .link {
  color: red;
}
.link .link {
  color: green;
}
.link.link {
  color: blue;
}
.link, .linkish {
  color: cyan;
}

请注意，它&代表所有父选择器（而不仅仅是最接近的祖先），因此以下示例：

.grand {
  .parent {
    & > & {
      color: red;
    }

    & & {
      color: green;
    }

    && {
      color: blue;
    }

    &, &ish {
      color: cyan;
    }
  }
}

编译为：
.grand .parent > .grand .parent {
  color: red;
}
.grand .parent .grand .parent {
  color: green;
}
.grand .parent.grand .parent {
  color: blue;
}
.grand .parent,
.grand .parentish {
  color: cyan;
}

更改选择器顺序

将选择器放在继承的（父）选择器之前可能很有用。这可以通过&在当前选择器之后放置来完成。例如，当使用Modernizr时，您可能要根据支持的功能指定不同的规则：

.header {
  .menu {
    border-radius: 5px;
    .no-borderradius & {
      background-image: url('images/button-background.png');
    }
  }
}

选择器.no-borderradius &将.no-borderradius在其父项之前.header .menu形成.no-borderradius .header .menuon输出：


.header .menu {
  border-radius: 5px;
}
.no-borderradius .header .menu {
  background-image: url('images/button-background.png');
}

组合爆炸

& 也可以用于生成逗号分隔列表中选择器的所有可能排列：

p, a, ul, li {
  border-top: 2px dotted #366;
  & + & {
    border-top: 0;
  }
}

编译为：
p,
a,
ul,
li {
  border-top: 2px dotted #366;
}
p + p,
p + a,
p + ul,
p + li,
a + p,
a + a,
a + ul,
a + li,
ul + p,
ul + a,
ul + ul,
ul + li,
li + p,
li + a,
li + ul,
li + li {
  border-top: 0;
}