sass 系统性学习
学习随笔(Sass)
- 该随笔是根据b站小满zs的Vue3 + vite + Ts + pinia + 实战 + 源码 +electron的视频学习写的,Vue3 + vite + Ts + pinia + 实战 + 源码 +electron
- bem格式
类名中--
代表,这个类的样式一样,仅颜色不一样。
类名中__
代表,这个类是上个类的子类。 - 变量
$
$box-width: 200px;
使用$
做为变量,赋值与css语言一样。使用时直接调用width: $box-width;
即可 - 嵌套
sass语言可以嵌套css,很简单的,不再过多赘述。 - 插值语法
#{}
$name: foo;
$atter: border;
p.#{name} {
#{atter}-color: blue;
}
- 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;"
}
}
}
})
- layOut布局
layout布局很经典,左侧为菜单栏,上面为头部,中间为显示的内容
本文来自博客园,作者:圆子同学,转载请注明原文链接:https://www.cnblogs.com/yuanZi666/p/17715116.html