scss常用知识点整理

公司新来了实习生，我给她讲解一些scss常用的方法，发现有些知识点已经遗忘了。在此整理复习一下。

---

scss在线编译地址，文中涉及到的代码，可以在该地址中进行编写体验。

变量

scss中可以使用变量,所有的变量都是以$开头.

$color: #foo;

p {
    color: $color;
}

如果变量需要写在属性名里,就得写在#{}当中:

$side: left;

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

嵌套

scss允许选择器的嵌套:

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

属性也可以嵌套:

/* scss */

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

对应的css:

/* css */

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

&表示引用父元素:

/* scss */

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

对应的css:

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

选择器的嵌套

通过选择器的嵌套可以实现样式的继承.
使用@extend继承另一个选择器的样式:

/* scss */

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

对应的css:

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

.box2 {
  font-size: 20px; }

使用@at-root跳出嵌套

@at-root有四个参数:

1. all(所有)
2. rule(常规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;
            }
        }
    }
}

对应的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;
        }
    }
}

对应的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;
            }
        }
    }
}

对应的css:

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

---

参考链接:

• sass与bem
• bem思想