scss-提升效率的几个知识点

!default

可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

使用场景 假设你正在创建一个网站的样式表，并且你希望能够轻松地更改主题色。你可以定义一个 $primary-color 变量来表示主题色，并在整个样式表中使用它。然后，你可以使用 !default 标记来设置一个默认的主题色。

scss 复制代码

// _variables.scss

$primary-color: blue !default;

这里，我们设置了一个默认的主题色为蓝色。现在，假设用户想要更改主题色为绿色，他们可以在另一个文件中覆盖这个变量的值，而不需要修改原始的 _variables.scss 文件。

scss 复制代码

// user-variables.scss

$primary-color: green;

这样，用户在导入你的样式表之前，可以定义他们自己的主题色，而不会影响到原始的默认值。这就是 !default 的使用场景之一，它允许你为变量设置默认值，但如果用户定义了自己的值，它会被覆盖。

!global

在SCSS中，!global标记用于声明一个全局变量，这意味着变量可以在任何地方被访问，而不受限于其声明的作用域。这个特性在某些情况下非常有用，特别是在处理嵌套作用域的情况下。

动态更改全局变量：有时候你可能需要根据用户的操作或者其他条件动态地更改全局变量的值。通过使用!global，你可以在任何地方重新赋值一个全局变量，而不需要考虑它的作用域。

scss 复制代码

$primary-color: blue;

.button {
  background-color: $primary-color;
}

// 其他地方
$primary-color: red !global; // 更改全局变量的值

在嵌套作用域中访问全局变量：在SCSS中，变量的作用域通常受限于它们的声明位置。使用!global可以让你在内部作用域中访问和修改全局变量。

scss 复制代码

$primary-color: blue;

.container {
  $primary-color: red !global; // 在内部作用域中访问和修改全局变量
}

在Mixin中使用全局变量：在Mixin中，如果你想要使用或者修改全局变量，你需要通过!global来声明

scss 复制代码

$primary-color: blue;

@mixin change-primary-color {
  $primary-color: red !global; // 在Mixin中使用和修改全局变量
}

!optional

用于指示当一个变量未定义时，不会产生错误。这在一些情况下很有用，特别是当你引入一个可能被覆盖的变量时，但你并不确定是否已经被定义。

使用场景 假设你有一个主题变量的文件 _theme.scss，它包含一些颜色变量的定义：

scss 复制代码

// _theme.scss

$primary-color: blue;
$secondary-color: green;

然后在另一个文件中，你想使用这些变量，但你不能确定这些变量是否已经在 _theme.scss 中被定义了。在这种情况下，你可以使用 !optional 标记来指示即使这些变量未定义，也不会产生错误：

scss 复制代码

// styles.scss

@import 'theme';

body {
  background-color: $primary-color !optional;
}

在这个例子中，如果 $primary-color 在 _theme.scss 中已经定义了，那么它会被使用。但是如果它没有被定义，!optional 标记会防止编译错误，而是忽略这个变量，使得编译可以继续进行，而不会中断。

@at-root

它用于强制 CSS 规则的生成在选择器的外层层级。通常情况下，SCSS 中的样式规则会根据嵌套结构生成相应的 CSS 选择器，但是有时候你可能希望将样式规则提升到外层，以避免生成过多的嵌套选择器。

语法如下：

scss 复制代码

@at-root {
  // CSS 规则
}

使用场景

在嵌套结构中强制生成顶层规则：

scss 复制代码

.container {
  @at-root {
    width: 100%;
  }
}

编译后的 CSS 将是：

scss 复制代码

width: 100%;

结合条件语句使用：

scss 复制代码

$theme: dark;

@if $theme == dark {
  @at-root {
    .container {
      background-color: #000;
      color: #fff;
    }
  }
}

这样做可以确保 .container 规则生成在最外层，而不会受到 @if 块的影响。

在 mixin 中使用：

scss 复制代码

@mixin add-margin {
  @at-root {
    margin-top: 10px;
  }
}

.button {
  @include add-margin;
}

这样可以确保 margin-top 规则生成在 .button 规则之外。

循环

@for

scss 复制代码

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

// compile:
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

@while

scss 复制代码

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

// compile:
.item-6 {
  width: 12em; }
.item-4 {
  width: 8em; }
.item-2 {
  width: 4em; }

