Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a plugin for your build system.
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { @include border-radius(10px); }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}You can install Sass on Windows, Mac, or Linux by downloading the package for
your operating system from GitHub and adding it to your PATH.
That's all—there are no external dependencies and nothing else you need to
install.
If you use Node.js, you can also install Sass using npm by running
npm install -g sass
However, please note that this will install the pure JavaScript implementation of Sass, which runs somewhat slower than the other options listed here. But it has the same interface, so it'll be easy to swap in another implementation later if you need a bit more speed!
See the Sass website for more ways to install Sass.
Once you have Sass installed, you can run the sass executable to compile
.sass and .scss files to .css files. For example:
sass source/stylesheets/index.scss build/stylesheets/index.css
Check out the Sass website for a guide on how to learn Sass!
title: Sass category: CSS layout: 2017/sheet tags: [Featured] updated: 2020-07-03 weight: -5 keywords:
- Variables
- mixins
- darken()
- adjust-color()
- "@for @each @while @if @else"
- "$list: (a b c)"
- "$map: (a: b, c: d)"
{: .-three-column}
{: .-intro}
This is a quick reference to Sass stylesheets.
- Sass documentation (sass-lang.com)
$red: #833;body {
color: $red;
}.markdown-body {
a {
color: blue;
&:hover {
color: red;
}
}
}text: {
align: center; // like text-align: center
transform: uppercase; // like text-transform: uppercase
}/* Block comments */
// Line comments@mixin heading-font {
font-family: sans-serif;
font-weight: bold;
}h1 {
@include heading-font;
}@mixin font-size($n) {
font-size: $n * 1.2em;
}body {
@include font-size(2);
}@mixin pad($n: 10px) {
padding: $n;
}body {
@include pad(15px);
}// Set a default value
$default-padding: 10px;@mixin pad($n: $default-padding) {
padding: $n;
}body {
@include pad(15px);
}.button {
···
}.push-button {
@extend .button;
}@import './other_sass_file';
@use './other_sass_file';The @import rule is discouraged because will get eventually removed from the language.
Instead, we should use the @use rule.
The .scss or .sass extension is optional.
rgb(100, 120, 140)
rgba(100, 120, 140, .5)
rgba($color, .5)mix($a, $b, 10%) // 10% a, 90% bdarken($color, 5%)
lighten($color, 5%)saturate($color, 5%)
desaturate($color, 5%)
grayscale($color)adjust-hue($color, 15deg)
complement($color) // like adjust-hue(_, 180deg)
invert($color)fade-in($color, .5) // aka opacify()
fade-out($color, .5) // aka transparentize() - halves the opacity
rgba($color, .5) // sets alpha to .5hue($color) // → 0deg..360deg
saturation($color) // → 0%..100%
lightness($color) // → 0%..100%
alpha($color) // → 0..1 (aka opacity())red($color) // → 0..255
green($color)
blue($color)// Changes by fixed amounts
adjust-color($color, $blue: 5)
adjust-color($color, $lightness: -30%) // like darken(_, 30%)
adjust-color($color, $alpha: -0.4) // like fade-out(_, .4)
adjust-color($color, $hue: 30deg) // like adjust-hue(_, 15deg)// Changes via percentage
scale-color($color, $lightness: 50%)// Changes one property completely
change-color($color, $hue: 180deg)
change-color($color, $blue: 250)Supported: $red $green $blue $hue $saturation $lightness $alpha
unquote('hello')
quote(hello)to-upper-case(hello)
to-lower-case(hello)str-length(hello world)
str-slice(hello, 2, 5) // "ello" - it's 1-based, not 0-based
str-insert("abcd", "X", 1) // "Xabcd"unit(3em) // 'em'
unitless(100px) // falsefloor(3.5)
ceil(3.5)
round(3.5)
abs(3.5)min(1, 2, 3)
max(1, 2, 3)percentage(.5) // 50%
random(3) // 0..3variable-exists(red) // checks for $red
mixin-exists(red-text) // checks for @mixin red-text
function-exists(redify)global-variable-exists(red)selector-append('.menu', 'li', 'a') // .menu li a
selector-nest('.menu', '&:hover li') // .menu:hover li
selector-extend(...)
selector-parse(...)
selector-replace(...)
selector-unify(...)feature-exists(global-variable-shadowing)- global-variable-shadowing
- extend-selector-pseudoclass
- units-level-3
- at-error
@for $i from 1 through 4 {
.item-#{$i} { left: 20px * $i; }
}$menu-items: home about services contact;
@each $item in $menu-items {
.photo-#{$item} {
background: url('images/#{$item}.jpg');
}
}$backgrounds: (home, 'home.jpg'), (about, 'about.jpg');
@each $id, $image in $backgrounds {
.photo-#{$id} {
background: url($image);
}
}$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}@if $position == 'left' {
position: absolute;
left: 0;
}
@else if $position == 'right' {
position: absolute;
right: 0;
}
@else {
position: static;
}.#{$klass} { ... } // Class
call($function-name) // Functions
@media #{$tablet}
font: #{$size}/#{$line-height}
url("#{$background}.jpg")$list: (a b c);
nth($list, 1) // starts with 1
length($list)
@each $item in $list { ... }$map: (key1: value1, key2: value2, key3: value3);
map-get($map, key1){: .-one-column}