Scss

WaterCup
445 阅读6分钟

1. SCSS Script

1.1. 变量$

变量以美元符号开头，赋值方法与 CSS 属性的写法一样：

$width: 5em;  

#main {
  width: $width;  // 直接使用即调用变量
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明： image.png

1.2. 默认值：!default

sass 的默认变量仅需要在值后面加上 !default 即可。 image.png

如果分配给变量的值后面添加了 !default 标志 ，这意味着该变量如果已经赋值，那么它不会被重新赋值，但是，如果它尚未赋值，那么它会被赋予新的给定值。 image.png 上述例子因为变量$color已经被赋值为$666，所以后来再给它赋默认值时不会影响它原来的值，$color的值仍然是$666。

1.3. 局部变量和全局变量

在元素内部定义的变量不会影响其他元素 image.png

1.4. 嵌套

image.png image.png

1.5. 插值

插值几乎可以在Sass样式表中的任何地方使用，将SassScript表达式的结果嵌入到CSS块中。只需将表达式包装在#{}中

@mixin corner-icon($name, $top-or-bottom, $left-or-right) {
  .icon-#{$name} {
    background-image: url("/icons/#{$name}.svg");
    position: absolute;
    #{$top-or-bottom}: 0;
    #{$left-or-right}: 0;
  }
}

@include corner-icon("mail", top, left);

// 结果
.icon-mail {
  background-image: url("/icons/mail.svg");
  position: absolute;
  top: 0;
  left: 0;
}

插值可以在SassScript中用于将SassScript注入到未加引号的字符串中。这在动态生成名称（例如用于动画）或使用斜线分隔值时特别有用。请注意，SassScript中的插值总是返回一个未加引号的字符串。

@mixin inline-animation($duration) {
  $name: inline-#{unique-id()};
  @keyframes #{$name} {  @content;  }
  animation-name: $name;
  animation-duration: $duration;
  animation-iteration-count: infinite;
}

.pulse {
  @include inline-animation(2s) {
     from { background-color: yellow }
     to { background-color: red }
  }
}
// 结果
.pulse {
   animation-name: inline-uifpe6h;
   animation-duration: 2s;
   animation-iteration-count: infinite;
}

@keyframes inline-uifpe6h {
   from {  background-color: yellow;  }
   to {  background-color: red;  }
}

1.6. 数据类型

  1. 数字===>1, 2, 13, 10px

  2. 字符串，有引号字符串与无引号字符串===>"foo", 'bar', baz

  3. 颜色===>blue, #04a3f9, rgba(255,0,0,0.5)

  4. 布尔型===>true, false

  5. 空值===>null

  6. 数组 (list)，用空格或逗号作分隔符===>1.5em 1em 0 2em, Helvetica, Arial, sans-serif

  7. maps, 相当于 JavaScript 的 object===>(key1: value1, key2: value2)

SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 !important 声明。然而Sass 不会特殊对待这些属性值，一律视为无引号字符串。

1.6.1.字符串 (Strings)****

SassScript 支持 CSS 的两种字符串类型，在编译 CSS 文件时不会改变其类型：

有引号字符串 (quoted strings)，如 "Lucida Grande"

无引号字符串 (unquoted strings)，如 sans-serif bold，

只有一种情况例外，使用 #{} (interpolation) 时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名：

@mixin firefox-message($selector) {
   body.firefox #{$selector}:before {
     content: "Hi, Firefox users!";
   }
}
// 结果
@include firefox-message(".header");
body.firefox .header:before {
   content: "Hi, Firefox users!";
}

1.6.2.数组 (Lists)

数组 (lists) 指 Sass 如何处理 CSS 中 margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif 这样通过空格或者逗号分隔的一系列的值。事实上，独立的值也被视为数组 —— 只包含一个值的数组。

数组本身没有太多功能，但 Sass list functions 赋予了数组更多新功能：

  1. nth 函数可以直接访问数组中的某一项

  2. join 函数可以将多个数组连接在一起

  3. append 函数可以在数组中添加新值

  4. @each 指令能够遍历数组中的每一项

