Sass 基础教程——语法

Posted 2023-02-05 feelang

本篇主要介绍 Sass 的语法，需要 CSS 知识，对 CSS 不熟悉的同学可参考我之前写的系列教程：

• CSS入门篇
• CSS进阶篇
• CSS高级篇

第一篇中我们提到过，Sass 有两种语法，一种是缩进式，和 Ruby 有点像，另一种是大括号式，和 CSS 本身的语法很像。

这两种语法要分开使用，不能混用，其中缩进式一般叫做 Sass，对应的文件后缀为 .sass，大括号式叫做 SCSS，对应的是 .scss。

不过两种语法可以通过 sass-convert 进行转换：

$ sass-convert sass-style.sass scss-style.scss

SCSS 的语法因为和 CSS 非常类似，学习成本比 Sass 低，目前已经成为主流，所以我们后续的教程也会使用 SCSS 语法。

SCSS 语法

SCSS 的全称是 Sassy CSS，语法和 CSS 非常相似，提供了非常多实用功能，比如变量、运算、函数等等。

SCSS 同时也是 CSS 的超集，CSS 支持的语法 SCSS 都支持。

关于 CSS 语法，可以参考文章顶部列出的专栏，这里只介绍 SCSS 不同于 CSS 的地方。

注释

SCSS 既支持单行注释，也支持多行注释，单行用 //，多行用 /* */。

被转译成 CSS 代码后，只有多行注释会被保留，单行注释会被舍弃，这是因为 CSS 只支持多行注释。

例如，下面这段 SCSS 代码：

// Hello
// This is Sass tutorial

/*  This tutorial will help you to understand sass
    completely so that you can straight away apply sass
    in your project and make your project awesome.
*/

// Thank you

.hello-world 
    background-color:pink;

经过转译之后，会生成如下 CSS 代码：

/*  This tutorial will help you to understand sass
    completely so that you can straight away apply sass
    in your project and make your project awesome.
*/
.hello-world 
    background-color:pink;

嵌套规则

html 代码通过嵌套来组织不同层级的元素，例如，要创建一个列表，需要在 <ul> 或 <ol> 中嵌入 <li> 标签，这种写法非常直观，但是 CSS 并不支持嵌套，所以就无法做到样式和 HTML 的一一对应。

例如下面这段 HTML 代码：

<div id="sidebar">
    <ul>
        <li>Tutorials</li>
        <li>Q & A Forum</li>
        <li>Flashcards</li>
        <li>Tests</li>
        <li>Collaborate</li>
    </ul>
</div>

如果要用 CSS 来修饰，需要写成如下形式：

#sidebar 
    float:left;
    width:25%;
    background-color:lightblue;
    padding: 30px 10px;


#sidebar ul 
    list-style-type: none;
    margin: 0;
    padding: 0;


#sidebar li 
    padding: 6px;
    margin-bottom: 10px;
    background-color: #10A2FF;
    color: #ffffff;

因为层级关系不明显，代码可读性不太好，如果用 SCSS 来改写，就会比较直观，可以和 HTML 代码的层级结构对应起来：

#sidebar 
    float:left;
    width:25%;
    background-color:lightblue;
    padding: 30px 10px;
    
    ul 
        list-style-type: none;
        margin: 0;
        padding: 0;
    
    
    li 
        padding: 6px;
        margin-bottom: 10px;
        background-color: #10A2FF;
        color: #ffffff;
    

父级选择器

在 SCSS 语法中，可以用 & 来代表父级选择器。

关于 CSS 选择器，可以参考以下教程：

• CSS入门教程——HTML选择器
• CSS进阶篇——类和ID选择器
• CSS高级篇——更多选择器
• CSS高级篇——属性选择器

例如，下面这段 HTML 代码：

<div id="studytonight">
    <div id="studytonight-body">
        /* Some HTML code */
    </div>
</div>

两个父子关系的 ID 选择器分别为 studytonight 和 studytonight-body，可以用如下 SCSS 代码来表达以上层级关系：

#studytonight 
    // styling for #studytonight div
    padding: 10px;
    &-body 
        // styling for #studytonight-body div
        padding: 10px;
    

经过转译后，会生成如下 CSS 代码：

#studytonight 
  padding: 10px;


#studytonight-body 
  padding: 20px;

& 符号在转译时会被替换为父级选择器的名称，这在使用伪类时尤其有用，例如，当我们想改变 <a> 标签文字鼠标悬浮时的样式时，可以写成如下形式：

a 
    text-decoration: none;
    color:black;
    // using parent selector
    &:hover 
        color:red;
    

对应的 CSS 代码：

a  
    text-decoration: none;
    color:black;

a:hover 
    color:red;

嵌套属性

CSS 中有很多属性拥有相同的前缀，例如 font-weight，font-size 和 font-family，CSS 语法要求必须写全，其实这违反了 DRY(Don’t Repeat Yourself) 的原则，SCSS 对此作出了改良，可以用「提取公因式」的方法简化写法：

font: 
    family: calibri;
    size: 12px;
    weight: 500;

转译后的 CSS 代码如下：

font-family: calibri;
font-family: 12px;
font-weight: 500;

占位符选择器

所谓占位符选择器（placeholder selector）或者占位符类（placeholder class），是指自身没有实际意义，但可以让其它类来继承它的选择器，相当于面向对象设计里面的基类。

我们通过一个例子来看下 SCSS 中继承的用法。

首先定义一个基类 %card：

%card 
    box-sizing: border-box;
    border-top: 1px rgba(#000, .12) solid;
    width: 100%;

    &:hover  border: 2px rgba(#000, .5) solid; 

然后通过 @extend 来继承这个基类：

.card-light 
    // inheriting card styling rules
    @extend %card; 
    background-color: #FFFFFF;
    color: #000000;


.card-dark 
    // inheriting card styling rules 
    @extend %card; 
    background-color: #000000;
    color: #FFFFFF;

以上 SCSS 代码经过转译后会生成如下 CSS 代码：

.card-light, .card-dark 
    box-sizing: border-box;
    border-top: 1px rgba(#000, .12) solid;
    width: 100%;



.card-light:hover, .card-dark:hover 
    border: 2px rgba(#000, .5) solid;


.card-light 
    background-color: #FFFFFF;
    color: #000000;


.card-dark 
    background-color: #000000;
    color: #FFFFFF;

可以看出，选择器 %extend 并没有生成对应的 CSS 代码，而是直接被嵌入到了继承它的子类中去了。

结论

通过以上用法可以看出，SCSS 不但极大地简化了 CSS 的语法，而且支持更好的扩展性，使样式代码也具有了脚本语言的特性。

其实，除了 Sass/SCSS，社区内还有很多其它的预处理器，我们下一篇会介绍。