SCSS的常规使用

mixin与extend

前者只能混入同一层级的样式，而后者可以内嵌子级并生效;
前者使用@include 后者使用@extend 按场景来说，前者就是简单的重复代码提取，后者可以用作btn的扩展类 error、success等

最佳实践

$titleHoverColor: #fff;   // $title-color -符号也是可以的

@mixin ep($lines: 1) {
  @if ($lines == 1) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
}


@mixin md {
  @media (max-width: 1200px) {
    @content;
  }
}


%wrapStyle {
  margin: 0 auto;

  @include md {
    padding: 0 16px;
  }
  h2 {
     color: $titleHoverColor;
   }
}


.lw-list-blog {
  @extend %wrapStyle; //extend需要放到顶部

 @include ep(6);
  text-align: left;
  color: var(--bs-grayscale-030303, #030303);
  &:hover {
   color: red;
   }

body & {
       font-size: 12px; // 选中在body内的自己
     }
}

其他工具

math

@use "sass:math";

h3{
  width: math.div(300px, 960px) * 100% !important;
  margin-left: auto;
}

use: use不仅引入变量和mixin还会引入scss内容是自行编译的 Sass 文件以_（如_code.scss）开头。这些称为“部分”，它们告诉 Sass 工具不要尝试自行编译这些文件。_导入部分时您可以省略。（导入和use 都是这样）


// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;


// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

@forward @forward一般写组件库用的多，先处理一道产出alias，再使用use用

知识

& 这个叫做父选择器标识符
_partial.scss. 下划线让 Sass 知道该文件只是部分文件，不应将其生成为CSS文件。

通过 @use 加载的模块不管被引用了多少次，都只会在编译后输出一次到 css 中。但是使用 @import 多次引入同一模块，会反复输出到 css 中。

文档

https://www.lesscode.work/sections/621c3db97dd7d.html