Sass notes

author: Paul Kim

categories: sass, css

tags: sass, css

Sass Basics

.sass - indented syntax
.scss - sassy css syntax

Variables

SCSS
Sass

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Mixins

SCSS
Sass

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box {
  @include transform(rotate(30deg));
}

=transform($property)
  -webkit-transform: $property
  -ms-transform: $property
  transform: $property
.box
  +transform(rotate(30deg))

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Extend/Inheritance

SCSS
Sass

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333


// This CSS won't print because %equal-heights is never extended.
%equal-heights
  display: flex
  flex-wrap: wrap


.message
  @extend %message-shared


.success
  @extend %message-shared
  border-color: green


.error
  @extend %message-shared
  border-color: red


.warning
  @extend %message-shared
  border-color: yellow

.message,
.success,
.error,
.warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Be careful when using @mixins

Good use of mixin:

@mixin screen($width: auto, $height: auto) {
  width: $width;
  height: $height;
}

body {
  @include screen;
}

header {
  @include screen(100%);
}

main {
  @include screen(auto, 100%);
}

footer {
  @include screen(100%, 100%);
}

Good output:

body {
  width: auto;
  height: auto;
}

header {
  width: 100%;
  height: auto;
}

main {
  width: auto;
  height: 100%;
}

footer {
  width: 100%;
  height: 100%;
}

Bad use of mixin:

@mixin screen($width: auto, $height: auto) {
  width: $width;
  height: $height;
}

body {
  @include screen;
}

header {
  @include screen;
}

main {
  @include screen;
}

footer {
  @include screen;
}

Bad output:

body {
  width: auto;
  height: auto;
}

header {
  width: auto;
  height: auto;
}

main {
  width: auto;
  height: auto;
}

footer {
  width: auto;
  height: auto;
}

Fix bad use of mixin:

@mixin screen($width: auto, $height: auto) {
  width: $width;
  height: $height;
}

body,
header,
main,
footer {
  @include screen;
}

Fixed the bad output:

body,
header,
main,
footer {
  width: auto;
  height: auto;
}

Be careful when using mixins. It will cause sub-optimal css if used incorrectly. Use placeholders and extend instead of mixins for optimal css.

%screen {
  width: auto;
  height: auto;
}

body {
  @extend %screen;
}

header {
  @extend %screen;
}

main {
  @extend %screen;
}

footer {
  @extend %screen;
}

body,
header,
main,
footer {
  width: auto;
  height: auto;
}

Notes