Created
January 27, 2014 19:25
-
-
Save lmartins/8655610 to your computer and use it in GitHub Desktop.
Creating SASS mixins aliases
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
<button>Alerted</button> |
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
// ---- | |
// libsass (v0.7.0) | |
// ---- | |
// Long mixin name from a library, probably prefixed with a | |
// namespace to avoid naming clashes. This is a pain to type | |
// out all the time | |
@mixin i-am-a-mixin-with-a-long-name($arg1, $arg2) { | |
body:after { | |
content: $arg2; | |
} | |
} | |
// Create a alias mixin with a shorter name that passes | |
// through all the arguments to the longer named mixin | |
// The docs for what the ... syntax is can be found at | |
// http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_arguments | |
@mixin alias($args...) { | |
@include i-am-a-mixin-with-a-long-name($args...) | |
} | |
// Now you can reference your short alias in your project! | |
@include alias('blah', 'hai'); |
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
body:after { | |
content: 'hai'; } |
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
<button>Alerted</button> |
hi @remisture found the solution.
I struggle too much with the Bootstrap 4 "media-breakpoint-up" and "media-breakpoint-down", they are just too long. So I created these:
@mixin media-from($name, $breakpoints: $grid-breakpoints) {
@include media-breakpoint-up($name, $breakpoints) {
@content;
}
}
@mixin media-max($name, $breakpoints: $grid-breakpoints) {
@include media-breakpoint-down($name, $breakpoints) {
@content;
}
}
@mixin media-between($lower, $upper, $breakpoints: $grid-breakpoints) {
@include media-breakpoint-between($lower, $upper, $breakpoints) {
@content;
}
}
@mixin media-only($name, $breakpoints: $grid-breakpoints) {
@include media-breakpoint-only($name, $breakpoints) {
@content;
}
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How can you support content blocks also?