Prefix Snippets - Collection of Sass Snippets.

prefix.css

.prefix-test {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  -ms-column-count: 3;
  -o-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 1.5em;
  -moz-column-gap: 1.5em;
  -ms-column-gap: 1.5em;
  -o-column-gap: 1.5em;
  column-gap: 1.5em;
  -webkit-column-rule: 2px solid hotpink;
  -moz-column-rule: 2px solid hotpink;
  -ms-column-rule: 2px solid hotpink;
  -o-column-rule: 2px solid hotpink;
  column-rule: 2px solid hotpink;
}

prefix.scss

// 添加兼容性前缀
@mixin prefix($declarations, $prefixes: ()) {
    @each $property, $value in $declarations {
        @each $prefix in $prefixes {
            #{'-' + $prefix + '-' + $property}: $value;
        }
        
        #{$property}: $value;
    }
}

.prefix-test {
    @include prefix((
        column-count: 3,
        column-gap: 1.5em,
        column-rule: 2px solid hotpink
    ), webkit moz ms o)
}
`

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": true
}