Scss： css 预处理器和css语法扩展

SCSS（ Sassy CSS）： 对 CSS 友好的语法，试图弥合 Sass 和 CSS 之间的鸿沟。 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。 唯一不同的是，Scss 需要使用分号和花括号而不是换行和缩进，SCSS 对空白符号不敏感。Scss提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。

变量声明

SCSS通过$符号去声明一个变量，一般用于字体样式、背景颜色、按钮宽高等

// Color
$color343c4c: #343c4c;
$color1890ff: #1890ff;
$colorf9f9f9: #f9f9f9;

// 辅色
$color004450: #004450;
$colorff5f18: #ff5f18;
$colorf1b617: #f1b617;
$colorecf4fa: #ecf4fa;
$colordcdcdc: #dcdcdc;
$colorffffff: #ffffff;
// 字体色
$color1d1d1d: #1d1d1d;
$color999999: #999999;
$colorb4b4b4: #b4b4b4;
// 字体类型
$fontFamily: "Microsoft YaHei", "PingFang SC";
// 在系统中具体使用时的变量
// Menu
// 背景颜色
$mBgColor: $color343c4c;
// 选中颜色
$mSelectedColor: $color1890ff;
// 选中背景颜色
$mSelectedBgColor: $colorb4b4b4;

嵌套

SCSS嵌套在我个人认为加强了css的层级关系，修改能够清晰的定位层级，便于维护和查看修改。

.dimension {
        margin-top: 3rem;
        .dimension-title {
          font-size: 1.05rem;
          font-weight: bold;
          color: rgba(29, 29, 29, 1);
        }
        .dimension-list {
          margin-top: 2rem;
          .list {
            margin: 0 0 1rem 0;
          }
        }
      }

image.png

从上面的代码中我们不难看出SCSS提高了css代码的可读性和维护性。

引入

SCSS能够将代码分割为多个片段，从而只是在使用@import指令的位置被导入。CSS原生的@import会通过额外的HTTP请求获取引入的样式片段，而SCSS的@import则会直接将这些引入的片段合并至当前CSS文件，并且不会产生新的HTTP请求。

image.png
image.png

混合

混合（Mixin）用来分组那些需要在页面中复用的CSS声明，类似于js中的函数方法，可使用参数来进行灵活的传参。

// 字体已全局设置，无须再设字体
// 如不用全局字体，请使用上面的方案
@mixin scw($size, $color: $fontColor_1, $weight: 400) {
  font-size: $size;
  color: $color;
  font-weight: $weight;
}

@mixin T1 {
  @include scw(1.46rem, $fontColor_1, 700);
}

@mixin T2 {
  @include scw(1.25rem, $fontColor_1, 700);
}

@mixin T3 {
  @include scw(0.94rem, $fontColor_1, 500);
}