2013-10-14 02:36:58 +00:00
|
|
|
---
|
|
|
|
title: Sass
|
2015-11-24 04:32:36 +00:00
|
|
|
category: CSS
|
2017-08-28 18:51:42 +00:00
|
|
|
tags: [Featured]
|
2020-07-04 13:33:09 +00:00
|
|
|
updated: 2020-07-03
|
2017-08-29 15:35:17 +00:00
|
|
|
weight: -5
|
2017-10-15 18:02:23 +00:00
|
|
|
keywords:
|
|
|
|
- Variables
|
|
|
|
- mixins
|
|
|
|
- darken()
|
|
|
|
- adjust-color()
|
|
|
|
- "@for @each @while @if @else"
|
2017-10-16 03:07:15 +00:00
|
|
|
- "$list: (a b c)"
|
|
|
|
- "$map: (a: b, c: d)"
|
2013-10-14 02:36:58 +00:00
|
|
|
---
|
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
## Basics
|
|
|
|
{: .-three-column}
|
|
|
|
|
2020-07-05 14:38:31 +00:00
|
|
|
### Introduction
|
|
|
|
{: .-intro}
|
|
|
|
|
|
|
|
This is a quick reference to [Sass stylesheets](https://sass-lang.com).
|
|
|
|
|
|
|
|
- [Sass documentation](https://sass-lang.com/documentation) _(sass-lang.com)_
|
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
### Variables
|
|
|
|
|
|
|
|
```scss
|
|
|
|
$red: #833;
|
2017-08-24 14:06:30 +00:00
|
|
|
```
|
2017-08-24 10:49:25 +00:00
|
|
|
|
2017-08-24 14:06:30 +00:00
|
|
|
```scss
|
2017-08-24 10:49:25 +00:00
|
|
|
body {
|
|
|
|
color: $red;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
### Nesting
|
|
|
|
|
|
|
|
```scss
|
|
|
|
.markdown-body {
|
2020-07-03 12:48:49 +00:00
|
|
|
a {
|
2017-08-24 10:49:25 +00:00
|
|
|
color: blue;
|
2020-07-03 12:48:49 +00:00
|
|
|
&:hover {
|
|
|
|
color: red;
|
|
|
|
}
|
2017-08-24 10:49:25 +00:00
|
|
|
}
|
2020-07-03 12:48:49 +00:00
|
|
|
}
|
|
|
|
```
|
2017-08-24 10:49:25 +00:00
|
|
|
|
2020-07-03 12:48:49 +00:00
|
|
|
#### to properties
|
|
|
|
```scss
|
|
|
|
text: {
|
|
|
|
align: center; // like text-align: center
|
|
|
|
transform: uppercase; // like text-transform: uppercase
|
2017-08-24 10:49:25 +00:00
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2017-08-24 14:06:30 +00:00
|
|
|
### Comments
|
|
|
|
|
|
|
|
```scss
|
|
|
|
/* Block comments */
|
|
|
|
// Line comments
|
|
|
|
```
|
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
### Mixins
|
|
|
|
|
|
|
|
```scss
|
|
|
|
@mixin heading-font {
|
|
|
|
font-family: sans-serif;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
2017-08-24 14:06:30 +00:00
|
|
|
```
|
2017-08-24 10:49:25 +00:00
|
|
|
|
2017-08-24 14:06:30 +00:00
|
|
|
```scss
|
2017-08-24 10:49:25 +00:00
|
|
|
h1 {
|
|
|
|
@include heading-font;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2018-11-16 19:28:11 +00:00
|
|
|
#### with parameters
|
2017-08-24 10:49:25 +00:00
|
|
|
|
|
|
|
```scss
|
|
|
|
@mixin font-size($n) {
|
|
|
|
font-size: $n * 1.2em;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2017-08-24 14:06:30 +00:00
|
|
|
```scss
|
|
|
|
body {
|
|
|
|
@include font-size(2);
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2018-11-16 19:28:11 +00:00
|
|
|
#### with default values
|
|
|
|
|
|
|
|
```scss
|
|
|
|
@mixin pad($n: 10px) {
|
|
|
|
padding: $n;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
```scss
|
|
|
|
body {
|
|
|
|
@include pad(15px);
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
#### with a default variable
|
|
|
|
|
|
|
|
```scss
|
|
|
|
// Set a default value
|
|
|
|
$default-padding: 10px;
|
|
|
|
```
|
|
|
|
|
|
|
|
```scss
|
|
|
|
@mixin pad($n: $default-padding) {
|
|
|
|
padding: $n;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
```scss
|
|
|
|
body {
|
|
|
|
@include pad(15px);
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
### Extend
|
|
|
|
|
|
|
|
```scss
|
|
|
|
.button {
|
|
|
|
···
|
|
|
|
}
|
2017-08-24 14:06:30 +00:00
|
|
|
```
|
2017-08-24 10:49:25 +00:00
|
|
|
|
2017-08-24 14:06:30 +00:00
|
|
|
```scss
|
2017-08-24 10:49:25 +00:00
|
|
|
.push-button {
|
|
|
|
@extend .button;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2017-08-24 14:06:30 +00:00
|
|
|
### Composing
|
|
|
|
|
|
|
|
```scss
|
2020-07-03 12:48:49 +00:00
|
|
|
@import './other_sass_file';
|
2022-02-14 11:17:06 +00:00
|
|
|
@use './other_sass_file';
|
2017-08-24 14:06:30 +00:00
|
|
|
```
|
|
|
|
|
2022-02-14 11:17:06 +00:00
|
|
|
The `@import` rule is discouraged because will get eventually [removed from the language](https://sass-lang.com/documentation/at-rules/import).
|
|
|
|
Instead, we should use the [`@use` rule](https://sass-lang.com/documentation/at-rules/use).
|
2017-08-24 14:06:30 +00:00
|
|
|
The `.scss` or `.sass` extension is optional.
|
|
|
|
|
2016-02-16 03:32:26 +00:00
|
|
|
## Color functions
|
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
### rgba
|
|
|
|
|
2016-02-16 03:32:26 +00:00
|
|
|
```scss
|
|
|
|
rgb(100, 120, 140)
|
|
|
|
rgba(100, 120, 140, .5)
|
|
|
|
rgba($color, .5)
|
|
|
|
```
|
|
|
|
|
|
|
|
### Mixing
|
|
|
|
|
|
|
|
```scss
|
2017-08-24 14:06:30 +00:00
|
|
|
mix($a, $b, 10%) // 10% a, 90% b
|
2016-02-16 03:32:26 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
### Modifying HSLA
|
|
|
|
|
|
|
|
```scss
|
|
|
|
darken($color, 5%)
|
|
|
|
lighten($color, 5%)
|
2017-08-24 10:49:25 +00:00
|
|
|
```
|
2016-02-16 03:32:26 +00:00
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
```scss
|
2016-02-16 03:32:26 +00:00
|
|
|
saturate($color, 5%)
|
|
|
|
desaturate($color, 5%)
|
|
|
|
grayscale($color)
|
2017-08-24 10:49:25 +00:00
|
|
|
```
|
2016-02-16 03:32:26 +00:00
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
```scss
|
2016-02-16 03:32:26 +00:00
|
|
|
adjust-hue($color, 15deg)
|
2018-11-07 22:02:07 +00:00
|
|
|
complement($color) // like adjust-hue(_, 180deg)
|
2016-02-16 03:32:26 +00:00
|
|
|
invert($color)
|
2017-08-24 10:49:25 +00:00
|
|
|
```
|
2016-02-16 03:32:26 +00:00
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
```scss
|
2017-08-24 14:06:30 +00:00
|
|
|
fade-in($color, .5) // aka opacify()
|
|
|
|
fade-out($color, .5) // aka transparentize() - halves the opacity
|
|
|
|
rgba($color, .5) // sets alpha to .5
|
2016-02-16 03:32:26 +00:00
|
|
|
```
|
|
|
|
|
2017-10-14 19:30:22 +00:00
|
|
|
### Getting individual values
|
|
|
|
|
|
|
|
#### HSLA
|
2016-02-16 03:32:26 +00:00
|
|
|
|
|
|
|
```scss
|
2017-10-14 19:30:22 +00:00
|
|
|
hue($color) // → 0deg..360deg
|
|
|
|
saturation($color) // → 0%..100%
|
|
|
|
lightness($color) // → 0%..100%
|
|
|
|
alpha($color) // → 0..1 (aka opacity())
|
|
|
|
```
|
|
|
|
|
|
|
|
#### RGB
|
|
|
|
|
2020-07-03 12:48:49 +00:00
|
|
|
```scss
|
2017-10-14 19:30:22 +00:00
|
|
|
red($color) // → 0..255
|
|
|
|
green($color)
|
|
|
|
blue($color)
|
2016-02-16 03:32:26 +00:00
|
|
|
```
|
|
|
|
|
2017-10-14 19:30:22 +00:00
|
|
|
See: [hue()](http://sass-lang.com/documentation/Sass/Script/Functions.html#hue-instance_method), [red()](http://sass-lang.com/documentation/Sass/Script/Functions.html#red-instance_method)
|
|
|
|
|
2017-08-24 10:57:41 +00:00
|
|
|
### Adjustments
|
2016-02-16 03:32:26 +00:00
|
|
|
|
|
|
|
```scss
|
2017-08-24 14:06:30 +00:00
|
|
|
// Changes by fixed amounts
|
2016-02-16 03:32:26 +00:00
|
|
|
adjust-color($color, $blue: 5)
|
2017-08-24 14:06:30 +00:00
|
|
|
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)
|
2017-08-24 10:49:25 +00:00
|
|
|
```
|
2016-02-16 03:53:20 +00:00
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
```scss
|
2017-08-24 14:06:30 +00:00
|
|
|
// Changes via percentage
|
2016-02-16 03:53:20 +00:00
|
|
|
scale-color($color, $lightness: 50%)
|
2017-08-24 10:49:25 +00:00
|
|
|
```
|
2016-02-16 03:53:20 +00:00
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
```scss
|
2017-08-24 14:06:30 +00:00
|
|
|
// Changes one property completely
|
2016-02-16 03:53:20 +00:00
|
|
|
change-color($color, $hue: 180deg)
|
|
|
|
change-color($color, $blue: 250)
|
2016-02-16 03:32:26 +00:00
|
|
|
```
|
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
Supported: `$red` `$green` `$blue` `$hue` `$saturation` `$lightness` `$alpha`
|
|
|
|
|
2016-02-16 03:32:26 +00:00
|
|
|
## Other functions
|
|
|
|
|
2016-02-16 03:53:20 +00:00
|
|
|
### Strings
|
2016-02-16 03:32:26 +00:00
|
|
|
|
|
|
|
```scss
|
|
|
|
unquote('hello')
|
|
|
|
quote(hello)
|
2017-08-24 10:49:25 +00:00
|
|
|
```
|
2016-02-16 03:53:20 +00:00
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
```scss
|
2016-02-16 03:53:20 +00:00
|
|
|
to-upper-case(hello)
|
|
|
|
to-lower-case(hello)
|
2017-08-24 10:49:25 +00:00
|
|
|
```
|
2016-02-16 03:53:20 +00:00
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
```scss
|
2016-02-16 03:53:20 +00:00
|
|
|
str-length(hello world)
|
2017-08-24 14:06:30 +00:00
|
|
|
str-slice(hello, 2, 5) // "ello" - it's 1-based, not 0-based
|
|
|
|
str-insert("abcd", "X", 1) // "Xabcd"
|
2016-02-16 03:53:20 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
### Units
|
|
|
|
|
|
|
|
```scss
|
2017-08-24 14:06:30 +00:00
|
|
|
unit(3em) // 'em'
|
|
|
|
unitless(100px) // false
|
2016-02-16 03:32:26 +00:00
|
|
|
```
|
|
|
|
|
2016-02-16 03:53:20 +00:00
|
|
|
### Numbers
|
|
|
|
|
|
|
|
```scss
|
|
|
|
floor(3.5)
|
|
|
|
ceil(3.5)
|
|
|
|
round(3.5)
|
|
|
|
abs(3.5)
|
2017-08-24 10:49:25 +00:00
|
|
|
```
|
2016-02-16 03:53:20 +00:00
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
```scss
|
2016-02-16 03:53:20 +00:00
|
|
|
min(1, 2, 3)
|
|
|
|
max(1, 2, 3)
|
2017-08-24 10:49:25 +00:00
|
|
|
```
|
2016-02-16 03:53:20 +00:00
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
```scss
|
2017-08-24 14:06:30 +00:00
|
|
|
percentage(.5) // 50%
|
|
|
|
random(3) // 0..3
|
2016-02-16 03:53:20 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
### Misc
|
|
|
|
|
|
|
|
```scss
|
2017-08-24 14:06:30 +00:00
|
|
|
variable-exists(red) // checks for $red
|
|
|
|
mixin-exists(red-text) // checks for @mixin red-text
|
2016-02-16 03:53:20 +00:00
|
|
|
function-exists(redify)
|
2017-08-24 10:49:25 +00:00
|
|
|
```
|
2016-02-16 03:53:20 +00:00
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
```scss
|
2016-02-16 03:53:20 +00:00
|
|
|
global-variable-exists(red)
|
|
|
|
```
|
|
|
|
|
|
|
|
```scss
|
2017-08-24 14:06:30 +00:00
|
|
|
selector-append('.menu', 'li', 'a') // .menu li a
|
|
|
|
selector-nest('.menu', '&:hover li') // .menu:hover li
|
2016-02-16 03:53:20 +00:00
|
|
|
selector-extend(...)
|
|
|
|
selector-parse(...)
|
|
|
|
selector-replace(...)
|
|
|
|
selector-unify(...)
|
|
|
|
```
|
|
|
|
|
|
|
|
## Feature checks
|
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
### Feature check
|
|
|
|
|
2016-02-16 03:53:20 +00:00
|
|
|
```scss
|
|
|
|
feature-exists(global-variable-shadowing)
|
|
|
|
```
|
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
### Features
|
|
|
|
|
2016-02-16 03:53:20 +00:00
|
|
|
* global-variable-shadowing
|
|
|
|
* extend-selector-pseudoclass
|
|
|
|
* units-level-3
|
|
|
|
* at-error
|
|
|
|
|
2016-02-16 03:32:26 +00:00
|
|
|
## Loops
|
|
|
|
|
2016-02-16 03:40:55 +00:00
|
|
|
### For loops
|
|
|
|
|
|
|
|
```scss
|
|
|
|
@for $i from 1 through 4 {
|
|
|
|
.item-#{$i} { left: 20px * $i; }
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
### Each loops (simple)
|
|
|
|
|
|
|
|
```scss
|
|
|
|
$menu-items: home about services contact;
|
|
|
|
|
|
|
|
@each $item in $menu-items {
|
|
|
|
.photo-#{$item} {
|
|
|
|
background: url('images/#{$item}.jpg');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
### Each loops (nested)
|
|
|
|
```scss
|
|
|
|
$backgrounds: (home, 'home.jpg'), (about, 'about.jpg');
|
|
|
|
|
|
|
|
@each $id, $image in $backgrounds {
|
|
|
|
.photo-#{$id} {
|
|
|
|
background: url($image);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
### While loops
|
|
|
|
|
2016-02-16 03:32:26 +00:00
|
|
|
```scss
|
|
|
|
$i: 6;
|
|
|
|
@while $i > 0 {
|
|
|
|
.item-#{$i} { width: 2em * $i; }
|
|
|
|
$i: $i - 2;
|
|
|
|
}
|
|
|
|
```
|
2012-07-03 08:09:36 +00:00
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
## Other features
|
|
|
|
|
|
|
|
### Conditionals
|
2016-02-16 03:40:55 +00:00
|
|
|
|
|
|
|
```scss
|
|
|
|
@if $position == 'left' {
|
2016-02-16 03:42:01 +00:00
|
|
|
position: absolute;
|
2016-02-16 03:40:55 +00:00
|
|
|
left: 0;
|
|
|
|
}
|
2020-07-03 12:48:49 +00:00
|
|
|
@else if $position == 'right' {
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
}
|
2016-02-16 03:42:01 +00:00
|
|
|
@else {
|
|
|
|
position: static;
|
2016-02-16 03:40:55 +00:00
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
### Interpolation
|
2012-07-03 08:09:36 +00:00
|
|
|
|
2016-02-16 03:32:26 +00:00
|
|
|
```scss
|
2017-08-24 14:06:30 +00:00
|
|
|
.#{$klass} { ... } // Class
|
|
|
|
call($function-name) // Functions
|
2016-02-16 03:32:26 +00:00
|
|
|
|
2016-03-28 06:56:43 +00:00
|
|
|
@media #{$tablet}
|
|
|
|
font: #{$size}/#{$line-height}
|
|
|
|
url("#{$background}.jpg")
|
2016-02-16 03:32:26 +00:00
|
|
|
```
|
2012-07-03 08:09:36 +00:00
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
### Lists
|
2012-07-03 08:09:36 +00:00
|
|
|
|
2016-02-16 03:32:26 +00:00
|
|
|
```scss
|
|
|
|
$list: (a b c);
|
2012-10-11 08:13:19 +00:00
|
|
|
|
2017-08-24 14:06:30 +00:00
|
|
|
nth($list, 1) // starts with 1
|
2016-02-16 03:32:26 +00:00
|
|
|
length($list)
|
2012-10-11 08:13:19 +00:00
|
|
|
|
2016-02-16 03:32:26 +00:00
|
|
|
@each $item in $list { ... }
|
|
|
|
```
|
2016-01-07 04:47:48 +00:00
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
### Maps
|
2016-02-16 03:40:55 +00:00
|
|
|
|
|
|
|
```scss
|
|
|
|
$map: (key1: value1, key2: value2, key3: value3);
|
|
|
|
|
|
|
|
map-get($map, key1)
|
|
|
|
```
|
|
|
|
|
2017-08-24 10:49:25 +00:00
|
|
|
## See also
|
|
|
|
{: .-one-column}
|
2016-01-07 04:47:48 +00:00
|
|
|
|
|
|
|
- <http://sass-lang.com/documentation/Sass/Script/Functions.html>
|
2016-02-16 03:40:55 +00:00
|
|
|
- <http://sass-lang.com/documentation/file.SASS_REFERENCE.html#sassscript>
|