Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

SASS Language Cheat Sheet (DRAFT) by

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Variables

$cool-red: #F44336;
h1.title {
color: $cool-red;
}

Mixins

A mixin lets you make groups of CSS declar­ations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible.
i.e. in scss file:
@mixin border­-ra­diu­s($­radius) {
border­-ra­dius: $radius;
}
.box { @include border­-ra­diu­s(1­0px); }

i.e. in sass file:
=borde­r-r­adi­us(­$ra­dius)
-webki­t-b­ord­er-­radius: $radius
-moz-b­ord­er-­radius: $radius
-ms-bo­rde­r-r­adius: $radius
border­-ra­dius: $radius

.box
+borde­r-r­adi­us(­10px)

@media

Used to define different style rules for different media types/­devices in SASS
i. e.: @media (min-w­idth: 768px) { p { font-size: 18px; } }
i. e.: @media (min-w­idth: 768px) and (max-w­idth: 1023px) { p { font-size: 18px; } }
 

@import

Use To import file or solder inside SCSS and SASS
i. e.:
To import _reset.scss into _reset.scss
@import 'reset';