Sass入门篇之基础语法（一）

2019-07-16 本文已影响0人前端艾希

About

本文是我在学习Sass的过程中记录的，对于不想看官方文档但是又急需使用Sass的人具有一定参考作用，但是如果读者想深入学习Sass，请参考Sass官方文档：https://www.sass.hk/docs/

一、在SCSS文件中使用变量

1. 声明变量

sass变量的声明和css属性的声明很像：

$bgcolor: red;

上面的代码的意思是给变量bgcolor赋值为red，这样我们在后面的SCSS语句中就可以使用这个变量，例如：

$bgcolor: red;

#app {
    background: $bgcolor;
}

上面的代码编译后：

#app {
    background: red;
}

当然，为了方便，我们也可以这么声明：

$border: 1px solid red;

.content {
    border: $border; /*等价于 border: 1px solid red */
}

2. 使用变量

如果我们需要在每个页面的SCSS文件中使用这些变量该怎么办呢？这时候我们可以在当前SCSS文件中引入其他的SCSS文件。比如，我们每个页面都需要背景色，和一个用来调试的边框，我们可以把这些变量写在一个SCSS文件中，然后在需要使用的页面中引入该SCSS文件，代码如下：

/* styles/styles.scss */
$bgcolor: #e5e5e5;
$border: 1px solid red;

/* src/pages/home.vue */
<style lang="scss" scoped>
  @import 'styles/styles.scss'
  #app {
      background: $bgcolor;
      .content {
          border: $border;
      }
  }

这里有一个效果图（和上面的代码无关，是我测试用的）：

导入scss.gif

3. 变量中使用下划线还是中划线

sass并不想强迫任何人一定使用中划线或下划线，所以这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用，反之亦然。

二、嵌套规则

sass风格通过代码缩进来确定选择器的父子关系，并且不需要使用分号，例如：

#app
  color: red
  .content
    border: 1px solid blue

scss风格则是通过大括号的嵌套来确定选择器的父子关系，并且需要使用分号，比较接近CSS的写法，所以使用范围更广。例如：

#app {
    color: red;
    .content {
        border: 1px solid blue;
    }
}

1. 父选择器的标识符 &

当我们使用例如:hover等伪类选择器时，比如：

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

sass会编译成article a :hover, 然而我们期望的是article a:hover，所以此时我们需要用到 &：

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

2. 群组选择器的嵌套

sass的嵌套特性在这种场景下也非常有用。当sass解开一个群组选择器规则内嵌的规则时，它会把每一个内嵌选择器的规则都正确地解出来：

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

编译为：

.container h1, .container h2, .container h3 { margin-bottom: .8em }

完全符合我们的期望

3. 子组合选择器和同层组合选择器：>、+和~;

上边这三个组合选择器必须和其他选择器配合使用，以指定浏览器仅选择某种特定上下文中的元素。

子组合选择器>

article section { margin: 5px } /* 选择article里面所有的section */
article > section { border: 1px solid #ccc } /* 选择article里面紧跟着的第一个section */

同层相邻组合选择器+

header + p { font-size: 1.1em } /* 选择header元素后紧跟的p元素 */

同层全体组合选择器~

/* 选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素 */
article ~ article { border-top: 1px dashed #ccc }

三、导入Sass文件

sass的@import规则是在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器均可在导入文件中使用。

使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀（见下图）。这样，在不修改样式表的前提下，你完全可以随意修改你或别人写的被导入的sass样式文件语法，在sass和scss语法之间随意切换。举例来说，@import"sidebar";这条命令将把sidebar.scss文件中所有样式添加到当前样式表中。（--摘自官方文档）

image.png

1. 直接导入

@import 'path'

2. 嵌套导入

/* styles/styles.scss */
aside {
  background: blue;
  color: white;
}

/* src/pages/home.vue */
#app {
    @import "styles/styles.scss"
}