Sass
Progression
ID | Status | Learning Item | Type | Related Project | Date Completed |
---|---|---|---|---|---|
1 | Getting Sassy With CSS | Course | |||
2 | Sass Basics | Official Docs | Portfolio | 12/15/20 | |
3 | Learn Sass In 20 Minutes | Video | Portfolio | 12/15/20 |
Variables
Prefix variables with a $
symbol:
$textColor: black;
Structure
Sass allows for nesting elements.
body {
background: red;
p {
background: blue;
&:hover {
background: yellow;
}
}
}
This is the equivalent of:
body {
background: red;
}
body p {
background: blue;
}
body p :hover {
background: yellow;
}
Importing
Sass files can be broken out into individual files and imported.
Prefix your files with an underscore like _{filename}.scss
, which is referred to as a “partial.” In your main Sass file, this can now be imported as:
@import './{filename}';
Extending
If we want to reuse rules from an existing class, we can extend the class we want to replicate:
@extends 'header';
From there, we can override those styles locally, as Sass still cascades top to bottom just like regular CSS.
The classes we extend can be in the same file, imported, or use a special placeholder class with the %
symbol:
/* This CSS will print because %message-shared is extended. */
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
// This CSS won't print because %equal-heights is never extended.
%equal-heights {
display: flex;
flex-wrap: wrap;
}
.message {
@extend %message-shared;
color: #AAA;
}
Mixins
Mixins are prepackaged chunks of CSS that was can easily include in multiple places! Think of them like functions in JavaScript.
@mixin
is used to declare the template content, and @include
is used to import it into the CSS rule.
@mixin flexCenter {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
p {
@include flexCenter();
}
But what makes mixins really powerful is in the function-like capabilities. If we add variables as properties to flexCenter
, we can pass CSS values into the mixin:
@mixin flexCenter($direction, $background) {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: $direction;
background: $background;
}
p {
@include flexCenter(column, blue);
}
Operators
Sass supports standard math operators +, -, *, /, and %.
img {
float: left;
width: 600px / 960px * 100%;
}