LESS | fdd’Blog

一些 less 的用法

变量

@link-color:#428bca;
@link-color-hover:darken(@link-color, 10%);
a{
    color:@link-color
    &:hover{
        color:@link-color-hover
    }
}

不仅可以使用变量存储属性值，还可以使用变量存储公用的 URL、选择器。

.@(selector){
    width:100px;
    height:100px;
    @{property}:#000;
    background:url("@{bgImg/test.png}");
}
@selector:box;
@bigImg:"../img";
@property:color

混合（`Mixins`）

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

 //->LESS代码
.public {
    width: 100px;
    height: 100px;
}
nav ul {
    .public;
    list-style: none;
}
//->编译为CSS的结果
.public {
    width: 100px;
    height: 100px;
}
nav ul {
    width: 100px;
    height: 100px;
    list-style: none;
}

上面的代码就是将public设定的样式属性复制一份到实际样式中。如果想要在编译完成后不输出public样式的结果，写法如下

//less
.public(){//->在选择器后面加上()就可以不编译这个样式了
    width: 100px;
    height: 100px;
}
nav ul {
    .public; //如果public有子孙元素的样式，同样也会被复制过来
    list-style: none;
}
//->编译为CSS的结果
nav ul {
    width: 100px;
    height: 100px;
    list-style: none;
}

2. extend
上面的方法是把public样式复制一遍，编译后的CSS还是会很大，可以使用extend避免这一点
和原来的选择器共用一套样式，但要保证原来的选择器不加括号

 //->LESS代码
.public {
    width: 100px;
    height: 100px;
}
nav ul {
    &:extend(.public);
    list-style: none;
}
//->编译为CSS的结果
.public, nav ul {
    width: 100px;
    height: 100px;
}
nav ul {
    list-style: none;
}

嵌套规则

LESS

#header{
    color:black;
    .navigation{
        font-size:12px;
    }
    .logo{
        width:300px;
        &:hover{
            text-decoration:none
        }
    }
}

编译后的 CSS

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

函数和运算

运算提供了加、减、乘、除操作。可以对属性值和颜色做运算，实现属性值之间的复杂关系。
任何数字、颜色或者变量都可以参与运算：

@base: 5%;
@filter: @base * 2; //10%
@other: @base + @filter; //15%
color: #888/4; //#222
@base-color:#111;
background-color: @base-color+#111;//#222
height: 100%/2 + @filter;//60%

颜色运算函数，颜色会被转化为HSL色彩空间，然后在通道级别操作：

1 2	lighten(@color, 10%); //变亮10% darken(@color, 10%); //变暗10%

数学函数

1
2
3

round(1.67); //2
ceil(2.3);//3
floor(2.6); //2

命名空间和作用域

首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止。

@var:red;
#page{
    @var:white;
    #header{
        color:@var; //white
    }
}
#footer{
    color:@var; //red
}

变量

混合（Mixins）

嵌套规则

函数和运算

命名空间和作用域

混合（`Mixins`）