In this post I share the knowledge I got from the video below. These are notes that helped me learn, not a transcript. Credit goes to freeCodeCamp.org and codeSTACKr.
Variables in CSS vs SCSS:
/* CSS */
body {
--ocean-color: blue;
}
div {
background: var(--ocean-color);
}
/* SCSS */
$ocean-color: blue
div {
background: $ocean-color;
}
Map of values:
/* SCSS */
$font-weights: (
"regular": 400,
"medium": 500,
"bold": 700
);
body {
font-weight: map-get($font-weights, bold)
No nesting in CSS vs Nesting in SCSS
/* CSS */
body {
width: 80%;
}
body p {
color: white;
}
/* SCSS */
body {
width: 80%;
p {
color: white;
}
}
& (ampersand)
& (ampersand) is a shortcut for "insert name of parent class here". The following are equal.
/* SCSS */
.container {
width: 80%;
.container-paragraph {
background: black;
}
/* SCSS */
.container {
width: 80%;
&-paragraph {
background: black;
}
Using just the & (ampersand) compiles (translates) this sass code:
/* SCSS */
.container {
width: 80%;
&-paragraph {
background: black;
}
...into this css code:
/* CSS */
.container {
width: 80%;
}
.container-paragraph {
background: black;
}
#{&} Interpolation
Wrapping the & in #{} (a process called interpolation) translates this sass code:
/* SCSS */
.container {
width: 80%;
#{&}-paragraph {
background: black;
}
...into this css code:
/* CSS */
.container {
width: 80%;
}
.container .container-paragraph {
background: black;
}
Partials (subfiles)
To break up your SCSS into subfiles you can name them like "_filename.scss". These subfiles are called partials. Then import them into your main file using:
/* SCSS */
/* No _ or .scss needed */
@import "./filename";
Functions:
/* SCSS */
$font-weights: (
"regular": 400,
"medium": 500,
"bold": 700
);
/* Instead of doing this:
/* body { font-weight: map-get($font-weights, bold) } */
@function weight($weight-name) {
@return map-get($font-weights, $weight-name);
body {
font-weight: weight(bold);
Mixins:
/* SCSS */
/* Define it once */
@mixin flexCenter {
display: flex;
justify-content: center;
align-items: center;
}
/* Use everywhere */
.container1 {
@include flexCenter;
}
.container2 {
@include flexCenter;
}
Mixins can take arguments:
/* SCSS */
/* Define it once */
@mixin flexCenter($direction) {
display: flex;
justify-content: center;
align-items: center;
direction: $direction;
}
/* Use everywhere */
.container1 {
@include flexCenter(column);
}
.container2 {
@include flexCenter(row);
}
Mixins can contain JS-like logic:
/* SCSS */
@mixin theme($light-theme) {
@if $light-theme {
background: white;
color: black;
} @else {
background: black;
color: white;
}
.light {
@include theme($light-theme: true);
}
.dark {
@include theme($light-theme: false);
}
Mixins can wrap a media query. @content is short for "everything defined when the mixing is called":
/* SCSS */
@mixin mobile {
@media (min-width: 600px) {
@content;
}
}
body {
@include mobile {
display: flex;
flex-direction: row;
}
}
@extend
Extend styles from one class to the other using @extend:
/* SCSS */
.main {
#{&}-paragraph1 {
background: blue;
&:hover {
color: yellow;
}
}
#{&}-paragraph2 {
@extend .main-paragraph1;
/* Optionally override anything being extended */
}
Calculations in CSS vs SCSS:
/* CSS */
body {
width: calc(80% - 40%);
/* mixing % with px works */
}
/* SCSS */
body {
width: 80% - 40%;
/* mixing % with px DOES NOT work */
}
The rest of the video shows the building of a real world example, a portfolio site. Check it out for more!
Top comments (0)