ng to behave just like %message-shared.

Extend/Inheritance That means anywhere that %message-

Using @extend lets you share a set shared shows
of CSS properties from one selector to up, .message, .success, .error, & .warning
another. In our example we're going to will too. The magic happens in the
create a simple series of messaging for generated CSS , where each of these
errors, warnings and successes using classes will get the same CSS properties
another feature which goes hand in as %message-shared. This helps you avoid
hand with extend, placeholder classes. A having to write multiple class names
placeholder class is a special type of on HTML elements.
class that only prints when it is extended, You can extend most
and can help keep your simple CSS selectors in addition
compiled CSS neat and clean. to placeholder classes in Sass, but using
 SCSS placeholders is the easiest way to
 Sass make sure you aren't extending a class
 CSS
that's nested elsewhere in your
styles, which can result in unintended
selectors in your CSS.
Note that the CSS in %equal-heights isn't
SCSS SYNTAX generated, because %equal-heights is
/* This CSS will print because %message-
shared is extended. */ never extended.
%message-shared {
border: 1px solid #ccc;
padding: 10px; Operators
color: #333; Doing math in your CSS is very helpful.
}
Sass has a handful of standard math
// This CSS won't print because %equal- operators like +, -, *, math.div(), and %. In
heights is never extended.
%equal-heights { our example we're going to do some
display: flex;
flex-wrap: wrap;
simple math to calculate widths for
} an article and aside.
.message {  SCSS
@extend %message-shared;  Sass
}  CSS
.success { SCSS SYNTAX
@extend %message-shared; @use "sass:math";
border-color: green;
} .container {
display: flex;
.error { }
@extend %message-shared;
border-color: red; article[role="main"] {
} width: math.div(600px, 960px) * 100%;
}
.warning {
@extend %message-shared; aside[role="complementary"] {
border-color: yellow; width: math.div(300px, 960px) * 100%;
} margin-left: auto;
}
What the above code does is
CSS OUTPUT
tells .message, .success, .error, and .warni
.container { }
display: flex; h1 {
}
@include heading-font;
article[role="main"] { }
width: 62.5%; with parameters
} @mixin font-size($n) {
aside[role="complementary"] {
font-size: $n * 1.2em;
width: 31.25%; }
margin-left: auto; body {
} @include font-size(2);
}
with default values
We've created a very simple fluid grid, @mixin pad($n: 10px) {
based on 960px. Operations in Sass let padding: $n;
}
us do something like take pixel values
body {
and convert them to percentages @include pad(15px);
without much hassle. }
with a default variable
// Set a default value
$default-padding: 10px;
@mixin pad($n: $default-padding) {
padding: $n;
Variables }
body {
$red: #833; @include pad(15px);
body { }
color: $red;
} Extend

Nesting .button {
···
.markdown-body { }
a{ .push-button {
color: blue; @extend .button;
&:hover { }
color: red;
} Composing
}
@import './other_sass_file';
}
@use './other_sass_file';
to properties
The @import rule is discouraged because will get
text: {
eventually removed from the language.
align: center; // like text-align: center
Instead, we should use the @use rule.
transform: uppercase; // like text-transform:
The .scss or .sass extension is optional.
uppercase
#Color functions
}
Comments rgba
/* Block comments */ rgb(100, 120, 140)
// Line comments rgba(100, 120, 140, .5)
Mixins rgba($color, .5)
Mixing
@mixin heading-font {
font-family: sans-serif; mix($a, $b, 10%) // 10% a, 90% b
font-weight: bold;
Modifying HSLA
darken($color, 5%) str-slice(hello, 2, 5) // "ello" - it's 1-based, not 0-
lighten($color, 5%) based
saturate($color, 5%) str-insert("abcd", "X", 1) // "Xabcd"
desaturate($color, 5%) Units
grayscale($color)
adjust-hue($color, 15deg) unit(3em) // 'em'
complement($color) // like adjust-hue(_, 180deg) unitless(100px) // false
invert($color)
fade-in($color, .5) // aka opacify() Numbers
fade-out($color, .5) // aka transparentize() - halves
the opacity floor(3.5)
rgba($color, .5) // sets alpha to .5 ceil(3.5)
round(3.5)
Getting individual values abs(3.5)
min(1, 2, 3)
HSLA max(1, 2, 3)
hue($color) // → 0deg..360deg percentage(.5) // 50%
saturation($color) // → 0%..100% random(3) // 0..3
lightness($color) // → 0%..100%
alpha($color) // → 0..1 (aka opacity()) Misc
RGB
red($color) // → 0..255 variable-exists(red) // checks for $red
green($color) mixin-exists(red-text) // checks for @mixin red-text
blue($color) function-exists(redify)
See: hue(), red() global-variable-exists(red)
selector-append('.menu', 'li', 'a') // .menu li a
Adjustments selector-nest('.menu', '&:hover li') // .menu:hover li
selector-extend(...)
// Changes by fixed amounts selector-parse(...)
adjust-color($color, $blue: 5) selector-replace(...)
adjust-color($color, $lightness: -30%) // like selector-unify(...)
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) Feature check
Supported: $red $green $blue $hue $saturation $ligh
feature-exists(global-variable-shadowing)
tness $alpha
#Other functions Features

global-variable-shadowing
extend-selector-pseudoclass
units-level-3
at-error
Strings
For loops
unquote('hello')
quote(hello) @for $i from 1 through 4 {
to-upper-case(hello) .item-#{$i} { left: 20px * $i; }
to-lower-case(hello) }
str-length(hello world) Each loops (simple)
$menu-items: home about services contact; length($list)

@each $item in $menu-items { @each $item in $list { ... }

.photo-#{$item} {
Maps
background: url('images/#{$item}.jpg');
} $map: (key1: value1, key2: value2, key3: value3);
}
Each loops (nested) map-get($map, key1)

$backgrounds: (home, 'home.jpg'), (about,

'about.jpg');

@each $id, $image in $backgrounds {

.photo-#{$id} {
background: url($image);
}
}
While loops

$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}

Conditionals

@if $position == 'left' {

position: absolute;
left: 0;
}
@else if $position == 'right' {
position: absolute;
right: 0;
}
@else {
position: static;
}
Interpolation

.#{$klass} { ... } // Class

call($function-name) // Functions

@media #{$tablet}
font: #{$size}/#{$line-height}
url("#{$background}.jpg")
Lists

$list: (a b c);

nth($list, 1) // starts with 1