Created
March 11, 2022 11:42
-
-
Save spazione/f959a17f6f43975ad13c15d10085fab9 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 child($name) { | |
@include element($name) { | |
@content; | |
} | |
} | |
@mixin subcomponent($name) { | |
@include element($name) { | |
@content; | |
} | |
} | |
@mixin sub($name) { | |
@include element($name) { | |
@content; | |
} | |
} | |
@include block('myComponent') { | |
font-size: 11px; | |
@include element('element') { | |
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__element { | |
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