Sass CSS Preprocessor¶
Info
Since Version 3 SCSS is the official Syntax, which adds braces to the definition. There,fore only this format is described here.
Variables¶
To reuse the same information again, variables may be used. They need a pound sign in front.
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Nesting¶
With nesting the CSS will become more organized:
div {
// will become: div a { .... }
a {
color: red;
// The parent selector helps to further extend the same element.
// div a:hover { .... }
&:hover {
font-weight: bold;
}
}
}
.test {
// It can also be used to style the outer selector in a certain context, such
// as a body set to use a right-to-left language.
// [dir=rtl] .test { ... }
[dir=rtl] & {
margin-left: 0;
margin-right: 10px;
}
// You can even use it as an argument to pseudo-class selectors.
// :not(.test) { ... }
:not(&) {
opacity: 0.8;
}
// Also a suffix to the existing class can be set.
// .test--dark { ... }
&--dark {
color: white;
}
Mixins¶
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box { @include transform(rotate(30deg)); }
Extend¶
You define a block of scripts as Extend block, which may be used anywhere:
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-shared;
}
Operators¶
Mathematical operators are possible, too.
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
At-rules¶
@use
,@forward
,@import
loads mixins, functions, and variables.@mixin
and @include makes it easy to re-use chunks of styles.@function
defines custom functions that can be used in SassScript expressions.@extend
allows selectors to inherit styles from one another.@at-root
puts styles within it at the root of the CSS document.- Flow control rules like
@if
,@each
,@for
and@while
control whether or how many times styles are emitted.
Builtin Modules¶
sass:math
module provides functions that operate on numbers.sass:string
module makes it easy to combine, search, or split apart strings.sass:color
module generates new colors based on existing ones, making it easy to build color themes.sass:list
module lets you access and modify values in lists.sass:map
module makes it possible to look up the value associated with a key in a map, and much more.sass:selector
module provides access to Sass’s powerful selector engine.sass:meta
module exposes the details of Sass’s inner workings.
More details can be found in Sass Documentation.
Last update: January 1, 2021