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 } 复制代码