Intro to Sass
Variables $
1 2 3 4 5 6 7
| $font-stack: Helvetica, sans-serif; $primary-color: #333;
body { font: 100% $font-stack; color: $primary-color; }
|
Interpolation #{}
- Interpolation is useful for injecting values into strings.
Nesting
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| nav { ul { margin: 0; padding: 0; list-style: none; }
li { display: inline-block; }
a { padding: 6px 12px; text-decoration: none; } }
|
Partials
- Partial files start with a leading underscore.
- When we’re using
@use 'base'
, don’t need to include the file extension.
- Only
Dart Sass
currently supports @use
. Users of other implementations must use the @import
rule instead.
1 2 3 4 5 6 7 8
| $font-stack: Helvetica, sans-serif; $primary-color: #333;
body { font: 100% $font-stack; color: $primary-color; }
|
1 2 3 4 5 6 7
| @use 'base';
.inverse { background-color: base.$primary-color; color: white; }
|
Mixins
- Make groups of CSS declarations that you want to reuse.
- To use the
@mixin
directive and give it a name
- Use the variable
$property
- Use it starting with
@include
followed by the name of the mixin.
1 2 3 4 5 6 7
| @mixin transform($property) { -webkit-transform: $property; -ms-transform: $property; transform: $property; }
.box { @include transform(rotate(30deg)); }
|
Extend
- Using
@extend
lets you share a set of CSS properties from one selector to another.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| %message-shared { border: 1px solid #ccc; padding: 10px; color: #333; }
.message { @extend %message-shared; }
.success { @extend %message-shared; border-color: green; }
.error { @extend %message-shared; border-color: red; }
|
Pseudo Classes
1 2 3 4 5 6 7 8 9
| a{ color: black; text-decoration: none; &:hover { color: white; } }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| @mixin hoverEvent { &:hover { color: white; text-decoration: underline; } }
a{ color: black; text-decoration: none; @include hoverEvent; }
|
Mathematical Operators
- Unitless numbers can be used with numbers of any unit.
100px + 50; // 150px
diffrent meanings of -
- between two numbers regardless of whitespace, which is parsed as subtraction.
1 2 3
| $number: 2; 1 -$number 3; 1 (-$number) 3;
|
different meanings of /
/
will print the result as divided
instead of slash-separated
if one of these conditions is met:
- The result is stored in a variable or returned by a function.
- The operation is surrounded by parentheses, unless those parentheses are outside a list that contains the operation.
- The result is used as part of another operation (other than /).
1 2 3 4 5 6 7
| 15px / 30px $result: 15px / 30px;
(15px/30px); (bold 15px/30px sans-serif);
15px/30px + 1;
|
- Want to force
/
to be used as a separator
, can write it as #{<expression>} / #{<expression>}
.
Creating a Grid:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| @mixin grid($cols, $mgn) { float: left; margin-right: $mgn; margin-bottom: $mgn; width: (100% - ($cols - 1) * $mgn)) / $cols; &:nth-child( #{ $cols }n ) { margin-right: 0; } }
#imgDiv li { @include grid(4, 2%); img { wid th: 100%; } }
|
Color Functions
lighten($color, $amount)
: hover funcitons.
complement($color)
: hover to change to complementary color.
- sass-documentation
@if
statements
1 2 3 4 5 6 7 8 9 10 11 12 13
| @mixin mQ($arg...) { @if length($arg) == 1 { @media screen and (max-width: nth($arg, 1)) { @content; } } @if length($arg) == 2 { @media screen and (max-width: nth($arg, 1)) and (min-width: nth($arg, 2)){ @content; } } }
|