Roy Tomeij roytomeij
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.13) | |
| // Compass (v1.0.3) | |
| // ---- | |
| @mixin font($family, $weight: 400, $style: normal) { | |
| font-family: $family; | |
| font-weight: $weight; | |
| font-style: $style; | |
| } |
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.12) | |
| // Compass (v1.0.3) | |
| // ---- | |
| @mixin animation-keyframes { | |
| $animation-name: unique-id(); | |
| animation-name: $animation-name; | |
| @keyframes #{$animation-name} { |
roytomeij
/ global_variables.scss
Last active
December 25, 2015 15:49
Gist with all parts for "Sass CSS3 animation trajectory ascii art".
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
| $grid-width: str-length(nth($grid, 1)); | |
| $column-width: 100% / $grid-width; | |
| $row-height: 100% / length($grid); |
roytomeij
/ extend.scss
Created
July 26, 2013 07:19
Code example for http://roytomeij.com/2013/should-you-use-a-sass-mixin-or-extend.html
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
| %hide-text { | |
| text-indent: -9999px; | |
| overflow: hidden; | |
| } | |
| .foo { | |
| @extend %hide-text; | |
| } | |
| .bar { |
roytomeij
/ poor_mixin_usage.css
Created
July 26, 2013 07:16
Code example for http://roytomeij.com/2013/should-you-use-a-sass-mixin-or-extend.html
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
| .foo { | |
| text-indent: -9999px; | |
| overflow: hidden; | |
| } | |
| .bar { | |
| text-indent: -9999px; | |
| overflow: hidden; | |
| } |
roytomeij
/ good_mixin.scss
Created
July 26, 2013 07:25
Code example for http://roytomeij.com/2013/should-you-use-a-sass-mixin-or-extend.html
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
| @mixin border-radius($radius) { | |
| border-radius: $radius; | |
| } | |
| .foo { | |
| @include border-radius(5px); | |
| } | |
| .bar { | |
| @include border-radius(7px); |
roytomeij
/ poor_mixin_usage.scss
Last active
December 20, 2015 06:38
Code example for http://roytomeij.com/2013/should-you-use-a-sass-mixin-or-extend.html
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
| @mixin hide-text { | |
| text-indent: -9999px; | |
| overflow: hidden; | |
| } | |
| .foo { | |
| @include hide-text; | |
| } | |
| .bar { |
roytomeij
/ extend.css
Created
July 26, 2013 07:19
Code example for http://roytomeij.com/2013/should-you-use-a-sass-mixin-or-extend.html
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
| .foo, .bar, .baz { | |
| text-indent: -9999px; | |
| overflow: hidden; | |
| } |
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
| $buttons: ( | |
| (sales, $color-button-sales-border, $color-button-sales-top, $color-button-sales-bottom), | |
| (personal, $color-button-personal-border, $color-button-personal-top, $color-button-personal-bottom) | |
| ); | |
| @each $button in $buttons { | |
| .#{nth($button, 1)} { | |
| background-color: nth($button, 2); | |
| @include background-image(linear-gradient(nth($button, 3), nth($button, 4))); | |
| } |
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
| parent | |
| background: orange | |
| @supports ((perspective: 10px) or (-moz-perspective: 10px)) | |
| child | |
| background: blue |
NewerOlder