【SASS/SCSS（二）】模块化语法

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

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


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

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

可以用as给模块取别名，而 as * 代表无需访问模块名，可直接调用内部成员

css 复制代码

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

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

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

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

css 复制代码

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

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


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

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

2、私有变量

模块里可以定义私有变量，形如 $-\* 或者$ _*，导入后，外部无法访问模块内该私有变量。

css 复制代码

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

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


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

.button {
  @include corners.rounded;

  // This is an error! $-radius isn't visible outside of `_corners.scss`.
  padding: 5px + corners.$-radius;
}

对于非私有变量，模块被调用后，不仅可以访问，还可以重新赋值。

如果再次调用模块中的成员，将会是重新赋值后的值

3、用with改变模块中的默认值

css 复制代码

// _library.scss
$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.scss
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);

但是，如果 A @use B ， B @use C，A是无法访问C模块中的成员的！如果要使得 C在A和B模块间通用，就需要使用下面的 @forward

二、@forward

@forward本质是转发模块资源，是用于组织各文件中模块资源的方法。

但它本身的调用并不直接加载、编译scss文件，只是让模块中的资源经过导入后可公开访问

1、给forward模块起别名，让成员加前缀

给各模块的成员加上前缀，可以明确成员变量的来源，解决冲突

css 复制代码

// src/_list.scss
@mixin reset {
  margin: 0;
  padding: 0;
  list-style: none;
}


// bootstrap.scss
@forward "src/list" as list-*;


// styles.scss
@use "bootstrap";

li {
  @include bootstrap.list-reset;
}

2、利用hide or show手动控制成员的可访问性

hide代表模块中被hide的成员不可公开访问；show代表模块中仅仅只有被show的成员可公开访问

形如：

css 复制代码

// src/_list.scss
$horizontal-list-gap: 2em;

@mixin list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin list-horizontal {
  @include reset;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: $horizontal-list-gap;
    }
  }
}


// bootstrap.scss
@forward "src/list" hide list-reset, $horizontal-list-gap;

3、可以修改模块中的默认值，之后也能为@use...with再度修改

@use...with不可以加 !default字段，是因为这已经处于要将模块编译的阶段。

但@forward在配置时，则可以加该字段：

css 复制代码

// _library.scss
$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;
}


// _opinionated.scss
@forward 'library' with (
  $black: #222 !default,
  $border-radius: 0.1rem !default
)

三、@import

@import作为css也支持的语法，已经在被慢慢淘汰，现在最推荐的还是用@use对模块进行导入。

但一些scss才支持的@import特性，还是值得我们了解~

1、不存在命名空间，成员变量在import之后直接公开

这也是最危险的一点，一旦import之后，成员均可直接访问而不存在模块化的命名空间，容易导致冲突。

2、可以在嵌套语法中使用import

在选择器嵌套中导入import，可以使得样式仅在当前选择器作用域下生效

css 复制代码

// _theme.scss
pre, code {
  font-family: 'Source Code Pro', Helvetica, Arial;
  border-radius: 4px;
}

//_library.scss
p {
    color: red;
}


//boot.scss
div {
   @import "theme","library";
   width: 20px;
}

++*可以用逗号分隔导入文件，一次性导入多个！++