Less的引用

引入Less

语法：
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

说明：
less.js文件必须在引入的less文件之后
引入less文件事rel的值必须为 stylesheet/less

变量

1. 变量声明

@变量名:变量值；

例1：@widht:100px;
例2：@length：100px；@lenght : @width+100px(+,-,*,/ 都可以)

2. 变量的使用

将变量名写在css属性后面即可

例：
@width:100px;
div{
    width:@widht;
}

3. 变量的值参与计算

变量可以直接与 加，减，乘，除运算

例：
@width:100px
@width+100px ;结果为200px
@width*2; 结果为200px

4. 作用域（scope）

作用域是程序中的一个标准，LESS中也是。

• 定义在root级的变量（全局变量），在整个文档中都是有效。
• 定义在选择器，比如id或者class中的变量（局部变量），只在该选择器中有效；

• 如果局部变量和全局变量名称相同时，则局部变量优先级高，将替代全局变量。

  ---

  @color: #00c; /* 蓝色 */
  . header {
  @color: #c00; /* 红色 */
  border: 1px solid @color; /* 红色边框 */
  }
  .footer {
  border: 1px solid @color; /蓝色边框 /
  }

类（函数）

1. 类的声明

通过 “.” +类名（参数列表）{css申明}

说明：

“.”不能少必须加

类名和css类名命名规则相同参数列表和变量声明一样，可带默认值

css申明可以用参数也可用常量值

例：
.myClass(@color:red,@length){
    background-color:@color
    width:@length;
    height:@length;
    border：1px solid @color
}

2. 类的应用（函数的调用）

直接在css声明中调用类名并传入参数即可

说明：

“.”不能少

如果参数没有默认值则必须传入参数，如果都有默认值则可以不传入参数，直接写类名即可

例：
.myClass(@color:red ,@length:100px){
    background-color:@color;
    width:@length;
    height:@length;
    border：1px solid @color
}
.div1{
    .myClass(grenn,200px);
}
.div1{
    .myClass;
}

类声明的扩展

1. 以使用@arguments来引用所有传入的变量

例：
.border(@a,@b,@color:blue){

    border:@arguments;

}

2. 相同类名的标识

使用参数的控制位来控制相同的类输出不同的样式

.border(cool,@color){
  border:2px solid @color;
}
.border(hot,@color){
  border:1px solid @color   
}   
.border(@_,@ye){
  color:@ye;
}

调用： 
.con2{.border(hot,red)} 
.con1{.border(cool,blue)}

输出为：
.con2(border:1px solid red;color:red)   
.con1{border:2px solid blue;color:blue}

3. 使用参数个数来控制输出那个类：

.border(@a){….}

.border(@a,@b){...}

如果传入一个参数则调用第一个定义，传入2个则调用第二个定义

4. 条件语句判断：

可以在类函数定义时候使用条件判断

.border(@a) when (@a>10),(@a<3){    
  border:@a solid blue;
}
.con1{.border(5px)} 
这里的条件是大于10或者小于3，所以调用不成立

.border(@a) when (@a>10) and (@a<15){   
  border:@a solid blue;
}
.con1{.border(12px)}
这里的条件是大于10并且小于15 ，调用成立，条件语句中那个px可以加也可以不加，判断都通过

5. 以使用内置函数unit来增加或者取出单位

.border(@a) {
  border:unit(@a,px) solid red;
}

调用： 
 .con2{.border(5)}
输出：
.con2{border:5px solid red;},如果写成unit(5px) 则去掉单位输出5

混合（Mixin）

有时，我们会创建一些样式，目的是在样式中重复使用这些样式规则。没有人会阻止你在一个HTML中使用多少个class，但是你可以使用LESS，在样式表中完成。为了说明这一点，我粘贴了一些代码示例： .border { border-top: 1px dotted #333; }

article.post {
  background: #eee;
  .border;
}

ul.menu {
  background: #ccc;
  .border;
}

选择器继承

下面这些是LESS中没有提供的。通过这个功能，你可以将一个选择器附加到已经预先定义的选择器上，而无需再使用逗号将两者分开的写法了：

.menu {
  border: 1px solid #ddd;
}
.footer {
  @extend .menu;
}
/* 上面的规则和下面的规则是一样的效果 */
.menu, .footer {
  border: 1px solid #ddd;
}

嵌套规则(Nested Rules)

在CSS中嵌class和id是避免样式干扰或者被别的样式干扰的唯一方式。但是可能变得很乱。使用一个选择器，类似于”#site-body .post .post-header h2”是毫无用处，而且还占用大量没必要的空间。使用LESS,你可以嵌套ID、class以及元素标签。对于前面提到的例子，你可以这样写：

#site-body { …
  .post { …
    .post-header { …
      h2 { … }
      a { …
        &:visited { … }
        &:hover { … }
      }
    }
  }
}
上面的代码最终效果和上面的一大串选择器效果一样，但是要更容易阅读和理解的多，而且它占用很少的空间。你也可以通过&来引用元素样式到他们的伪元素上，这个功能类似于javascript中的this。

命名空间（Namespaces）

命名空间可以用于组织我们的CSS，从而提高到另一个层次，我们将一些公用的样式创建分组，然后在使用的时候直接调用。例如，如果我们创建了一个名为“default”的样式分组，我们就可以在使用到的时候直接从该组中调用。

#defaults {
  .nav_list () {
    list-style: none;
    margin: 0; padding: 0;
   }
   .button () { … }
   .quote () { … }
}
然后，在我们的代码中，如果我们正好在一个nav元素中使用了ul元素，我们就会想到我们需要default样式。那么我们就可以简单的调用它，它也会被直接应用。

nav ul {
  #defaults > .nav_list;
}

注解

这一部分比较基础。LESS中允许两种注释写法。标准的CSS注释，/* comment */，是有效的，而且能够通过处理并正确输出。当行注释，// comment，同样可以用但是不能够通过处理也不能被输出，然后，结果是，“无声的”。

导入 在less文件中导入外部less/css文件

导入也相当符合标准。标准的 @import ‘classes.less’; 处理的很好。然而，如果你想要导入其它的LESS文件，那么文件的扩展名是可选的，所以 @import ‘classes’; 也是可行的。如果你想要导入一些无需LESS处理的内容，你可以使用 .css 扩展 (比如， @import ‘reset.css’;)。

字符串插入

字符串也是可以用于变量中的，然后通过@{name}来调用。

@base_url = 'http://coding.smashingmagazine.com';
background-image: url("@{base_url}/images/background.png");