Sass basics

This is from my tutorial - https://youtube.com/playlist?list=PL27n4koXvNELExMvNsdSOFYDBamWorg0r
Sass makes writing CSS code easier. It has features that save you time and make the code easier to read. You first need to install it. You can run

npm install -g sass

on the command line,
but make sure you have Node.js installed. There are also other options, you can find them on https://sass-lang.com/install

If you create a sass file called input scss, running the command

sass input.scss output.css

from your terminal will take the file called input.scss and compile it to output.css. That command will turn your Sass code into CSS and put it in output.css.
If you run the command:

sass –watch input.scss output.css

Sass will watch for changes and compile your file, so you don't have to run the command
sass input.scss output.css
every time you save it.

With the command

sass –watch inputFolder:outputFolder

Sass will watch for changes in the inputFolder and save it to outputFolder.

Variables store values that you can reuse in your files. So you can change the values and everywhere you use your variables, the values will be updated. It'll save you a lot of time. Variables should have the symbol $ in front of their name.
Example:

$header-color: black;
$footer-color: gray;

And this is how you use it:

.header. {
color: $header-color;
}
.footer. {
color: $footer-color;
}

You just have to put the name of the variable where you put the value. In your CSS file you will have:

.header. {
color: black;
}
.footer. {
color: gray;
}

Sass gives you the ability to nest elements so they look like the HTML file.
Instead of writing:
nav ul {
list-style: none;
}
nav li {
margin-right: 0.5em;
}
nav a {
color: pink;
}

You can nest the elements that are inside the nav:
nav {
ul {
list-style: none;
}
li {
margin-right: 0.5em;
}
a {
color: pink;
}
}

Mixins are styles that you can reuse throughout your site. Instead of copying a lot of code, you can just add the name of the mixing. To create a mixin add @mixin in front of the name of the mixing:

@mixin warning-text {
background-color: red;
color: white;
font-size: 2em;
font-weight: bold;
}

You can also pass in values:

@mixin warning-text($color, $fontsize) {
background-color: red;
color: $color;
font-size: $fontsize;
font-weight: bold;
}

You can also add default values in case you don't want to change anything:

@mixin warning-text($color: white, $fontsize: 2em) {
background-color: red;
color: $color;
font-size: $fontsize;
font-weight: bold;
}

You should add @include in front of the name of the mixin and its styling will be added:

.info-text {
@include warning-text;
}

Now you have:

.info-text {
background-color: red;
color: white;
font-size: 2em;
font-weight: bold;
}

An example with values:

.more-info {
@include warning-text($color: blue, $fontsize: 10em);
}

You'll get:

.more-info {
background-color: red;
color: blue;
font-size: 10em;
font-weight: bold;
}

Maps can store data that you can reuse. They have keys and values. You can use a key to find its value. This is what they look like:

$colors: ("header-color": "AntiqueWhite", "title-color": "BlueViolet", "footer-color": "DarkMagenta");

$colors is the name of the variable. You need it to use the map. You write keys before the :
And values after the colon.
"header-color" is a key, for example. And "AntiqueWhite" is its value.

You can use the function called map.get($name-of-map, "property-name") to get a value.

For example map.get($colors, "footer-color") will return "DarkMagenta"
it’s a good idea to use quoted strings - "footer-color", instead of footer-color.

You can also use the map with the @each loop. You can use the keys and the values to create styling:

$colors: ("header-color": "AntiqueWhite", "title-color": "BlueViolet", "footer-color": "DarkMagenta");

@each $colorname, $colorvalue in $colors {
.{$colorname}-background {
font-family: 'Foldit', cursive;
background-color: $colorvalue;
}
}

That loop will generate 3 classes because we have key value pairs:

.header-color-background {
font-family: 'Foldit', cursive;
background-color: AntiqueWhite;
}

.title-color-background {
font-family: 'Foldit', cursive;
background-color: BlueViolet;
}

.footer-color-background {
font-family: 'Foldit', cursive;
background-color: DarkMagenta;
}

With the function called map.set($map, $key, $value) you can add or replace key value pairs. Sass functions return new maps and don't change the existing one because that might create bugs. All functions return a copy of the map that you pass in.

Example:
$colors: ("header-color": "AntiqueWhite", "title-color": "BlueViolet", "footer-color": "DarkMagenta");

map.set($colors, "card-color", "LightSkyBlue");

The key "card-color" doesn't exist in the map, so it'll be added. This is what the map will look like:

$colors: ("header-color": "AntiqueWhite", "title-color": "BlueViolet", "footer-color": "DarkMagenta", "card-color": "LightSkyBlue");

If you do this:
map.set($colors, "header-color", "NavajoWhite");

the value of "header-color" will be "NavajoWhite". This is what the map will look like:

$colors: ("header-color": "NavajoWhite", "title-color": "BlueViolet", "footer-color": "DarkMagenta");

You can also use lists to store values. They're very simple. To create a list you just have to separate the elements with commas:

$width: 10px, 100px, 1000px;

or spaces:

$width: 10px 100px 1000px;

You can also add square brackets:

$width: [10px, 100px, 1000px];

Lists are immutable but you can add elements with the function called append. It returns a new list:

$width: 10px, 100px, 1000px;

append($width, 10000px)
will return:
$width: 10px, 100px, 1000px, 10000px;

With the function list.nth($nameoflist, $index) you can get an element of the list. You have to pass in the name of the list and the position of the element that you want. For example:

$newcolors: "RebeccaPurple" , "SandyBrown", "CadetBlue";

list.nth($newcolors, 2)
will return "SandyBrown"

Lists can be used in a @each loop:

$titlecolors: "DimGray" , "CornflowerBlue", "DarkOliveGreen";

@each $color in $titlecolors {
.{$color}-title {
color: $color;
width: 100%;
}
}

That will create 3 classes. One for each element of the list:

.DimGray-title {
color: DimGray;
width: 100%;
}
.CornflowerBlue-title {
color: CornflowerBlue;
width: 100%;
}
.DarkOliveGreen-title {
color: DarkOliveGreen;
width: 100%;
}