sass 系统性学习

学习随笔(Sass)

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

p.#{name} {
  #{atter}-color: blue;
} 
  1. 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;"
      }
    }
  }
})
  1. layOut布局
    layout布局很经典,左侧为菜单栏,上面为头部,中间为显示的内容
posted @ 2023-09-19 16:48  圆子同学  阅读(23)  评论(0)    收藏  举报