Front end advanced course 19

本节课的主要内容为:

引

我们上节课主要介绍了 Sass 环境的安装以及简单的 CLI 使用。feature 部分只讲了 variables，下面我们来看看 Sass 中更多的 feature。

我们看这么一段 CSS 代码：

#foo {
    // code
}
#foo .bar {
    // code
}
#foo .bar p {
    // code
}
#foo .bar p a {
    // code
}

是不是觉得重复地写这些选择器很抓狂？那来看看 Sass 能帮我们做些什么：

#foo {
    .bar {
        p {
            a {
            }
        }
    }
}

你说爽不爽呢？

另外，除了普通的嵌套，Sass 还支持属性嵌套，即通过属性名公共部分加 : 这个符号来申明，如下面的代码：

#foo {
    font: {
        size: 12px;
        weight: normal;
    }
}

编译之后便等同于：

#foo {
    font-size: 12px;
    font-weight: normal;
}

还有一些场景，我们 CSS 的选择器层级可能非常明确，即父级元素与子级元素，如某个组件和它里面的按钮，这时候为了表示归属关系我们可能会用类似这样的选择器名字：tooltip, tooltip-title。

通常情况下我们可能会这样书写：

.tooltip {
}
.tooltip .tooltip-title {
}

不过这样看起来未免冗余和拖沓，于是可能会变成这样：

.tooltip {
}
.tooltip-title {
}

这样又一眼望去似乎层级关系不够明显。那么有没有两全其美的方式呢？我们来试试 Sass 嵌套中的另一个特性，引用父元素：

.tooltip {
    &-title {
    }
}

引用父元素即通过 & 符号来在嵌套中表示对于父元素的引用，并且解析后这个选择器并不属于父元素的子元素，而是会和父元素平级。于是这段代码编译出来即等同于上面那段 CSS，并且能非常明确的看到归属关系。不失为两全其美的方法。

代码片段即某块代码可以单独的写在一个文件里，以供其他文件引用。也许这时候有同学会问到，为什么会存在代码片段呢，我们平时写 CSS 怎么没有遇到呢？其实大家平时开发时都或多或少的遇到了，只是由于工程量比较小，没有用类似的方式来解决。下面我们来看看几种常见的 CSS 组织情况：

既然已经有很多编程语言特性了，那么方便的注释自然必不可少。Sass 中的注释主要分为两种方式：

/* 我是一段可爱的小注释 */
// 我是一段呆萌的小注释

区别主要在于前一种会保留在编译结果中，后一种不会。