less学习笔记

less要点：变量，混合，嵌套，函数&运算，扩展

一，变量

（1）less通过@来定义变量；如：@color:#333;
（2）不仅可以用变量来管理属性值，也可以用在选择器名称，属性名，URL以及@import语句中；
例一：选择器变量
less:

//定义一个选择器变量； 
@mySelector:banner;
//应用
.@{mySelector}{
    width:100px;
    height:100px;
}

编译后的css:

.banner{
    width:100px;
    height:100px;
}

例二：URL变量

@img:'../img';
//应用
.widget{
    width:100px;
    height:100px;
    background:url('@{img}/widget.png') no-repeat;
}

例三：属性变量

@property:color;
//应用
.widget{
   width:100px;
   height:100px;
   @{property}:#eee;
}

二，混合（Mixin）

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

//定义一个color类
.color{
   color:#eee;
   background-color:#f00;
}
//应用
.widget{
   width:100px;
   height:100px;
   .color;
}

例二：有参

//定义一个color类
.color (@color:#eee){
    color:@color;
    background-color:#f00;
}
//应用
.widget{
    width:100px;
    height:100px;
    .color();//不传参时，即用默认的参数；
    .color(#0f0);//传入参数的情况
}

有些时候看到如下的用法：

.color () {
    color:#eee;
}

当你希望.color()不出现在css里，且又能引入其它类时，就可以这样写。
例三：
在媒体查询里的嵌套写法稍有区别，如下所示；

三，匹配模式

匹配模式的写法类似于混合。它的作用类似于if语句。

.mixin(dark,@color) {
  color: darken(@color, 15%);
}
.mixin(light,@color) {
  color: lighten(@color, 15%);
}
//下面代码的作用是，不管匹配上面哪种模式，下面样式都会加进去。注意：第一个参数一定是@_，后面的每个参数都要加上
.mixin(@_,@color) {
width:100px;
height:100px;
}
.line {
  .mixin(dark,#FF0000);
}

编译后：

.line {
    color: #b30000;
    width: 100px;
    height: 100px;
}

四，嵌套

（1）在一个选择器中嵌套另一个选择器来实现继承；（&表示当前选择器的父选择器）
（2）媒体查询和嵌套媒体查询
less:

#header{
    background-color:#eee;
    overflow:hidden;
    .logo{
        float:left;
        width:50px;
        height:30px;
        a{
            display:block;
        }
    }
}

编译后：

#header{
    background-color:#eee;
    overflow:hidden;
}
#header .logo{
        float:left;
        width:50px;
        height:30px;
}
#header .logo a{
    display:block;
}

五，函数&运算

任何数值，颜色和变量都可以进行运算；less可以进行加、减、乘、除的运算；less提供了内置的函数，如Color函数，Math函数；

@width:50px;
#header{
width:@width + 50;
}

六，命名空间和访问器

有时候，出于组织的目的，或者为了提供一些封装，你会希望将你的mixins 组合在一起。以便稍候复用或者分发。
命名空间相当于一个混合的集合；可以在需要的地方引用单独的样式。

#bundle{
    .button{
        display:block;
    }
    .tab{……}
    .citation{……}
}

现在如果我们想在#header a中混合.button类，那么可以这样写：

#header a{
    #bundle > .button
}

需要注意的是命名空间内声明的变量将只作用于该命名空间，你会用它来引用一个mixin (#Namespace > .mixin-name)。但你不能这么做： (#Namespace > @this-will-not-work)。

七，作用域

less 中的作用域与编程语言中的作用域概念非常相似。首先会在局部查找变量和混合，如果没找到，编译器就会在父作用域中查找，依次类推。

八，注释

/*块注释*/
//行注释（不会输出到编译后的css文件中）

九，扩展

extend是一个less伪类，它会合并它所在的选择其和它所匹配的引用。
less:

nav ul{
    &:extend(.inline);
    background:blue;
}
.inline{
    color:red;
}

编译后：

nav ul{
    background:blue;
}
.inline,nav ul{
    color:red;
}

十，arguments变量

arguments变量包含了全部的传进来的参数。如果不想一个参数一个参数的写，那么可以用arguments参数。
less:

.border(@w:10px,@c:red,@xx:solid) {
    border:@arguments;
}
div{
    .border(20px);
}

编译后：

div{
    border:20px red solid;
}

十一，避免编译

有时候我们需要输出一些不正确的css语法或less不认识的专有语法。要输出这样的值我们可以在字符串前加上‘~’
例：

div{
    width:~' calc(100% - 35)';
}

十二，！important关键字

类似于css ！important关键字。