@each

一维列表

scss 复制代码

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

// compile:
.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

二维列表

scss 复制代码

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

// compile:
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; }
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; }

maps

scss 复制代码

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

// compile:
h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }

混合指令 @mixin

定义混合指令

混合指令的用法是在 @mixin 后添加名称与样式，以及需要的参数（可选）

scss 复制代码

// 格式：
@mixin name {
    // 样式....
}

scss 复制代码

// example：
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

引用混合样式

scss 复制代码

// 格式：
@include name;

// 注：无参数或参数都有默认值时，带不带括号都可以

scss 复制代码

// example：
p {
    @include large-text;
}

// compile:
p {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
}

实战--- 实现0.5px混入

SCSS 复制代码

/* ------0.5px样式------ */
$defaultBorderColor: #f2f4f5; //默认线条颜色
$defaultRadius: 0; // 默认圆角
$defaultDirection: bottom; // 默认位置
$defaultPostion: relative;

/* 单边0.5px */
@mixin single-line-scale(
  $borderColor: $defaultBorderColor,
  $direction: $defaultDirection,
  $positon: $defaultPostion
) {
  position: $positon;
  &::after {
    content: ' ';
    position: absolute;
    @if $direction == bottom {
      width: 100%;
      height: 1px;
      bottom: 0;
      left: 0;
      transform: scaleY(0.5);
    } @else if $direction == top {
      width: 100%;
      height: 1px;
      top: 0;
      left: 0;
      transform: scaleY(0.5);
    } @else if $direction == left {
      width: 1px;
      height: 100%;
      left: 0;
      top: 0;
      transform: scaleX(0.5);
    } @else if $direction == right {
      width: 1px;
      height: 100%;
      right: 0;
      top: 0;
      transform: scaleX(0.5);
    }
    background: $borderColor;
  }
}

/* 四边0.5px */
@mixin round-line-scale($borderColor: $defaultBorderColors, $radius: $defaultRadius) {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid $borderColor;
    border-radius: $radius * 2;
    transform-origin: 0 0;
    transform: scale(0.5);
    pointer-events: none;
  }
}

使用

SCSS 复制代码

.border-single-line{
   @include single-line-scale(rgba(0, 0, 0, 0.08), top);
}
.border-round-line{
   @include round-line-scale(#e03810, 16px)
}

自定义函数

基本格式：

scss 复制代码

@function fn-name($params...) {
    @return $params;
}

scss 复制代码

// example:
@function fn-name($params...) {
    @return nth($params, 1);
}
p {
    height: fn-name(1px);
}

// compiled:
p {
  height: 1px;
}

细节

@extend、@Mixin和@function的选择

minxins在网络传输中比@extend 拥有更好的性能.尽管有些文件未压缩时更大，但使用gzip压缩后，依然可以保证我们拥有更好的性能。

所以@extend我们就尽量不要使用了，而@Mixin和@function的差别在定义和使用上

定义方式不同： @function 需要调用@return输出结果。而 @mixin则不需要。使用方式不同：@mixin 使用@include引用，而 @function 使用小括号执行函数。

Mixin 在网络传输中相比于 @extend 拥有更好的性能主要是因为它们在编译时就被解析和处理了，而 @extend 则在编译时并不被立即处理。

下面是两者的主要区别和影响因素：

编译处理时间：

Mixin 在 SCSS 编译时会被展开，所以在生成的 CSS 中，Mixin 的代码会直接插入到引用它的地方。这意味着在网络传输中，Mixin 的影响就是它们所引用的代码的大小。
而 @extend 在编译时并不会被立即处理。它会创建一个选择器引用的映射关系，然后在生成 CSS 时根据这个映射关系来合并选择器。这个过程可能会导致生成的 CSS 文件中出现大量的重复样式，从而增加文件大小。

生成的 CSS 大小：

Mixin 会直接将其代码插入到引用它的地方，所以生成的 CSS 中不会出现重复的样式代码。
@extend 则可能导致生成的 CSS 中出现大量的重复样式，因为它会合并选择器，但是可能会导致一些额外的选择器匹配。

性能：

由于生成的 CSS 文件大小更小，因此 Mixin 在网络传输中通常会比 @extend 生成的 CSS 文件加载更快，因为它们可以减少网络传输的数据量，加快页面加载速度。