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