You're not abusing SASS enough
Placeholder selectors
vs. mixins
=foo
color: red
.foo-1
+foo
.foo-2
+foo
%bar
color: green
.bar-1
@extend %bar
.bar-2
@extend %bar
.foo-1 {
color: red; }
.foo-2 {
color: red; }
.bar-1, .bar-2 {
color: green; }
Combination of both
=button($background-color, $font-color)
color: $font-color
background-color: $background-color
border-radius: 5px
line-height: 10px
.button-brown
+button(saddlebrown, white)
.button-green
+button(aquamarine, black)
%button-common
border-radius: 5px
line-height: 10px
=button($background-color, $font-color)
@extend %button-common
color: $font-color
background-color: $background-color
.button-brown
+button(saddlebrown, white)
.button-green
+button(aquamarine, black)
.button-brown {
color: white;
background-color: saddlebrown;
border-radius: 5px;
line-height: 10px; }
.button-green {
color: black;
background-color: aquamarine;
border-radius: 5px;
line-height: 10px; }
.button-brown, .button-green {
border-radius: 5px;
line-height: 10px; }
.button-brown {
color: white;
background-color: saddlebrown; }
.button-green {
color: black;
background-color: aquamarine; }
Parent selector
.foo
&.bar
background: blue
&:hover
background: red
&:after
content: ''
.body-class &
background: pink
& + &
margin-left: 20px
@at-root #{selector-unify(&, div)}
background: orange
.foo.bar {
background: blue; }
.foo:hover {
background: red; }
.foo:after {
content: ""; }
.body-class .foo {
background: pink; }
.foo + .foo {
margin-left: 20px; }
div.foo {
background: orange; }
OOCSS with parent selector
.button
font-size: 10px
line-height: 20px
&-warning
background: red
color: white
&-success
background: green
color: black
.button {
font-size: 10px;
line-height: 20px; }
.button-warning {
background: red;
color: white; }
.button-success {
background: green;
color: black; }
@content directive
=ie6-only
* html &
@content
.foo
+ie6-only
background-image: url(/logo.gif)
=desktop
@media only screen and (min-width: 769px)
@content
.foo
background: blue
+desktop
background: red
* html .foo {
background-image: url(/logo.gif); }
.foo {
background: blue; }
@media only screen and (min-width: 769px) {
.foo {
background: red; } }
Breakpoint map
$limit: 768px
$breakpoints: ('mobile' : '(max-width: #{$limit})', 'desktop': '(min-width: #{$limit + 1})')
=respond-to($breakpoint)
@media #{map-get($breakpoints, $breakpoint)}
@content
.foo
+respond-to(mobile)
color: blue
+respond-to(desktop)
color: red
@media (max-width: 768px) {
.foo {
color: blue; } }
@media (min-width: 769px) {
.foo {
color: red; } }
JSONize the breakpoint map
$limit: 768px
$breakpoints: ('mobile' : '(max-width: #{$limit})', 'desktop': '(min-width: #{$limit + 1})')
$breakpoint-json: null
@each $name, $value in $breakpoints
$breakpoint-json: append($breakpoint-json,
"\"#{$name}\":\"#{map-get($breakpoints, $name)}\"", comma)
$breakpoint-json: "{#{$breakpoint-json}}"
body::before
content: $breakpoint-json
display: none
body::before {
content: '{"mobile":"(max-width: 768px)", "desktop":"(min-width: 769px)"}';
display: none; }
Things to check out
Q&A
You're not abusing SASS enough
By mzgajner
You're not abusing SASS enough
- 1,008