sass 系统性学习

学习随笔（Sass）

• 该随笔是根据b站小满zs的Vue3 + vite + Ts + pinia + 实战 + 源码 +electron的视频学习写的，Vue3 + vite + Ts + pinia + 实战 + 源码 +electron

1. bem格式
   类名中--代表，这个类的样式一样，仅颜色不一样。
   类名中__代表，这个类是上个类的子类。
2. 变量$
$box-width: 200px; 使用$做为变量，赋值与css语言一样。使用时直接调用width: $box-width;即可
3. 嵌套
   sass语言可以嵌套css，很简单的，不再过多赘述。
4. 插值语法#{}

$name: foo;
$atter: border;

p.#{name} {
  #{atter}-color: blue;
} 

5. bem规范实战

$namespace: 'yz' !default;
$block-sel: '-' !default;
$elem-sel: '__' !default;
$mod-sel: '--' !default;

@mixin b($block) {
   $B:#{$namespace + $block-sel + $block};
   .#{$B}{
     <!-- @content 相当于一个占位符 将书写的css样式传递到这里 -->
     @content;
   };
}

@mixin e($el){
   $selector: &;
   @at-root{
     #{$selector + $elem-sel + $el}{
       @content;
     }
   }
}

 @mixin m($m){
   $selector: &;
   @at-root{
     #{$selector + $mod-sel + $m}{
       @content;
     }
   }
}

当配置项写完时，需要在项目中全局引用的话，不是在App.vue里面引用，而是在vite.config.ts中进行配置，加入:

export default defineConfig({
  plugins:[vue()],
  css: {
    preprocessorOptions: {
      scss:{
        // scss路径
        additionalData: "./src/bem.scss;"
      }
    }
  }
})

6. layOut布局
   layout布局很经典，左侧为菜单栏，上面为头部，中间为显示的内容