公司新來了實(shí)習(xí)生，我給她講解一些scss常用的方法，發(fā)現(xiàn)有些知識點(diǎn)已經(jīng)遺忘了。在此整理復(fù)習(xí)一下。

scss在線編譯地址，文中涉及到的代碼，可以在該地址中進(jìn)行編寫體驗(yàn)。

變量

scss中可以使用變量,所有的變量都是以$開頭.

$color: #foo;

p {
    color: $color;
}

如果變量需要寫在屬性名里,就得寫在#{}當(dāng)中:

$side: left;

.border {
    border-#{$side}-radius: 10px;
}

嵌套

scss允許選擇器的嵌套:

div {
    p {
        font-size: 20px;
    }
}

屬性也可以嵌套:

/* scss */

div {
    font: {
        size: 16px;
        weight: bold;
    }
}

對應(yīng)的css:

/* css */

div {
  font-size: 16px;
  font-weight: bold; }

&表示引用父元素:

/* scss */

a {
    &:hover {
        color: #f00;
    }
}

對應(yīng)的css:

/* css */
a:hover { color: #f00; }

選擇器的嵌套

通過選擇器的嵌套可以實(shí)現(xiàn)樣式的繼承.
使用@extend繼承另一個選擇器的樣式:

/* scss */

.box1 {
    border: 1px solid #ccc;
}
.box2 {
    @extend .box1; // 繼承.box1的樣式
    font-size: 20px;
}

對應(yīng)的css:

/* css */
.box1, .box2 {
  border: 1px solid #ccc; }

.box2 {
  font-size: 20px; }

使用@at-root跳出嵌套

@at-root有四個參數(shù):

1. all(所有)
2. rule(常規(guī)css)
3. media(表示media)
4. support(表示support)

@at-root

/* scss */
.wrapper {
    @at-root .box1 {
        color: red;

        @at-root .box2 {
            color: blue;

            @at-root .box3 {
                color: cyan;
            }
        }
    }
}

對應(yīng)的css

/* css */
.box1 { color: red; }
.box2 { color: blue; }
.box3 { color: cyan; }

@at-root (without: media)

/* scss */
@media print {
    .page {
        width: 8in;
        @at-root (without: media) {
            width: 900px;
        }
    }
}

對應(yīng)的css:

/* css */
@media print {
  .page { width: 8in; } 
}
.page { width: 900px; }

@at-root (without: media support)

/* scss */
@media print {
    @supports (transform-origin: 5% 5%) {
        .foo {
            color: red;
            @at-root (without: media supports) {
                color: blue;
            }
        }
    }
}

對應(yīng)的css:

/* css */
@media print {
  @supports (transform-origin: 5% 5%) {
    .foo { color: red; } } 
}
.foo { color: blue; }

參考鏈接:

• sass與bem
• bem思想