Sass进阶系列一:@use

788 阅读2分钟

为更好理解官方文档,这里自己翻译一下方便使用。

各位看官可以当作深入笔记

Scss官方文档

At-rules

@use

此KeyWord用于装载其他Sass模块(与@import不同之处。即会编译到CSS文件)
官方建议直接放在当前SCSS文件最前面
变量声明和@forward可以放在@use之前.
可参考ES6的import.默认引入文件夹中index/_index/-index文件
使用建议:
基础样式SCSS文件--->forward引入SCSS文件使用--->use装载编译。 简易使用如下

// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}
// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}
// style.scss
@use 'foundation/code';
@use 'foundation/lists';

编译后为下面样式

code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

官网强调可以使用.运算来获取加载模块的内容
这也就意味着可以单独开辟一个SCSS文件作为命名空间。装载模块里的变量。不会影响到当前模块的变量
注意,若引入文件中有互相引用。注意变量污染!!!!!

// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}

注意这里有两个radius
引入文件命名以下划线_开头但是在内部不会现实

// style.scss
@use "src/corners";

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}

高级使用方法 使用as重命名

// style.scss
@use "src/corners" as buttoncorners;

.button {
  @include buttoncorners.rounded;
  padding: 5px + corners.$radius;
}

私有变量设置方法
在scss文件中以_或-开头的变量不会被其他模块引入。
此设置可以参考类中的private和publick方法,虽然不能直接被外部调用但是可以通过调用模块下方法获得此私有变量。
重载
参考java的重载,继承之后覆写原变量。 使用方法如下:
使用@use时 配合with 进行修改。

// _library.sass
$black: #000 !default
$border-radius: 0.25rem !default
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default

code
  border-radius: $border-radius
  box-shadow: $box-shadow
// style.sass
@use 'library' with ($black: #222, $border-radius: 0.1rem)

更深入的对mixin的修改暂且不表
涉及到包括mixin默认参数和一些其他关键词的应用,若感兴趣可参考顶部官方文档。