用js来改变less中的变量 less使用js变量

概览

Less（Leaner Style Sheets 的缩写）是一门向后兼容的CSS扩展语言。这里呈现的是Less的官方文档（中文版），包含了Less语言以及利用JavaScript开发的用于将Less样式转换成CSS样式的Less.js工具。因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。Less支持变量、嵌套、混合方法、继承、注释、函数等特点。

• Less官网
• Bootstrap网站的 less 文档

less的语法

一、变量

声明less变量，只需在属性名前加“@”，使用时用@+变量名即可。例子如下：

main.less

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

编译成css文件如下：

main.css

#header {
  width: 10px;
  height: 20px;
}

二、嵌套

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：

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

用Less语言我们可以这样书写代码：

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

三、混合

无参数方法

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：

.conter {
  width: 100px;
  height: 100px;

  .conterWap {
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(red, green, blue, .3);
  }
}

如果我们希望在其它规则集中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：

.test {
  .conter;
  //.conter();括号可加可不加
}

生成的.css文件代码如下：

.conter {
  width: 100px;
  height: 100px;
}
.conter .conterWap {
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(red, green, blue, 0.3);
}
.test {
  width: 100px;
  height: 100px;
}
.test .conterWap {
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(red, green, blue, 0.3);
}

默认参数方法

.less文件代码如下：

.border(@a: 2px, @b: 2px, @c: 10px, @coloe: #555) {
  border: @a @coloe solid;
  // @arguments指代传进来的全部参数
  box-shadow: @arguments;
}

.wrap1 {
  .border();
}

生成的.css文件代码如下：

.wrap1 {
  border: 2px #555 solid;
  box-shadow: 2px 2px 10px #555;
}

方法的匹配模式

.less文件代码如下：

//方法的匹配模式
.trangle(top, @color: #555, @width: 50px) {
  border-color: transparent transparent @color transparent
}

.trangle(left, @color: #555, @width: 50px) {
  border-color: transparent @color transparent transparent
}

.trangle(bottom, @color: #555, @width: 50px) {
  border-color: @color transparent transparent transparent
}

.trangle(right, @color: #555, @width: 50px) {
  border-color: transparent transparent transparent @color
}

.trangle(@_, @color, @width) {
  border-width: @width;
  border-style: solid
}

.wrap2 {
  .trangle(bottom, #333, 20px);
}

生成的.css文件代码如下：

.wrap2 {
  border-color: #333 transparent transparent transparent;
  border-width: 20px;
  border-style: solid;
}

数量不定的参数

.less文件代码如下：

//数量不定的参数
.boxShadow(...) {
  box-shadow: @arguments;
}

.wrap3 {
  .boxShadow(0 0 10px #666)
}

生成的.css文件代码如下：

.wrap3 {
  box-shadow: 0 0 10px #666;
}

循环方法

.less文件示例代码如下：

.xunhuan(4);

.xunhuan(@n, @i: 1) when (@i <=@n) {
  .test@{i} {
    width: (@i*100% / @n);
  }

  .xunhuan(@n, (@i+1))
}

生成的.css文件代码如下：

.test1 {
  width: 25%;
}
.test2 {
  width: 50%;
}
.test3 {
  width: 75%;
}
.test4 {
  width: 100%;
}

四、继承

extend关键字的使用

extend是Less的一个伪类。它可继承所匹配声明中的全部样式。

从表面来看，extend和方法最大的差别，就是extend是同个选择器共用一个声明，而方法是使用自己的声明，这无疑增加了代码的重复性。

下面是方法和extend之间的比较（.less文件）：

.conter {
  width: 100px;
  height: 100px;

  .conterWap {
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(red, green, blue, .3);
  }
}
//  方法
.test {
  .conter();
}

//  使用extend
.test {
  &:extend(.conter all);
}

生成的.css文件代码如下：

//  方法生成的.css文件
.conter {
  width: 100px;
  height: 100px;
}
.conter .conterWap {
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(red, green, blue, 0.3);
}
.test {
  width: 100px;
  height: 100px;
}
.test .conterWap {
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(red, green, blue, 0.3);
}

//  extend生成的.css文件
.conter,
.test {
  width: 100px;
  height: 100px;
}
.conter .conterWap,
.test .conterWap {
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(red, green, blue, 0.3);
}

&在less中的含义

表示当前层级（.clearfix）

.clearfix {
  &::after,
  &::before {
    content: '';
    display: table;
    clear: both;
  }
}

生成的.css文件如下：

.clearfix::after,
.clearfix::before {
  content: '';
  display: table;
  clear: both;
}

五、注释

块注释和行注释都可以使用：

块注释会保留在生成的.css文件中，而行注释将不被保留，只存在于.less文件中。

/* 一个块注释
 * style comment! */
@var: red;

// 这一行被注释掉了！
@var: white;

六、函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册中有详细介绍。

函数的用法非常简单。下面这个例子将介绍如何利用 percentage 函数将 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);
}