Created
March 11, 2022 12:07
-
-
Save spazione/a3566a852d53cdaadeac4cf802d29e9b to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Compass (v1.0.1) | |
// ---- | |
// bemify | |
// https://gtihub.com/franzheidl/bemify | |
// Franz Heidl 2015 | |
// MIT License | |
// CONFIG | |
// ====== | |
// You can change the configuration here. To use your own config/variables file, just import your variables before using one of the mixins. | |
// Output combined state selectors like: | |
// .block__element.is-active {} | |
// Set to false to output single, non-combined state modifiers: | |
// .block__element--is-active {} | |
$combined-state-selectors: true !default; | |
// .block[separator]element: | |
$element-separator: "-" !default; | |
// .block[separator]modifier: | |
$modifier-separator: "-" !default; | |
// The default prefix for state modifier selectors, will be combined with $modifier-separator: | |
$state-prefix: "is" !default; | |
// MIXINS | |
// ====== | |
@mixin block($name) { | |
.#{$name} { | |
@content; | |
} | |
} | |
@mixin element($name) { | |
@at-root { | |
&#{$element-separator}#{$name} { | |
@content; | |
} | |
} | |
} | |
@mixin modifier($name) { | |
@at-root { | |
&#{$modifier-separator}#{$name} { | |
@content; | |
} | |
} | |
} | |
@mixin state($state, $prefix: $state-prefix) { | |
@if $combined-state-selectors == true { | |
@at-root { | |
&.#{$prefix}-#{$state} { | |
@content; | |
} | |
} | |
} | |
@else { | |
@at-root { | |
&#{$modifier-separator}#{$prefix}-#{$state} { | |
@content; | |
} | |
} | |
} | |
} | |
// ALIASES | |
// ======= | |
@mixin component($name) { | |
@include block($name) { | |
@content; | |
} | |
} | |
@mixin b($name) { | |
@include block($name) { | |
@content; | |
} | |
} | |
@mixin e($name) { | |
@include element($name) { | |
@content; | |
} | |
} | |
@mixin m($name) { | |
@include modifier($name) { | |
@content; | |
} | |
} | |
@mixin subcomponent($name) { | |
@include element($name) { | |
@content; | |
} | |
} | |
@mixin sub($name) { | |
@include element($name) { | |
@content; | |
} | |
} | |
@include b('myComponent') { | |
font-size: 11px; | |
@include e('myElement') { | |
font-size: 11px; | |
@include m('myModifier') { | |
font-size: 11px; | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.myComponent { | |
font-size: 11px; | |
} | |
.myComponent-myElement { | |
font-size: 11px; | |
} | |
.myComponent-myElement-myModifier { | |
font-size: 11px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"sass": { | |
"compiler": "Ruby Sass/3.4.1", | |
"extensions": { | |
"Compass": "1.0.1" | |
}, | |
"syntax": "SCSS", | |
"outputStyle": "expanded" | |
}, | |
"autoprefixer": false | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment