less学习日记

less

是一种基于JavaScript的动态样式语言。它包含了一套自定义的语法以及一个编译器，我们可以根据语法定义自己记得样式规则，最终用编译器生成对应的css文件！

使用方法：

客户端使用

客户端使用的方法非常简单，直接将LESS的源文件引入网页即可，但是需要引入less.js的编译文件。如下：

这里有两个注意点：

（1）less.js一定要在LESS源文件后面引入，否则无法正确的识别。

（2）LESS的link里面的rel属性值是stylesheet/less，CSS却是stylesheet。

服务端使用

LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 LESS 源文件编译生成最终的 CSS 文件，目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS，安装成功后就可以在 node 环境中对 LESS 源文件进行编译。

npm install -g less

//执行将index.less 编译
lessc index.less > index.css

开发的时候 可以结合gulp就不是手动的一次次的生成，可以用gulp-watch监视less文件！！

语法

变量

变量是一个极其方便的东西，像js一样，变量可以在全局样式中使用，变量使得样式修改起来更加简单。LESS 中的变量和其他编程语言一样，可以实现值的复用，既然是变量，就有局部变量和全局变量之分。局部变量和全局变量的区别，跟js中的局部变量和全局变量的区别是类似的。

less 文件：

// LESS

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

生成的css文件

/* 生成的 CSS */

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

LESS 中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是 Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释 :

less 文件:

@width : 20px;

#homeDiv {

@width : 30px;

#centerDiv{

width : @width;// 此处应该取最近定义的变量 width 的值 30px

}

}

#leftDiv {

width : @width; // 此处应该取最上面定义的变量 width 的值 20px

}

生成的CSS 文件：

#homeDiv #centerDiv {

width: 30px;

}

#leftDiv {

width: 20px;

}

像 JavaScript 中 arguments一样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。

less:

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

CSS 文件:

#header { 
-moz-box-shadow: 2px 2px 3px #FF36; 
-webkit-box-shadow: 2px 2px 3px #FF36; 
box-shadow: 2px 2px 3px #FF36; 
}

混合

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

less:

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

css:

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
 border-radius: 5px;
  -webkit-border-radius:5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius:10px;
  -moz-border-radius: 10px;
}

Mixins 其实是一种嵌套，它允许将一个类嵌入到另外一个类中使用，被嵌入的类也可以称作变量，简单的讲，Mixins 其实是规则级别的复用。

嵌套规则

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
less:

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover {//有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
      border-width: 1px 
          
      }
    }
  }
}

css:

#header h1{
    font-size: 26px;
    font-weight: bold;
}
#header p{
 font-size: 12px;
}
#header p a{
text-decoration: none;
} 
#header p a:hover{
 border-width: 1px 
} 

函数 & 运算

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。

LESS:

// LESS

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

css:

/* 生成的 CSS */

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}

上面的例子中使用 LESS 的 operation 是 特性，其实简单的讲，就是对数值型的 value（数字、颜色、变量等）进行加减乘除四则运算。同时 LESS 还有一个专门针对 color 的操作提供一组函数。下面是 LESS 提供的针对颜色操作的函数列表：

lighten(@color, 10%); // return a color which is 10% *lighter* than @color 
darken(@color, 10%); // return a color which is 10% *darker* than @color 
saturate(@color, 10%); // return a color 10% *more* saturated than @color 
desaturate(@color, 10%);// return a color 10% *less* saturated than @color 
fadein(@color, 10%); // return a color 10% *less* transparent than @color 
fadeout(@color, 10%); // return a color 10% *more* transparent than @color 
spin(@color, 10); // return a color with a 10 degree larger in hue than @color 
spin(@color, -10); // return a color with a 10 degree smaller hue than @color

less:

init: #f04615; 
 #body { 
  background-color: fadein(@init, 10%); 
 }

css:

#body { 
background-color: #f04615; 
}

less:

.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

第三个混合定义被成功匹配，因为它接受任意值

注释

CSS 形式的注释在 LESS 中是依然保留的:

/* Hello, I'm a CSS-style comment */
.class { color: black }

LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:

// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }

Importing

你可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带:

@import "lib.less";
@import "lib";

如果你想导入一个CSS文件而且不想LESS对它进行处理，只需要使用.css后缀LESS就会跳过它不去处理它.:

@import "lib.css";

字符串插值

变量可以用类似ruby和php的方式嵌入到字符串中，像@{name}这样的结构:

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

避免编译

有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.

要输出这样的值我们可以在字符串前加上一个 ~, 例如:

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

我们可以将要避免编译的值用" "包含起来，输出结果为:：

.class {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

JavaScript 表达式

JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号的方式使用:

@var: `"hello".toUpperCase() + '!'`;

输出:

@var: "HELLO!";

它也可以访问JavaScript环境:

@height: `document.body.clientHeight`;

如果你想将一个JavaScript字符串解析成16进制的颜色值, 你可以使用 color 函数:

@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);