$sizes: 40px, 50px, 80px;
$sizess:append($sizes,90px);
@each $size in $sizess {  .icon-#{$size} {  font-size: $size;   height: nth($sizes,2);  }  }
// 结果
.icon-40px {  font-size: 40px;  height: 50px;  }
.icon-50px {  font-size: 50px;  height: 50px;  }
.icon-80px {  font-size: 80px;  height: 50px;  }
.icon-90px {  font-size: 90px;  height: 50px;  }

 ----------------------------------------------------------------------------------------------

$colors1: #f00,#ff0;
$colors2:#0f0,#00f;
$colorss:join($colors1,$colors2);
@each $color in $colorss{   .icon-#{$color}{  color: $color  }  }
// 结果
.icon-#f00 { color: #f00; }
.icon-#ff0 { color: #ff0; }
.icon-#0f0 { color: #0f0; }
.icon-#00f { color: #00f; }

Argument Lists：当你声明一个接受任意参数的混入或函数时，你得到的值是一个称为参数列表的特殊列表。它的作用就像一个包含传递给mixin或函数的所有参数的列表，还有一个额外的功能：如果用户传递了关键字参数，则可以通过将参数列表传递给meta.keywords()函数来作为映射访问它们。

@mixin syntax-colors($args...) {
  @each $name, $color in meta.keywords($args) {
      pre span.stx-#{$name} {  color: $color;  }
  }
}
@include syntax-colors(  $string: #080,  $comment: #800, $variable: #60b  )
// 结果
pre span.stx-string {  color: #080;  }
pre span.stx-comment {  color: #800;  }
pre span.stx-variable {  color: #60b;  }

1.6.3.Maps

Maps可视为键值对的集合，键被用于定位值，如 (key1: value1, key2: value2)。Maps必须被圆括号包围，键值对被都好分割。Maps中的keys和values可以是sassscript的任何对象。

  1. map-get函数用于查找键值

  2. map-merge函数用于map和新加的键值融合

  3. @each命令可添加样式到一个map中的每个键值对

@use "sass:map";

$icons: (  "eye": "\f112",  "start": "\f12e",  "stop": "\f12f"  );
@each $name, $glyph in $icons {
   .icon-#{$name}:before {  
       display: inline-block;   
       font-family: "Icon Font";  
       content: $glyph;  
   }
}

// 结果
.icon-eye:before { display: inline-block; font-family: "Icon Font"; content: "\f112"; }
.icon-start:before { display: inline-block;  font-family: "Icon Font";  content: "\f12e";  }
.icon-stop:before {  display: inline-block;  font-family: "Icon Font";  content: "\f12f";  }

$font-weights: ("regular": 400, "medium": 500, "bold": 700);
@debug  map.get($font-weights, "medium"); // 500
@debug  map.get($font-weights, "extra-bold"); // null

$light-weights: ("lightest": 100, "light": 300);
$heavy-weights: ("medium": 500, "bold": 700);
@debug  map.merge($light-weights, $heavy-weights);
// ("lightest": 100, "light": 300, "medium": 500, "bold": 700

scss @规则

@import

1. 普通使用

@import  <url>, <url> ......：Sass导入与CSS导入具有相同的语法，除了它们允许用逗号分隔多个导入，而不是要求每个导入都有自己的@import。此外，在缩进语法中，导入的URL不需要有引号。

当Sass导入一个文件时，该文件会被评估为其内容直接出现在@import的位置。

导入文件中的任何混入、函数和变量都是可用的，其所有CSS都包含在@import编写的确切位置。

此外，在@import之前定义的任何混入、函数或变量（包括来自其他@import的）都可以在导入的样式表中使用。

image.png

导入通常在样式表的顶层编写，也可以嵌套在样式规则中，也可以在规则中嵌套纯CSS。

导入的CSS嵌套在该上下文中，这使得嵌套导入对于将CSS块范围限定到特定元素或媒体查询非常有用。

嵌套导入中定义的顶级混入、函数和变量仅在嵌套上下文中可用。

image.png

2. 联合@forward导入配置模块

image.png

@use

注意：使用1.53.0版本，sass  input.scss  output.css；

@use规则从其他Sass样式表加载混入、函数和变量，并将多个样式表中的CSS组合在一起。@use加载的样式表称为“模块”。

1.基本使用

@use“<url>”，它在给定的url加载模块。以这种方式加载的任何样式都将在编译的CSS输出中包含一次，无论这些样式加载了多少次。

image.png

2.引入模块命名空间

@use  <namespace>：引入模块命名空间。

可以通过编写<namespace>从另一个模块访问变量、函数和混入<变量>，

<namespace><函数>()或@include  <namespace><mixin>()。

1. 默认情况下，模块的命名空间只是其URL的最后一个组件，没有文件扩展名。

image.png

2. @use  <url>  as <namespace>  :自定义空间名称。

image.png

3. @use <url> as *；用来加载没有名称空间的模块。但是，可能会引入导致名称冲突的新成员！

image.png

3.私有变量

通过以“-”或“_”开头定义私有成员，即使使用@use，也无法使用私有变量。

image.png

4.更改模块中默认参数

在样式表里使用 !default 来定义默认值，在加载文件里使用@use <url> with (<variable>: <value>,<variable>: <value>)来覆盖变量的默认值。

image.png

5.更新模块中的变量值

image.png

6.返回不同样式

利用@minix先配置值，再使用@minix注入样式。

image.png

7.以_开头的文件

按照惯例，Sass文件只作为模块加载，而不是单独编译，以_开头（如_code.scs）。

‌Sass中以“_”开头的文件通常用于存放一些可重用的样式或混合器，这些文件不会被直接编译成CSS文件，而是在其他Sass文件中通过@import或者@use导入使用。

8.与@import的区别

@use规则旨在替换旧的@import规则，但它被有意设计为以不同的方式工作。以下是两者之间的一些主要区别：

1. @use仅使变量、函数和混入在当前文件的范围内可用。它从未将它们添加到全球范围内。这使得很容易找出Sass文件引用的每个名称的来源，这意味着您可以使用较短的名称，而不会有任何冲突的风险。

2. @use只加载每个文件一次。这可以确保您不会意外地多次复制依赖项的CSS。

3. @use必须出现在文件的开头，不能嵌套在样式规则中。

4. 每个@use规则只能有一个URL。

5. @即使使用缩进语法，use也需要在其URL周围加引号。

补充： 使用@use加载的成员（变量、函数和混入）仅在加载它们的样式表中可见。如果其他样式表也想访问它们，则需要编写自己的@use规则。这有助于准确了解每个成员的来源。如果你想一次从多个文件加载成员，你可以使用@forward规则将它们全部从一个共享文件转发。

@forward

1. 转发模块

当涉及到模块的CSS时，@forward规则的作用就像@use一样。来自转发模块的样式将包含在编译的CSS输出中，带有@forward的模块可以扩展它，即使它没有被@使用。

image.png

2.添加前缀

因为模块成员通常与命名空间一起使用，所以简短的名称通常是最可读的选项。但是，这些名称在它们定义的模块之外可能没有意义，因此@forward可以选择为它转发的所有成员添加额外的前缀。

这被写成@forward ‘<url>’作为<prefix>-*，它将给定的前缀添加到模块转发的每个混入、函数和变量名的开头。例如，如果模块定义了一个名为reset的成员，并将其转发为list-*，则下游样式表将其称为list-reset。 image.png

3.控制可见性

通过写@forward ‘<url>’ hide <members…>来精确控制哪些成员被转发或者@forward“<url>” show <members…>。

hide表单意味着列出的成员不应该被转发，但其他所有内容都应该被转发。show表单意味着只应转发指定的成员。在这两种形式中，您都可以列出混入、函数或变量（包括$）的名称。

image.png

4.配置默认值

@forward规则还可以加载具有配置的模块。这与@use的工作原理基本相同，但有一个补充：@forward规则的配置可以使用！配置中的默认标志。这允许模块更改上游样式表的默认值，同时仍允许下游样式表覆盖它们。 image.png

avatar
文章
阅读
粉丝