第3章これだけはマスターしたいSassの基本機能3-9 Sassのインポート（@use、@forward）Sample Code

@useの概要

1
code {
2
  padding: .25em;
3
  line-height: 0;
4
}

1
@use "code";

1
code {
2
  padding: .25em;
3
  line-height: 0;
4
}

1
$color-main: blue;

1
@use "variables";
2

3
body {
4
  background: $color-main;
5
}

1
@use "variables";
2

3
body {
4
  background: variables.$color-main;
5
}

1
body {
2
  background: blue;
3
}

1
@use "variables" as v;
2

3
body {
4
  background: v.$color-main;
5
}

1
@use "variables" as *;
2

3
body {
4
  background: $color-main;
5
}

1
$color-main: blue;
2
$-color-sub: green;

1
@use "variables" as v;
2

3
body {
4
  background: v.$color-main;
5
  color: v.$-color-sub;
6
}

1
@use "base";
2
@use "normalize";

1
@use "foundation";

1
.red {
2
  color: red;
3
}

1
@use "color";

1
@use "default", "module", "btn"; // 複数指定はできない
2
@use url(global); // urlを使った指定もできない
3

4
.section {
5
  @use "style"; // ルールセット内では使えない
6
}

1
@mixin list-reset {
2
  margin: 0;
3
  padding: 0;
4
  list-style: none;
5
}

1
$color-main: blue;
2
$color-sub: green;

1
@forward "variables";
2
@forward "list";

1
@use "global" as g;
2

3
li {
4
  @include g.list-reset;
5
  color: g.$color-main;
6
}

1
li {
2
  margin: 0;
3
  padding: 0;
4
  list-style: none;
5
  color: blue;
6
}

1
@forward "global";
2

3
li {
4
  color: global.$color-main;
5
}

1
$color: pink;
2

3
@mixin reset {
4
  margin: 0;
5
  padding: 0;
6
  list-style: none;
7
}

1
@forward "list" as list-*;

1
@use "global" as g;
2

3
li {
4
  @include g.list-reset;
5
  color: g.$list-color;
6
}

1
li {
2
  margin: 0;
3
  padding: 0;
4
  list-style: none;
5
  color: pink;
6
}

1
$color-main: blue;
2
$color-sub: green;
3
$color-error: red;

1
@forward "variables" hide $color-error;

1
@forward "variables" show $color-error;

1
@forward "variables" show $color-main, $color-sub;