Front end advanced course 19

本节课的主要内容为:

  • sass 2

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

Nesting

我们看这么一段 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,并且能非常明确的看到归属关系。不失为两全其美的方法。

Partials

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

单个文件

global 加分页面样式

模块化组织

Import

Operators

Comments

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

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

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

HOME WORK

内容预告

  • sass 3