Super basic reference for sass basics
neat video tutorial reference: https://www.youtube.com/watch?v=_a5j7KoflTs
use .scss
various setup configs required to make sass feel good
- dont forget to follow tutorial to replicate config
variables
$var: val;
maps
$map: ( "a": 1, "b": 2 );
map-get($map, a);
nesting css classes
- requires interpolation
parent: 'main'
child: 'main__paragraph'
.main {
#{&}__paragraph {
}
}
partials files that can be included in other sass files (reuse css)
named _file.scss
(underscore prefix)
can be imported into other scss files by prepending
destination file with @import path
;
functions and mixins function example:
@function foo($arg) {
@return $arg;
}
mixin example 1:
@mixin foo($arg) {
display: flex;
justify-content: center;
align-items: center;
flex-direction: $arg;
}
.main {
@include foo(column);
}
mixin example 2:
$mobile: 800px;
@mixin mobile {
@media (max-width: $mobile) {
@content
}
}
.main {
@include mobile {
display: flex;
flex-direction: column;
}
}
extensions extend the styles of one component to another (in the same context)
.main {
width: 100%;
margin: 0 auto;
#{&}__paragraph1 {
...
}
#{&}__paragraph2 {
@extend .main__paragraph1
...
}
}
operations
sass does not rely on calc(...)
operations can be done raw:
width: 80% - 40%;
note that this does not support non-matched types, i.e.
width: 80% - 400px;
is an invalid operation, and calc
must still be used in this case