scss好用的方法技巧

 

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

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

@mixin theme（$color） {
  background: $color;
  color: #fff;
}

.test {
  @include theme(#ffffff);
}

条件判断

@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);
}

变量拼接

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

$len: 12;

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

导入

@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;
}

重命名

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

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