Some experiment with sexy FX
A Pen by Erick Jones on CodePen.
| # --------------------------------------------------------------------------- | |
| # | |
| # Description: This file holds all my BASH configurations and aliases | |
| # | |
| # Sections: | |
| # 1. Environment Configuration | |
| # 2. Make Terminal Better (remapping defaults and adding functionality) | |
| # 3. File and Folder Management | |
| # 4. Searching | |
| # 5. Process Management |
| @mixin remify($property, $sizes) { | |
| $pixelSizes: (); | |
| $remSizes: (); | |
| @each $s in $sizes { | |
| $pixelSizes: append($pixelSizes, $s * 1px); | |
| $remSizes: append($remSizes, rem($s)); | |
| } | |
| #{$property}: $pixelSizes; |
| // Defaults | |
| $base_font_size: 16px; | |
| $rem_fallback: true; | |
| // Usage: rem(16px); | |
| @function rem( | |
| $size, | |
| $base_font_size: $base_font_size | |
| ) { | |
| @return #{$size / $base_font_size}rem; |
Some experiment with sexy FX
A Pen by Erick Jones on CodePen.
| .green-dog { | |
| -webkit-transform: rotate(30deg); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */ | |
| -ms-transform: rotate(30deg); /* IE 9 */ | |
| transform: rotate(30deg); /* IE 10, Fx 16+, Op 12.1+ */ | |
| } |
| @mixin transform-rotate($rotateValue) { | |
| -webkit-transform: rotate($rotateValue); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */ | |
| -ms-transform: rotate($rotateValue); /* IE 9 */ | |
| transform: rotate($rotateValue); /* IE 10, Fx 16+, Op 12.1+ */ | |
| } | |
| .green-dog { | |
| @include transform-rotate(30deg); | |
| } |
| .black-dog { | |
| background-color: #333; | |
| } | |
| .black-cat { | |
| @extend .black-dog; | |
| width:20px; | |
| } |
| .black-dog, .black-cat { | |
| background-color: #333; | |
| } | |
| .black-cat { | |
| width: 20px; | |
| } |
| @import '_reset'; | |
| // The rest of your code goes here |
| * { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| } |