Last active
August 12, 2021 09:15
-
-
Save elisechant/6693818 to your computer and use it in GitHub Desktop.
SCSS Design Patterns - Mixin Constructor
This file contains hidden or 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
| /* | |
| |-------------------------------------------------------------------------- | |
| | class ComponentA | |
| |-------------------------------------------------------------------------- | |
| | | |
| | [long description] | |
| | | |
| | Example | |
| <div class="{{ identifier }}"> | |
| <div class="component-a__element"> | |
| //... | |
| </div> | |
| </div> | |
| | | |
| */ | |
| // output HTML? | |
| $INCLUDE_COMPONENT-A_HTML: true; | |
| // globals | |
| $var: null; // should be defined in config.scss | |
| @mixin ComponentA( | |
| // parameters | |
| $arg1: 'val', | |
| $arg2: 'val' | |
| ) { | |
| // keep scope on the object | |
| // get a handle to the module, sass doesn't provide 'this' | |
| // the scope should not include '.' or '#' so we can properly | |
| // leverage parent selector '&', a bug that will be resolved in | |
| // sass 4.0 | |
| $SCOPE: "component-a"; | |
| // private, shared | |
| // encapsulate placeholders and variables to keep the global | |
| // clean | |
| $_var: 'val'; | |
| %_example {} | |
| // scope selectors | |
| // use BEM syntax to communicate an element's relationship in | |
| // scope | |
| .#{$SCOPE}__element { | |
| @extend %_example; | |
| } | |
| // support the Class being extended as submodule | |
| @content; | |
| } | |
| // Init | |
| // OOCSS utilities. Use these in DOM or include mixins in SASS | |
| // partials | |
| @if ($INCLUDE_COMPONENT-A_HTML == true) { | |
| // default type | |
| .component-a { | |
| @include ComponentA; | |
| } | |
| // sub-type | |
| .component-a--submodule-type { | |
| @include ComponentA { | |
| content: 'these properties only exist in this'; | |
| } | |
| } | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Customisation of mixins must happen where they are declared. This is because in SASS 3.2, variables have block scope.
"This means that variables local to the mixin cannot be used within the passed style block and variables will resolve to the global value." - [SASS_REFERENCE]{http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_scope_and_content_blocks}