less学习笔记二

作为CSS的一个扩展语言，Less不仅向后兼容CSS,它新增的特殊功能也可以使用现有css的语法。这使学习Less是一件轻而易举的事。

1、Variables：变量定义，变量实际上是只能定义一次的常量

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

.header{
    color:@light-blue;
}

/**outputs**/

.header{
    color:#6c94be;
}

使用@定义了变量nice-blue，类.header中样式引用变量@light-blue.

2、Mixins：混合，一个规则集合在另一个规则集合中的调用。

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

.menu a {
  color: #111;
  display:inline-block;
  padding:10px;
  .bordered;
}

/**outputs**/

.menu a { color: #111; 
　　　　　　display:inline-block; 
　　　　　　padding:10px; 　　　　　　
　　　　　　border-top: dotted 1px black; 
　　　　　　border-bottom: solid 2px black;
　　}

选择器类.bordered在另一个选择器.menu a中调用。.bordered中的样式属性会在.menu a中解析成它原来的样子。

混合类可以是类选择器，id选择器；被引用时可以使用圆括号（可选的）

 

.paragraph{color:@nice-blue;}
.section-p{
    .paragraph();
}

 

如果你想创建一个不输出到页面样式文件的混合类，你可以在定义混合类的时候在它后面使用圆括号

.paragraph(){color:@nice-blue;}
.paragraphl{background:@light-blue;}
.section-p{
    .paragraph();
    .paragraphl();
}

/**outputs**/
.paragraphl {
  background: #6c94be;
}
.section-p {
  color: #5B83AD;
  background: #6c94be;
}

混合类中不止可以包含样式属性，也可以包含选择器

.hover-mixin(){
    &:hover{
        color:red;
    }
}
.menu a{
    .hover-mixin();
}
.section-p{
    .hover-mixin();
}

/**outputs**/
.menu a:hover {
  color: red;
}
.section-p{
  color: red;
}

符号&代表调用混合类hover-mixin的选择器，个人认为类似js中的this，指向调用该方法的对象。

Namespaces：命名空间,混合类嵌套定义

如果你想在一个更加复杂的选择器中混合多个样式属性，你可以堆积多层id或class

.article{
    .inner{color:red;}
}
.header-2{
    /*.article > .inner;*/
    /*.article > .inner();*/
    /*.article .inner;*/
    /*.article .inner();*/
    /*.article.inner;*/
        .article.inner();
}    

/**outputs**/
.article .inner {
  color: red;
}
.header-2 {
    /*.article > .inner;*/
    /*.article > .inner();*/
    /*.article .inner;*/
    /*.article .inner();*/
    /*.article.inner;*/
    color: red;
}

当需要在其他选择器中调用选择器中定义的混合类时，可以通过符号>和空格来实现。个人认为类似于js中调用对象中的属性方法时的操作 obj.func

此处，符号>和空格都是可选的。

Guarded Namespaces，条件命名空间

如果命名空间含有一个条件限制，它内部定义的混合类只有在条件状态返回true时才能被调用。定义命名空间上的条件限制与其内部混合类上的条件限制是等价的。

.....

!important关键字，使用在混合类后，将混合类中继承过来的所有属性标记为!important.

.unimportant{
        .paragraph();
    }
    .important{
        .paragraph() !important;
    }

/**outputs**/
.unimportant {
    color: #5B83AD;
}
.important {
    color: #5B83AD !important;
}