scss中一些比较常见的语法

嵌套功能

// 在scss语法中是允许一个父级选择器来包裹子级选择器的，
这样就可以避免重复写父级选择器，而且在包含关系上有迹可循

<template>
  <div class="father">
      <div class="children">
          <div class="child">
              我是children中的child
          </div>
      </div>
      <div class="child">
          我是father中的child
      </div>
  </div>
</template>

<script>
export default {

}
</script>
<style lang="scss">
.children{
    .child {
        color: red;
    }
}
</style>

从上面的代码可以看出来，我在html中的代码中有两个叫做child的class名称，在下面的style中，我对child做了样式的定义，如果在代码中有两个类名一样的元素那么就会变得很不好定义，但是scss语法提供了嵌套模式，我在类名为children的样式里面嵌套了，类名为child的元素，这样就很清晰了，并且不需要写那么类名用来区分，所以这就是我们嵌套的一个格式，就是外层包裹的元素必须为父元素以及以上级别的元素，这样可以很清楚的找到源头及其尽可能少的重复的来写类名。

父选择器的&连接符

<template>
  <div class="father">
      <div class="children">
          <div class="child">
              我是children中的child
          </div>
          <div class="childrenSecond">
              我是children里面的第二个child
          </div>
      </div>
      <div class="child">
          我是father中的child
      </div>
  </div>
</template>

<script>
export default {

}
</script>
<style lang="scss">
.children {
    .child {
        color: red;
    }
    &Second {
        color: green;
    }
}
</style>

在上面的代码中可以看见，我在children里面又定义了一个子元素childrenSecond,这个代表着children中的第二个子元素，我在样式定义中使用了连接符"&",这样既可以找到父级，还可以简写代码。

属性嵌套

<template>
  <div class="father">
      <div class="children">
          <div class="child">
              我是children中的child
          </div>
          <div class="childrenSecond">
              我是children里面的第二个child
          </div>
      </div>
      <div class="child">
          我是father中的child
      </div>
  </div>
</template>

<script>
export default {

}
</script>
<style lang="scss">
.children {
    .child {
        color: red;
        font: {
            size: 10px;
            weight: 20px;
            family: "微软雅黑"
        }
    }
    &Second {
        color: green;
    }
}
</style>

可以看到我给child类名新添加了很多关于字体的属性，要是正常的书写的话，就会写好多遍font，这里我们使用属性嵌套的方法，font下面可以写所有关于字体的样式。

变量

@import

@import "foo.scss";
#main {
  @import "example";
}

支持引入scss文件，并且也支持导入在样式内部。

@extend

表示继承关系，一个可以完全继承另一个

上面的代表就表示seriousError来继承extend的样式

定义混合指令@mixin

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

使用@mixin来定义一个样式，但是我们想用的时候，必须要使用@include

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}