- variables
- nested styles
- mixins
- mixins with parameters
- functions
- colors functions
Last active
September 8, 2017 16:22
-
-
Save diogorusso/1f1cf02baa92b62f57898d75492cbecb to your computer and use it in GitHub Desktop.
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
// Color functions | |
@color: navy; | |
h1 { | |
color: @color; | |
} | |
h2 { | |
color: lighten(@color, 20%); | |
} | |
h3 { | |
color: lighten(@color, 30%); | |
} | |
h4 { | |
color: lighten(@color, 40%); | |
} | |
#mypara { | |
.border-radius; | |
border-color: hsl(hue(@color), 45%, 60%); | |
border-width: 2px; | |
border-style:solid; | |
padding: 10px; | |
} |
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
// Functions | |
.border-radius(@radius: 5px) { | |
-mox-border-radius: @radius; | |
-webkit-border-radius: @radius; | |
-ms-border-radius: @radius; | |
border-radius: @radius; | |
} |
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
// Mixins | |
.commonTraits { | |
border-radius: 10px; | |
border: 1px solid green; | |
padding: 10px; | |
} | |
header { | |
color: #274D87; | |
.commonTraits; | |
} | |
footer { | |
color: #3264AF; | |
.commonTraits; | |
} |
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
// Parameterized Mixins | |
// using regular arguments | |
.border-radius(@radius: 5px) { | |
-mox-border-radius: @radius; | |
-webkit-border-radius: @radius; | |
-ms-border-radius: @radius; | |
border-radius: @radius; | |
} | |
// using named arguments with defaults | |
.customBorder(@color: black, @width: 1px) { | |
border: @width solid @color; | |
} | |
// using the @arguments parameter | |
.box-shadow(@x: 0, @y: 0, @blur:1px, @color: #000) { | |
-webkit-box-shadow: @arguments; | |
-mox-box-shadow: @arguments; | |
-ms-box-shadow: @arguments; | |
box-shadow: @arguments; | |
} | |
#mypara { | |
.border-radius; | |
.customBorder(blue, 5px); | |
.box-shadow(10px,10px,10px, gray); | |
padding: 10px; | |
} | |
// Mixins with Pattern Matching | |
.alert(warning) { | |
@color: goldenrod; | |
color: @color; | |
border-color: darken(@color, 10%); | |
} | |
.alert(error) { | |
@color: red; | |
color: lighten(@color, 10%); | |
border-color: darken(@color, 20%); | |
} | |
.alert(other, @color) { | |
color: lighten(@color, 10%); | |
border-color: darken(@color, 20%); | |
} | |
.alert(@_) { | |
display: block; | |
border-width: 2px; | |
border-style:solid; | |
padding: 10px; | |
} | |
@type: error; | |
#mypara { | |
.alert(@type); | |
} | |
// Guarded Mixins | |
.text3d(@color) when (lightness(@color) =< 50%) { | |
color: @color; | |
font-size: 32pt; | |
border: 2px solid gray; | |
text-shadow: 1px 1px 0px darken(@color, 5%), | |
2px 2px 0px darken(@color, 10%), | |
3px 3px 0px darken(@color, 15%), | |
4px 4px 0px darken(@color, 20%), | |
4px 4px 3px #000; | |
} | |
.text3d(@color) when (lightness(@color) > 50%) { | |
color: @color; | |
font-size: 32pt; | |
border: 2px dashed gray; | |
text-shadow: 1px 1px 0px lighten(@color, 5%), | |
2px 2px 0px lighten(@color, 10%), | |
3px 3px 0px lighten(@color, 15%), | |
4px 4px 0px lighten(@color, 20%), | |
4px 4px 3px #ccc; | |
} | |
.text3d(@_){ | |
font-size: 32pt; | |
padding: 5pt; | |
} | |
h1{ | |
.text3d(#666); | |
} |
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
// Nested Styles | |
body { | |
font-family: Helvetica, Arial, sans-serif; | |
p { | |
font-family:Times; | |
} | |
p#mypara { | |
font-family: "Courier New"; | |
} | |
} | |
#mypara { | |
color: #404040; | |
border: 1px solid #404040; | |
padding: 10px; | |
&:hover { | |
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
// Variables | |
@myColor1: navy; // named color value | |
@myColor2: #000080; // hex color value | |
@myStringVar: " with an appended string"; // string variable | |
@myFontSize: 24px; // numeric value | |
@thinBorder: 4px solid @myColor1; // multi-value variable | |
@paddingVar: 15px 15px 15px 35px; // multi-value variable | |
h1, h2 { | |
color: @myColor1; | |
} | |
#mypara { | |
font-size: @myFontSize; | |
border: @thinBorder; | |
padding: @paddingVar; | |
} | |
#mypara:after { | |
content: @myStringVar; | |
} |
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
$color: navy; | |
h1 { | |
color: $color; | |
background-color: grayscale(invert($color)); | |
} | |
h2 { | |
color: lighten($color, 20%); | |
} | |
h3 { | |
color: lighten($color, 30%); | |
} | |
h4 { | |
color: lighten($color, 40%); | |
} | |
#mypara { | |
@include border-radius; | |
border-color: hsl(hue($color), 45%, 60%); | |
border-width: 2px; | |
border-style:solid; | |
padding: 10px; | |
} |
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
// Functions | |
@mixin border-radius($radius: 5px) { | |
-moz-border-radius: $radius; | |
-webkit-border-radius: $radius; | |
-ms-border-radius: $radius; | |
border-radius: $radius; | |
} |
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
// Operations | |
$myColor: #f00; | |
$basepadding: 10px; | |
$basethickness: 4px; | |
#mypara { | |
color: $myColor; | |
border: $basethickness solid $myColor; | |
padding: $basepadding; | |
} | |
$gender: boy; | |
$myColor: if($gender=="boy", #00f, #f00); | |
// Mixins with Arguments | |
@mixin customBorder ($width, $color, $style) { | |
border: { | |
width: $width; | |
color: $color; | |
style: $style; | |
} | |
} | |
// using named arguments with defaults | |
@mixin customBorder2 ($width: 1px, $color: black, $style: solid) { | |
border: { | |
width: $width; | |
color: $color; | |
style: $style; | |
} | |
} | |
#mypara { | |
@include customBorder(3px, blue, dotted); | |
} | |
// Output Formating | |
body { | |
font-family: Helvetica, Arial, sans-serif; | |
p { | |
font-family:Times; | |
} | |
p#mypara { | |
font-family: "Courier New"; | |
} | |
} | |
#mypara { | |
color: #404040; | |
border: 1px solid #404040; | |
padding: 10px; | |
&:hover { | |
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
// Mixins | |
@mixin commonTraits { | |
border-radius: 10px; | |
border: 1px solid green; | |
padding: 10px; | |
} | |
header { | |
color: #274D87; | |
@include commonTraits; | |
} | |
footer { | |
color: #3264AF; | |
@include commonTraits; | |
} |
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
// Nested Styles | |
body { | |
font-family: Helvetica, Arial, sans-serif; | |
p { | |
font-family:Times; | |
} | |
p#mypara { | |
font-family: "Courier New"; | |
} | |
} | |
#mypara { | |
color: #404040; | |
border: 1px solid #404040; | |
padding: 10px; | |
&:hover { | |
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
// Variables | |
$myColor1: navy; // named color value | |
$myColor2: #000080; // hex color value | |
$myStringVar: " with an appended string"; // string variable | |
$myFontSize: 18px; // numeric value | |
$thinBorder: 1px solid $myColor1; // multi-value variable | |
$paddingVar: 15px 15px 15px 15px; // multi-value variable | |
h1, h2 { | |
color: $myColor1; | |
} | |
#mypara { | |
font-size: $myFontSize; | |
border: $thinBorder; | |
padding: $paddingVar; | |
} | |
#mypara:after { | |
content: $myStringVar; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment