Last active
August 29, 2015 13:56
-
-
Save micahgodbolt/9004979 to your computer and use it in GitHub Desktop.
Code from PDX Sass demo given February 2014.
This file contains hidden or 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
/////////////////////////////////// | |
/// Major Features of Sass 3.3 | |
/////////////////////////////////// | |
// @at-root | |
.widget { | |
@at-root .body { | |
background: red; | |
} | |
@at-root { | |
.header { | |
color: green; | |
} | |
.footer { | |
color: blue; | |
} | |
} | |
} | |
.widget { | |
@media (min-width: 400px) { | |
float: left; | |
@supports (display:flex) { | |
display: flex; | |
@at-root(with: media) { // media rule supports | |
img { | |
display: block; | |
} | |
} | |
} | |
} | |
} | |
// New & functionality | |
http://sassmeister.com/gist/8882732 | |
///////////// | |
// maps | |
$colors: ( | |
primary: blue, | |
secondary: red, | |
tertiary: green, | |
); | |
$break-points: ( | |
small: 500px, | |
medium: 800px, | |
large: 1100px, | |
); | |
$navigation: ( | |
background: blue, | |
color: green, | |
line-height: 1.3, | |
); | |
div { | |
@media (min-width: map-get($break-points, medium)){ | |
color: map-get($colors, primary); | |
} | |
} | |
header { | |
background: map-get($navigation, background); | |
color: map-get($navigation, color); | |
line-height: map-get($navigation, line-height); | |
} | |
///////////////////////////// | |
$colors: ( | |
primary: blue, | |
secondary: red, | |
tertiary: green, | |
); | |
@function g($map, $key) { | |
@return map-get($map, $key); | |
} | |
div { | |
color: g($colors, primary); | |
} | |
////////////////////////// | |
$navigation: ( | |
background: blue, | |
color: green, | |
line-height: 1.3, | |
); | |
@mixin print-styles($map){ | |
@each $property, $value in $map { | |
#{$property}: $value; | |
} | |
} | |
div { | |
@include print-styles($navigation); | |
} | |
///////////// | |
$colors: ( | |
primary: blue, | |
secondary: red, | |
tertiary: green, | |
); | |
$break-points: ( | |
small: 500px, | |
medium: 800px, | |
large: 1100px, | |
); | |
@function g($map, $key, $unit: px) { | |
$value: map-get($map, $key); | |
@if type-of($value) == number { | |
@if $unit == unit($value) { | |
@return $value; | |
} | |
@else { | |
@return $value / 16px + em; | |
} | |
} | |
@else { | |
@return $value; | |
} | |
} | |
div { | |
@media (min-width: g($break-points, large, px)) { | |
background: g($colors, primary); | |
} | |
} | |
/////////////////////////////////// | |
/// Misc New Features | |
/////////////////////////////////// | |
//// determine list seperator | |
$a-list: a b c d e; | |
$another-list: 1, 2, 3, 4, 5; | |
div { | |
a-list: list-separator($a-list); | |
another-list: list-separator($another-list); | |
} | |
//// set-nth in a list | |
$a-list: a b c d e; | |
$another-list: 1, 2, 3, 4, 5; | |
$a-third-list: set-nth($a-list, 5, f); | |
div { | |
a-third-list: $a-third-list; | |
} | |
/////////// Negative nth | |
$a-list: a b c d e; | |
div { | |
test: nth($a-list, 1); | |
} | |
/////////// get a unique ID | |
div { | |
test: unique-id(); | |
test: unique-id(); | |
test: unique-id(); | |
} | |
/////////// Function via Call function | |
$a-list: a b c d e; | |
div { | |
$function: nth; | |
$list: $a-list; | |
$number: 2; | |
test: call($function, $list , $number); | |
} | |
////////////// testing for vars functions and mixins | |
$var: 10; | |
$global-var: 20; | |
@function a-function(){ | |
@return "hello world"; | |
} | |
@mixin a-mixin() { | |
background: blue; | |
} | |
div { | |
var: variable-exists(var); | |
global-var: global-variable-exists(global-var); | |
function: function-exists(a-function); | |
mixin: mixin-exists(a-mixin); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment