sass笔记 - 技术栈

sass笔记

静小谢2026-01-06 12:34

1、mixin deep

css 复制代码

// 样式穿透，作用是在样式中添加:deep(.n-button)
@mixin deep() {
  :deep() {
    @content;
  }
}

使用

css 复制代码

  @include deep() {
    .n-list-item {
      border-bottom: 0!important;
    }
    .n-button {
      height: 40px!important;
    }
  }

2、sass的内置方法map-get

css 复制代码

@function themed($key) {
  /**
  获取属性值，例如获取colors里的primary
   * $colors: (
  primary: #409eff,
  success: #67c23a
);

color: map-get($colors, primary); 
   */
  @return map-get($color, $key);
}

3、拼接公共类名

css 复制代码

// go的混合器，作用生成go-拼接的类名
@mixin go($block) {
  // $namespace是全局的变量go,go+传入类名，拼接成B变量
  $B: $namespace + '-' + $block;
  // 生成类.#{$B}，@content;样式占位符
  .#{$B} {
    @content;
  }
}

使用

css 复制代码

@include go(item) {
  display: flex;
  flex-direction: column;
  .name {
    margin-top: 2px;
  }
}

4、属性选择器判断

css 复制代码

@mixin dark {
  // [data-theme='dark']是属性选择器，作用是当data-theme属性为dark时，执行样式
  [data-theme='dark'] {
    @content;
  }
}

5、动态拼id选择器

css 复制代码

@mixin goId($block) {
  $B: $namespace + '-' + $block;
  // 生成id选择器##{$B}，@content;样式占位符
  ##{$B} {
    @content;
  }
}

6、减少每个文件都需要引入scss文件，直接在vite.config里配置

css 复制代码

  css: {
    preprocessorOptions: {
      scss: {
        // javascriptEnabled: true,
        additionalData: `@import "src/styles/common/style.scss";`
      }
    }
  },