Sass 基础用法（下）

BEM命名法

Block Element Modifier

1. Block: 主要名字 -> user-card。
2. Element: 两个下划线表示嵌套的内容 -> user-card__avatar, user-card__name。
3. Modifier：两个中划线表示hover等动作 -> user-card__avatar--hover, user-card__avatar--active。

改进版

1. -> 驼峰式写法。
2. 两个下划线 -> 一个下划线。
3. 最后的Modifier再写多一个class来代替。
   例子：.user-card__avatar--active -> .userCard-avatar .active

应用

‘&’表示当前选择器。

.userCard {
    width: 100px;

    &.active {
        background: yellow;
    }

    &-name {
        color: black;
    }
}

嵌套缩写

font-size: 18px;
font-weight: bold;
font-family: ....

缩写成如下形式

font: {
    size: 18px;
    weight: bold;
    family: 'Courier New', Courier, monospace;
}

SCSS的注释

支持多行和单行注释。

变量作用域

设置局部作用域

&-description {
    $red: red;
    background: $red;
}

&-name {
    $red: #680;
    background: $red;
}

应用

可以设置 1:1 的值。

$width: 100px;
.x {
    width: $width;
    height: $width;
}

局部变全局

在局部变量添加 !global 变成全局变量。

.x {
    $width: 100px !global;
    width: $width;
    height: $width;
}

运算

加减法

.x {
    $width: 100px;
    width: $width / 2; // 宽度的一半
    height: $width * 2; // 高度2倍
}

乘法

不能 100px * 100px， 因为会变成 100px 的平方。要写成 100px * 100。

.x {
    width: 100px * 100;
}

除法

在 SassScript 里用 / 分隔的两个数字， 都会在 CSS 中原封不动的输出。
下面情况可以作为除法：

1. 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。

.x {
    $width: 100px;
    width: $width / 100; // 1px
}

2. 如果数值被圆括号包围。

.x {
    width: ($width / 100); // 1px
}

3. 如果数值是另一个数学表达式的一部分。

.x {
    width: $width / 100 - 0; // 1px
}

取模

可以用于函数来判断奇偶。

.x {
    width: 100px % 3; // 1px
}

颜色运算

.userCard {
    $red: red;
    background: $red + #888;
}

效果

字符串插值

'#{变量}'，将变量加入到字符串中。

.userCard {
    $red: #680;
    &::before {
        content: '[ #{$red}' // -> '[ #680'
    }
    &::after {
        content: ']'
    }
}