less和sass语法

less和sass语法

1.嵌套注意点，&链接

.a {
    foo: bar;
}
.a:hover {
    foo:bar;
}

==============

.a {
    foo:bar;
    &:hover {
        foo:bar;
    }
}

2.变量

===sass===
$foo: red;
$bar: 10px;

.a {
    color: $foo;
    font-size: $bar;
}

===less===
@foo: red;
@bar: 10px;

.a{
    color: @foo;
    font-size: @bar;
}

3.计算,sass单位要统一不然报错，less会把单位转换一致。

===sass===
$p: 100px;
$w: 80px;

.a {
   width: $p - $w;
}

===less===
@p: 100%;   
@w: 80px;

.a{
    width: @p - @w;   100% - 80% = 20%
}

4.复用

===sass===
.a {
    foo: bar;
}
.b {
    @extend .a
    color: red;
}

等于

.a .b {
    foo: bar;
}
.b {
    color: red;
}

===less===
.a {
    foo: bar;
}
.b {
    .a
    color: red;
}

等于

.a {
    foo: bar;
}
.b {
    foo: bar;
    color: red;
}

5.混入

===less===
.foo(@value: red) {
    color: @value
}

.a {
    .foo(blue)
    font-size: 10px;
}

等于
.a {
    color: blue;
    font-size: 10px;
}