scss

文章目录

1. 预处理器
   1. scss
      1. @mixin
      2. @include

预处理器

scss

我们可能经常在项目中使用 css 预处理器，在 vue 中，我们可能会写成

<script lang="scss">
    .title {
        &:first-child {
            
        }
        
        &:last-child {
            
        }
    }
</script>

这种普通的用法，仅仅是为了把 .title 省略，写起来其实与 css 并无不同，如果仅仅需要这种功能，我推荐使用 stylus，毕竟它连 { } : ; 都可以省略。

@mixin

一般预处理器中都有 mixin 这个混入功能，允许你把一些 css 代码混入到指定位置。在 scss 中，使用 @mixin name 来定义。

@mixin b($block) {
    $B: $namespaced + '-' + $block !global; // !global 表示这个变量不是全局变量，只允许在它的子元素用访问，即在 b() { 这里访问 }。
    .#{$B} {
        @content; // 表示调用 mixin 的原代码块
    }
}

@mixin e($element) {
    @at-root { // 表示根路径，减少样式权重，例如不加的话可能变成 .message .message__header，加了之后变成 .message__header
        .#{$B + $element-prefix + $element} { // $B 如上所述，只允许在 b(){} 中调用，如果 e() 外层没有 b()，将不会生效（或者报错？）。
            @content;
        }
    }
}

@include

调用定义好的 @mixin 方法