Sass基础

用Sass存储数据

Sass 不同于 CSS 的一个特点是它允许使用变量。
可以在 Sass 中声明变量，并为它赋值，就像在 JavaScript 中一样。
在 JavaScript 中，变量是使用 let 和 const 关键字定义的。 在 Sass 中，变量以 $ 开头的，后跟变量名。

这里有几个例子：

$main-fonts: Arial, sans-serif;
$headings-color: green;

并使用变量：

h1 {
   
  font-family: $main-fonts;
  color: $headings-color;
}

当需要把多个元素设置成相同颜色时，变量就会很有用。 一旦需要更改颜色，只需要改变这个变量的值就好。

<style type='text/scss'>
</style>

---

用 Sass 嵌套 CSS

Sass 允许 CSS 规则的嵌套，这在组织样式表的时候会很有用。
引入嵌套功能（即在对应的父元素中写子元素的样式）可以有效地简化代码：

nav {
   
  background-color: red;

  ul {
   
    list-style: none;

    li {
   
      display: inline-block;
    }
  }
}

---

用 Mixins 创建可重用 CSS

在 Sass 中，mixin 是一组 CSS 声明，可以在整个样式表中重复使用。

CSS 的新功能需要一段时间适配后，所有浏览器后才能完全使用。 随着浏览器的不断升级，使用这些 CSS 规则时可能需要添加浏览器前缀。 考虑 box-shadow：

div {
   
  -webkit-box-shadow: 0px 0px 4px #fff;
  -moz-box-shadow: 0px 0px 4px #fff;
  -ms-box-shadow: 0px 0px 4px #fff;
  box-shadow: 0px 0px 4px #fff;