scss好用的功能可不只是一个嵌套

简介

大家好，我是 simple ，我的理想是利用科技手段来解决生活中遇到的各种问题。

SCSS 是 CSS 的超集，即所有 CSS 功能都将在 SCSS 中可用，并且包含 SASS（Syntactically Awesome Style Sheets）的一些功能。 SCSS 使任何 CSS 术语都有效。

&符号

    .dashboard {
      &-container {
        margin: 30px;
      }
      &-text {
        font-size: 30px;
        line-height: 46px;
      }
    }

编译成css后

.dashboard-container { 
    margin: 30px; 
} 
.dashboard-text {
    font-size: 30px; 
    line-height: 46px; 
}

&符号就相当于直接拼接了父级选择器，从代码的角度上来说更加方便更加简洁，从浏览器的角度来说，减少了css嵌套，解析更快。

变量声明

在js中可以声明变量，在scss中依然可以声明变量，以达到重复利用，统一管理的效果。你可以在变量中存储颜色、字体 或任何 CSS 值，在scss中使用$关键字来声明变量。

$primary-color: #333;

body {
  color: $primary-color;
}

混合

@mixin

写样式有时候对于我们来说特别麻烦，有些相同的样式我们一而再、再而三重复写。有时候我们也想要像js一样，如果能直接复用那段代码就好了。scss里面的mixin，你值得拥有。

首先，我们先使用关键字@mixin声明一个变量，然后写完你想要的样式。在调用的时候，你可以通过关键字@include直接使用。

@mixin theme {
  background: #000;
  color: #fff;
}

.test {
  @include theme;
}

你可能会觉得，混合好是好，就是有点死板了，我随便换一个颜色，那我不是又要重新写段代码吗？如果可以像js那样直接传参就好了。你放心，传个参而已，洒洒水啦，scss能够满足你。

@mixin theme($bgc: #000, $color) {
  background: $bgc;
  color: $color;
}

.test {
  @include theme(#1e90ff, #000);
}

不仅可以传多个参数，还可以预设默认值。

条件判断

对，你没有看错，如果上面的文章看清楚了，下面的文本超出省略的示例就不解释了。

@mixin text-overflow($line: 1) {
  @if ($line==1) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @else {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $line;
    overflow: hidden;
  }
}

.test {
  @include text-overflow(1);
}

ps: 还有循环语句这些，不过实在太少这种应用场景了，就不列举了。

@extend

@extend 的作用和@include有点类似，@extend是可以直接复用类名。

.bg {
    background-color: #00f;
}

.test {
    @extend .bg;
    border: 1px solid #000;
}

编译后

.bg, .test {
    background-color: #00f;
}
.test {
    border: 1px solid #000;
}

变量拼接

如同js的模板字符串一样，使用#{}可以直接将变量拼接进去

$len: 12;

.test {
  width: #{$len}px;
}

导入

在scss中，我们也不需要将所有的样式都写在同一个文件中，这是一种很好的方式来模块化你的CSS并使其更易于维护。

@import

Sass 拓展了原生css的 @import 功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

@import "./index.scss"

@use

我们可以使用@use规则以任意方式拆分它。这个规则将另一个Scss文件加载为一个模块，我们可以在Scss文件中使用基于文件名的命名空间来引用它的变量,[混入]以及[函数]，就类似于common.js中的export和require。 示例：我们新建了两个文件，_test.scss，index.scss

// 这里是_test.scss
$font-size: 28px;

// index.scss
@use "./_test.scss";

.test {
  font-size: test.$font-size;
}

定义私有成员 如果引入的模块内部有变量只想在模块内使用，可使用 - 或 _ 定义在变量头即可

$-font-size: 28px;

// index.scss
@use "./_test.scss";

.test {
  font-size: test.$-font-size; // Error: Private members can't be accessed from outside their modules.
}

重命名

@use "src/style/_all" as test;

.test {
  font-size: test.$font-size;
}

@forward

@forward是可以将多个混合放在同一个地方，然后通过某个文件单点暴露出来。 例如:

// _test.scss
$font-size: 28px;

// _all.scss
@forward "./_test";

// index.scss
@use "./_all"
.test {
  font-size: all.$font-size;
}

转发时定义前缀

@forward "./_test" as t-*

// index.scss
@use "./_all"
.test {
  font-size: all.$t-font-size;
}