Jeff Kamo jeffkamo
jeffkamo
/ gist:5645052
Last active
December 17, 2015 17:19
A SASS Mixin (written in SCSS) for converting pixels to rems.
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
| // rem (Mixin) | |
| // ----------- | |
| // | |
| // Return font-size with a rem value based on the desired pixel value, as well | |
| // as a fallback font-size value in em units (for IE8). | |
| // | |
| // Usage | |
| // | |
| // h1 { | |
| // @include rem(font-size, 25, $fallback: false); |
jeffkamo
/ sass-extending-embedded-trailing-ampersands.scss
Last active
December 21, 2015 11:49
Is Extending Classes that have embedded Trailing Ampersands inefficient? I shall investigate!
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
| // Extending Selectors that use trailing ampersands | |
| // ================================================ | |
| // Purpose | |
| // ------- | |
| // | |
| // To see what the final rendered output of extending | |
| // modules that include trailing ampersands in a deeply | |
| // nested selector. |
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 (v3.4.7) | |
| // Compass (v1.0.1) | |
| // ---- | |
| .c-button, | |
| %c-button { | |
| color: red; | |
| } |
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 (v3.4.7) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // file: `/styles/templates/_plp.scss` | |
| // --- | |
| .t-plp { |
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 (v3.4.7) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // file: `/styles/templates/_plp.scss` | |
| // --- | |
| .t-plp { |
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 (v3.4.7) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // file: `/styles/templates/_plp.scss` | |
| // --- | |
| .t-plp { |
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 (v3.4.7) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // file: `/styles/templates/_plp.scss` | |
| // --- | |
| .t-plp { |
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 (v3.4.7) | |
| // Compass (v1.0.1) | |
| // ---- | |
| /* Bad | |
| * | |
| * Notice how the `a` selector get's output a number of times | |
| * equal to how many comma separated selectors it's in? That | |
| * can lead to unnecessary bloat |
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 (v3.4.7) | |
| // Compass (v1.0.1) | |
| // ---- | |
| /* Bad example... | |
| * | |
| * Remember, your Sass doesn't have to look like your HTML | |
| */ | |
| body { |
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 (v3.4.9) | |
| // Compass (v1.0.1) | |
| // ---- | |
| @function foo($a: 1) { | |
| @return $a; | |
| } | |
| .bar-1 { |
OlderNewer