scss

@import

支持webpack导入，如果导入的文件是_开头，则导入内容不会编译，只会引用变量

变量

约定$name: value 形式的为变量。支持字符串（带有空格需要引号包裹），数字，数组（逗号或者空格分隔），对象（(key: value, key2: value2)），boolean。

变量区分为代码块内变量和代码块外变量。默认情况下，后申明的变量会覆盖前置变量（同作用域），通过$var: xxx !default 这种方式可以前置变量覆盖后置。

$color: green;
$color: red !default;  // 不添加!default red 会覆盖前面，添加!default 后面声明的不会覆盖green

&

在嵌套中选择父元素，使用后会忽略当前嵌套

@mixin和@include

通过@mixin 定义代码片段，通过@include引入片段实现复用。@mixin相当于代码片段的生成器，支持参数和默认参数。 支持@content 实现slot功能

@extend

如果需要对某个类实现继承，使用@extend .classname 实现，会继承该类所有实现。该功能唯一用处是在该类实现比较多的场景。

.a {
    color: red;

    &:hover {
        color: green
    }
}
.c .a {
    color: xxx;
}

.b {
    @extend .a;
    color: white;
}

.b {
    color: red; 
    &:hover {
        color: green;
    }
    color: white;
}

.c .b {
    color: xxx;
}

#{xxx}插值表达式

前面变量都是用在属性值上，#{}可以用在选择器或者属性名上面，实现动态生成类或者属性。或者强制计算，存在插值语句不会再重复计算

less

less解析时区大概两个步骤

1. 按照层级确定变量
2. 根据变量赋值

变量

@name: value 形式声明变量，变量用在css属性值、属性、类定义包括动态变量中

@error: red;
@color: color;
@red: blue;

.error {
    color: @error;  // 属性值
    background-@{color}: @@{error}; // 作为属性时需要@{}包裹，作为动态变量需要@@
}

less支持在块中将属性作为变量名，规则同变量。总是先变量整个快作用域确定变量，然后再赋值。

.error {
    color: red;

    .success {
        color: green;
        background-color: $color 
    }

    color: yellow;
}

less 支持lazy load，先使用变量再声明变量，这种特性总是后声明的覆盖前面。

混合

less编译时会将所有的类视为可混合，mixin特性如下

1. 支持函数、函数重写和具名参数

.error(@color) {
    border-color: @color;
}

.error(@color, @padding: 2px;) {
    color: @color;
    padding: @padding
}

.someError {
    .error(green)
}

.otherError {
    .error(@color: yellow); // 具名参数
}

// 编译成以下，会执行所有满足条件的函数
.someError {
    border-color: green;
    color: green;
    padding: 2px;
}

2. 支持嵌套和部分mixin

.error {
    border-color: green;
    &.text(),  {
        color: red;
    }
}

.someError {
    .error.text()  // 不管是.text 前面添加哪种选择器，不考虑
}

3. 混合不考虑选择符, 同一个作用域下存在多个相同引用的时不会重复渲染。

.a + .b , .a ~ .b ,.a.b {
    color: red;

    // 上面3个变量视为一个引用
}

.c {
    .a.b()
    .a .b ()
    .a > .b ()
    // 上面3种方式都会被下面3种方式匹配，因为引用相同的原因只会渲染一次。
}

4. 支持变量直接绑定片段或者另一个mixin结果。

.error {
    color: red;
}

@test: .error();
@test2: { color: green; }

.info {
    @test();
    @test1();
}

&父选择器

使用父选择器后会忽略当前默认的嵌套关系。less的父选择器是一个简单替换，比sass功能多。

1. 反向选择器 .a &。同sass相同
2. 贴贴选择器 &b => .ab && => .a.a(sass不支持) .b& => .b.a(sass不支持这种方式)

:extend继承

.a:extend(.b) 会继承.b less查找器查询到的内容(按照mixin的规则查询)。通过.a:extend(.b all)表现和sass相同

1. extend过程在一次编译，所以不能匹配动态变量。

@variable: .bucket;
@{variable} { // interpolated selector
  color: blue;
}
.some-class:extend(.bucket) {} // does nothing, no match is found

函数和编程能力

1. if((@text or @test2), trueReturn, falseReturn)