scss样式复用@mixin & @include

最新推荐文章于 2024-09-22 21:44:08 发布

原创最新推荐文章于 2024-09-22 21:44:08 发布 · 353 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#scss #css #css3

css 专栏收录该内容

2 篇文章

订阅专栏

博客介绍了SCSS中样式复用的方法，通过@mixin抽离需要复用的样式，再使用@include引入这些样式，实现样式的高效复用，属于前端开发中样式处理的内容。

1. @mixin抽离需要复用的样式

@mixin physical-link-rate-line {
  margin-right: 4px;
  content: ' ';
  display: inline-block;
  width: 80px;
  height: 2px;
  vertical-align: middle;
}

2.@include引入使用

 &.mbps1000 {
            &:before {
              @include physical-link-rate-line;
              border-bottom: 2px solid #40b54d;
            }
          }