手把手教你使用Sass，CSS扩展语言Sass使用文档说明

目录

sass介绍

专业级css扩展语言

1.使用变量

把反复使用的css属性值定义为变量，然后通过变量名来引用，就可以避免重复书写这一属性值。

sass使用$符号标识变量。

变量声明

::: tip Tips

  1. 当变量定义在css规则块外时：同一个样式表中都可以引用；
  2. 当变量定义在css规则块内时：该变量只能在此规则块内使用
    使用时一般在css规则块外定义变量。
    :::
$nav-color: #F90;  // 规则块外定义
nav {
    $width: 100px;  //规则块内定义使用
    width: $width;
    color: $nav-color;
}
// 编译后
nav {
    width: 100px;
    color: #F90;
}

::: warning
警告
:::

::: danger
危险
:::

---
title: docs
lang: en-US
---

变量引用

凡是css属性的标准值（比如说1px 或者solid）存在的地方，变量就可以使用。css生成时，变量会被它们的值所替代。

之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。

$highlight-color: #F90;
.selected {
    border: 1px solid $highlight-color;
}
// 编译后
.selected {
    border: 1px solid #F90;
}

在声明变量时，变量值也可以引用其他变量。

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
    border: $highlight-border;
}
// 编译后
.selected {
    border: 1px solid #F90;
}

变量命名技巧

用中划线声明的变量可以使用下划线的方式引用，反之亦然。
在sass的大多数地方，中划线命名和下划线命名的内容是互通的，除了变量，也包括对混合器和Sass函数的命名。

$link-color: blue;
a {
    color: $link-color;
}
// 编译后
a {
    color: blue;
}

2.嵌套css规则

在Sass中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。

#content {
    article {
        h1 {
            color: #333;
        }
        p {
            margin-bottom: 1.4em;
        }
    }
    aside {
        background-color: #EEE;
    }
}
// 编译后
#content  article h1 {
    color: #333;
}
#content  article p {
    margin-bottom: 1.4em;
}
#content  aside {
    background-color: #EEE;
}

父选择器的标识符：&

在为父选择器添加伪类时，&非常有用。

article a {
    color: blue;
    &:hover {
        color: red;
    }
}

第二种用法：在父选择器之前添加选择器。
例如：当用户在使用IE浏览器时，你会通过JS在<body>标签上添加一个ie的类名，为这种情况编写特殊的样式：

#content aside {
    color: red;
    body.ie & {
        color: green;
    }
}
// 编译后
#content aside {
    color: red;
}
body.ie #content aside {
    color: green;
}

群组选择器的嵌套

// css写法
.container h1, .container h2, .container h3 {
    margin-bottom: .8em;
}
// sass嵌套特性
.container {
    h1,h2,h3 {
        margin-bottom: .8em;
    }
}

子组合选择器和同层组合选择器：>, +, ~

// 选择article下的所有section选择器的元素
article section {
    margin: 5px;
}
// 只选择article下紧跟着的子元素中是section选择器的元素
article > section {
    border: 1px solid #ccc;
}
// +: 同层相邻组合选择器：选择header元素后紧跟着的p元素
header + p {
    font-size: 1em;
}
~：同层全体组合选择器：选择所有跟在article后面的同层article元素
article ~ article {
    border-top: 1px dashed #ccc;
}

这些组合选择器可以应用在sass的规则嵌套中，可以把它们放在外层选择器后面，或者里层选择器前面。

article {
    ~ article {
        border-top: 1px solid #ccc;
    }
    > section {
        background: #eee;
    }
    dl > {
        dt {
            color: #333;
        }
        dd {
            color: #555;
        }
    }
    nav + & {
        margin-top: 0;
    }
}
// 编译后
article ~ article {
    border-top: 1px solid #ccc;
}
article > section {
    background: #eee;
}
article dl > dt {
    color: #333;
}
article dl > dd {
    color: #555;
}
nav + article {
    margin-top: 0;
}

嵌套属性

在sass中，除了css选择器，属性也可以进行嵌套。
嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。

nav {
    border: {
        style: solid;
        width: 1px;
        color: #ccc;
    }
}
// 编译后
nav {
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
}

::: details 对于属性的缩写形式，你甚至可以像下边这样来嵌套，指明例外规则(点击查看代码)：

nav {
    border: 1px solid #ccc {
        left: 0px;
        right: 0px;
    }
}
// 编译后
nav {
    border: 1px solid #ccc;
    border-left: 0px;
    border-right: 0px;
}

:::

3.导入sass文件

使用sass部分文件

那些专门为@import命令编写的文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。
sass局部文件命名规范：命名以下划线开头。
当你@import一个局部文件时，可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";

默认变量值

一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。

$link-color: blue;
$link-color: red;
a {
    color: $link-color;
}

