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