Sass documentation

Introduction to Sass

What is Sass?

Sass is a css pre‐processor, an extension to css that adds power and elegance to the basic language.

Main Sass features

  1. Variables for reusable values such as colors, font‐sizes, spacing etc
  2. Nesting to nest selectors inside of one another, allowing us to write less code
  3. Operators for mathematical operations right inside of CSS
  4. Partials & imports to write CSS in different files and importing them all into one single file
  5. Mixins to write reusable pieces of CSS code
  6. Functions similar to mixins, with the difference that they produce a value that can then be used later
  7. Extends to make different selectors inherit declarations that are common to all of them
  8. Control directives for writing complex code using conditionals and loops

Basic functions

  1. // to leave a comment
  2. background‐color: darken($color‐primary, 15%); to make color 15% darker, good for hover states etc.
  3. background‐color: lighten($color‐primary, 15%); to make color 15% lighter

Setting up our sass environment

  1. Create package.json file in the project
  2. Install sass
  3. Set up Sass compiler to watch changes
  4. Start live server

Installing Sass

Click here to see the instructions to install sass.

Compiling Sass

Click here to see the instructions to compile sass.

Implementing the 7‐1 structure

The 7‐1 pattern = 7 different folders for partial SASS files & 1 main SASS file to import all other files into a compiled CSS stylesheet, the 7 folders are;

  1. base/ (basic low level components such as resets, styles for html & body element selectors)
    • _base.scss
    • _animations.scss
    • _typography.scss
    • _utlilities.scss
  2. components/ (1 file for each component such as buttons, forms etc)
  3. layout/ (for global layout sections such as footer, header)
  4. pages/ (styles for specific pages)
  5. themes/ (to implement different visual themes)
  6. abstracts/ (code that does not output any css such as variables, mixins or functions)
  7. vendors/ (where all 3rd party css goes)

All of the files in the 7 folders above should be partial sass files, all partial files start with an "_", for example, _base.scss

To implement these 7 folders and partial files above;

  1. Create each folder with the files in them
  2. At the top of the main.scss file, import all of the partial files by writing @import "base/base" etc etc

@import "base/animations";
@import "base/base";
@import "base/typography";
@import "base/utilities";

There should be no code in themain.scssfile apart from the@importdeclarations.

Variables

A variable is a container where we can store some data for example, a name of a color, then we can reuse it all across the Sass documents.

$color‐primary: #f9ed69;

nav {
background‐color: $color‐primary;
}

Nesting selectors

We can nest selectors to write cleaner and less code, as seen below

.navigation {
list‐style: none;
li {
display: inline‐block;
margin: 30px;
&:first‐child {
margin: 0;
}
}
}

& is used to select the current selector & attach it to the psuedo class.

Mixins

Mixins are reusable pieces of code that we write into a mixin so we can call that mixin anywhere in the document. They are practically components for design.

@mixin clearfix {
&::after {
content: "";
clear: both;
display: table;
}
}

nav {
@include clearfix;
}

  1. Create a mixin by calling @mixin (mixin name) {}
  2. Call mixin by writing @include (mixin name);

Creating arguments in mixins

If a property may change in your mixin, you can pass an argument by using variables, for example, if the text color may change, you can create an argument and delcare the text color when you call the mixin in the code.

@mixin style‐link‐text($color) {
text‐decoration: none;
text‐transform: uppercase;
color: $color;
}

a:link {
@include style-link-text($color‐text‐dark);
}

  1. Add the variable in brackets after the mixin name
  2. When calling the mixin, write what the variable should be in brackets. You dont need to use variables in the mixin like above, hex codes will work too.
  3. The variable writtin in the brackets will get parsed through the mixin and will replace the variable in the mixin.

Functions

Functions take arguments, just like a mixin, and does something with the argument and then returns them.

@function divide($a, $b) {
@return $a / $b;
}

nav {
margin: divide(60, 2) * 1px;
}

  1. Call a function with @function (function name)(variables){}
  2. Make the function do something and return using @return (calculation here);
  3. To call the function, use the function name and parse the values in the brackets and then multiply by 1(measurement unit)

Extends

Write a place holder, with a bunch of styles, and allow selectors to extend that placeholder.

%btn-placeholder {
padding: 10px;
display: inline‐block;
text‐align: center;
border‐radius: 100px;
}

.btn‐main {
&:link {
@extend btn‐placeholder;
background‐color: $color‐primary;
}
}

.btn‐hot {
&:link {
@extend btn‐placeholder;
background‐color: $color‐secondary;
}
}

The extend feature is great for;

  1. Adding common styles to elements such as buttons
  2. Extending the placeholder to add unique styles to certain buttons without repeating the selector multiple times

Only use extends when the elements we are extending are related such as all buttons or all links, otherwise, use mixins

Difference between mixins and extends

Mixins and extends do similar things but work differently in the background when the final css code is compiled.

How mixins compile css

When compiling mixins, mixins will add the code inside the mixin everywhere you call it. So the same code will be repeated over and over again under the selectors the mixin was called.

Written mixin

@mixin btn {
padding: 10px;
display: inline‐block;
text‐align: center;
border‐radius: 100px;
}

.btn‐main {
&:link {
@include btn;
}
}

.btn‐hot {
&:link {
@include btn;
}
}

Compiled mixin

.btn‐main:link {
padding: 10px;
display: inline‐block;
text‐align: center;
border‐radius: 100px;
}

.btn‐hot:link {
padding: 10px;
display: inline‐block;
text‐align: center;
border‐radius: 100px;
}

How extends compile css

When compiling extends, extends will write out the code in the placeholder once and add the selectors to that code where you extend the extends.

Written extend

%btn-placeholder {
padding: 10px;
display: inline‐block;
text‐align: center;
border‐radius: 100px;
}

.btn‐main {
&:link {
@extend btn‐placeholder;
}
}

.btn‐hot {
&:link {
@extend btn‐placeholder;
}
}

Compiled extend

.btn‐main:link,
.btn‐hot:link {
padding: 10px;
display: inline‐block;
text‐align: center;
border‐radius: 100px;
}

Media queries in Sass

To write media queries in sass, we need to;

  1. Write a mixin using the if statement and content derivitive.
  2. Add the mixin nested into the relevant selector.

This makes it easy for us to change the breakpoints later if needed.

@mixin respond($breakpoint) {
@if $breakpoint == phone {
@media (max-width: 600px){
@content;
}
}
}

This is how we include the mixin

@include respond(phone) {
font-size: 50%;
}

Use ems for media queries instead of pixels or rems. 1 em = 16px

List of sources

    Colt Steeles web developer bootcamp 2021
    Advanced Css & Sass course