假如你写了一个可被他人通过@import导入的sass文件，你可能希望导入者可以定制修改sass文件库中的某些值。使用sass的!default标签可以实现这个目的。它很像css属性中!important标签的对立面，不同的是!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

$fancybox-width: 400px !default;
.fancybox {
    width: $fancybox-width;
}

::: tip TIP
如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明，则$fancybox-width将默认为400px。
:::

嵌套导入

跟原生的css不同，sass允许@import命令写在css规则内部。例如：有一个名为_lightblue-theme.scss的局部文件，内容如下：

aside {
    background: blue;
    color: #fff;
}

把它导入到一个css规则内，如下：

.lightblue-theme {
    @import "lightblue-theme"
}
// 生成的结果
.lightblue-theme {
    aside {
        background: blue;
        color: #fff;
    }
}

::: tip TIP
被导入的局部文件中定义的所有变量和混合器，也会在这个规则范围内生效。这些变量和混合器不会全局有效，这样我们就可以通过嵌套导入只对站点中某一特定区域运用某种颜色主题或其它通过变量配置的样式。
:::

原生的css导入

::: tip TIP
不能用sass的@import直接导入一个原始的css文件，但是因为sass的语法完全兼容css，你可以把原始的css文件改名为.scss后缀，即可直接导入了。
:::

4.注释

静默注释

在原生的css中，注释是直接可见的，但sass提供了一种方式可在生成的css文件中按需抹去相应的注释。sass静默注释的语法跟JavaScript的单行注释的语法相同，以//开头，注释内容直到行末。

body {
    color: #333; // 这种注释内容不会出现在生成的css文件中
    padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

5.混合器

可以通过sass的混合器实现大段样式的重用。混合器使用@mixin标识符定义，这个标识符给一大段样式赋予一个名字，这样你就可以轻易通过引用这个名字重用这段样式。

// 使用混合器添加跨浏览器的混合边框
@mixin rounded-corners {
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

然后你就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。

notice {
    background-color: #ccc;
    border: 1px solid #ddd;
    @include rounded-corners;
}
// sass会生成：
.notice {
    background-color: #ccc;
    border: 1px solid #ddd;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

何时使用混合器

::: tip TIP
判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式，比如：rounded-corners,fancy-font,no-bullets，那么往往能够构造一个合适的混合器。如果你找不到，这时候构造一个混合器可能并不合适。
:::

混合器在某些方面跟css类很像，都是让你给一大段样式命名。
有时候仅仅把属性放在混合器中还远远不够，可喜的是，sass同样允许你把css规则放在混合器中。

混合器中的css规则

混合器中不仅可以包含属性，也可以包含css规则(包含选择器和选择器中的属性)。

@mixin no-bullets {
    list-style: none;
    li {
        list-style-image: none;
        list-style-type: none;
        margin-left: 0px;
    }
}

给混合器传参

混合器并不一定都要生成相同的样式，可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给
css属性值的变量，这种方式和JavaScript的function很像。

@mixin link-colors($normal, $hover, $visited) {
    color: $normal;
    &:hover {
        color: $hover;
    }
    &:visited {
        color: $visited;
    }
}

当混合器被@include时，你可以把它当作一个css函数来传参

a {
    @include link-colors(blue, red, green);
}
// sass会生成：
a {
    color: blue;
}
a:hover {
    color: red;
}
a:visited {
    color: green;
}

当你@include混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可：

a {
    @include link-colors(
        $normal: blue,
        $visited: green,
        $hover: red
    )
}

尽管给混合器加参数来实现定制很好，但是有时有些参数我们没有定制的需要，这时候也需要赋值一个变量就变成很痛苦的事情了。所以sass允许混合器声明时给参数赋默认值。

混合器默认参数值

为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用。

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
) {
    color: $normal;
    &:hover {
        color: $hover;
    }
    &:visited {
        color: $visited;
    }
}

如果像下边这样调用：@include link-colors(red) $hover和$visited也会被自动赋值为red。

6.继承

使用选择器继承来精简css

选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现。

// 通过选择器继承继承样式
.error {
    border: 1px solid red;
    background-color: #fdd;
}
.seriousError {
    @extend .error;
    border-width: 3px;
}

::: tip TIP
.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承
:::

// .seriousError从.error继承样式
.error a { // 应用到.seriousError a
    color: red;
    font-weight: 100;
}
h1.error { // 应用到hl.seriousError
  font-size: 1.2rem;
}

何时使用继承

混合器主要用于展示性样式的重用，而类名用于语义化样式的重用。因为继承是基于类的（有时是基于其他类型的选择器），所以继承应该是建立在语义化的关系上。当一个元素拥有的类（比如说.seriousError）表明它属于另一个类（比如说.error），这时使用继承再合适不过了。(.seriousError类是另一个.error类的细化)

7.小结

参考：sass中文手册

posted @ 2021-09-15 13:42  叶子玉  阅读(460)  评论(0)  编辑  收藏  举报