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
$my-list: design, statistics, english, yosup; | |
$color-list: #123456, #432156; |
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
(ripped from sass-lang.com docs) | |
@for $i from 1 through 3 { | |
.item-#{$i} { width: 2em * $i; } | |
} | |
(compiles to...) | |
.item-1 { | |
width: 2em; } |
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
@each $item in $my-list { | |
.#{item} { | |
background: #0099ff; } | |
} | |
(compiles to...) | |
.design { | |
background: #0099ff; } |
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
.ease-in-out { | |
-webkit-transition: all 0.3s ease-in-out; | |
-moz-transition: all 0.3s ease-in-out; | |
-o-transition: all 0.3s ease-in-out; | |
-ms-transition: all 0.3s ease-in-out; | |
transition: all 0.3s ease-in-out; | |
} | |
#logo-container { | |
@extend .ease-in-out; |
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($amount) { | |
-webkit-border-radius: $amount; | |
-moz-border-radius : $amount; | |
-o-border-radius : $amount; | |
-ms-border-radius : $amount; | |
border-radius : $amount; } | |
.container { | |
@include border-radius(4px); | |
text-align: center; |
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
.container { | |
-webkit-border-radius: 4px; | |
-moz-border-radius: 4px; | |
-o-border-radius: 4px; | |
-ms-border-radius: 4px; | |
border-radius: 4px; | |
text-align: center; | |
position: relative; } | |
.content { |
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 opacity($amount) { | |
-moz-opacity : $amount; | |
-khtml-opacity: $amount; | |
opacity : $amount; | |
filter : progid:DXImageTransform.Microsoft.Alpha(opacity=(#{$amount * 100})); | |
} | |
#link { @include opacity(0.5) } |
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
#link { | |
-moz-opacity: 0.5; | |
-khtml-opacity: 0.5; | |
opacity: 0.5; | |
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(50)); } |
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
// List | |
$box-shadow-properties: -webkit-box-shadow, -moz-box-shadow, box-shadow; | |
// Mixin waiting to be included | |
@mixin box-shadow-with-inset($box-shadow-params, $inset-params) { | |
// Iterates over each element in the list | |
@each $property in $box-shadow-properties { | |
// Uses interpolation to have the compiler then list out the properties listed above | |
#{$property}: $box-shadow-params, $inset-params; } | |
} |
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
.logobar-inner { | |
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25), inset 0px -1px 0px rgba(0, 0, 0, 0.1); | |
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25), inset 0px -1px 0px rgba(0, 0, 0, 0.1); | |
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25), inset 0px -1px 0px rgba(0, 0, 0, 0.1); } |