sass预处理语言

前言

巧了上篇说到的技术栈不一样，然后发现css预处理语言用的也不一样，小编之前用的less，公司用的sass。都是小事看一下就完事了，这边还是简单的做一下记录，说实话sass官网看着非常不舒服(不是水文章哈，不是水文章哈，不是水文章哈)。

sass

这些css预处理语言为啥要存在，自己去查一下就好了。

嵌套规则

sass 同样的支持样式嵌套，样式嵌套更加方便了我们去书写样式

div {
  ...
  span {
    ...
  }
}

父选择器

& 父选择器的存在更加便利了，有时也需要直接使用嵌套外层的父选择器，伪类的时候我们会用到，然后按照类名命名规则时我们也可以用它代替掉父级类名。

<div class="header">
  <div class="header-nav"></div>
  <span>头部内容</span>
</div>
<style>
  .header {
    &:hover {
      background-color: red;
    }
    span {
      font-size: 20px;
    }
    &-nav {
      display: flex;
    }
  }
</style>

属性嵌套

有很多属性前缀都是相同的，sass提供属性嵌套。

.header {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

SassScript

顾名思义他的功能就在于允许属性使用变量、算数运算等额外功能

#color :red;
.header {
  background-color: #color
}