exercise-sass

This is example of project using only HTML & CSS. Project was tested in Chrome browser. It's not very responsive.

Goal of project is to let you exercise with Sass - how to install it, and how to use its features, such as modules, variables, etc.

Start

get repository to your computer (git clone or download .zip and unzip folder)
open index.html in your browser (preferably Chrome), you should see following webpage:

Prepare project to work with Sass

Have text editor or IDE installed (I use Atom)
Have terminal (I use iTerm2 for Mac)

Prepare folder structure

In project's directory, create a folder named sass.
In sass folder create file named main.scss.
Copy content of css/styles.css file fully into sass/main.scss file with help of code editor.
Delete contents of css/styles.css.

Install Sass

Install node.js - it's needed to compile Sass via the command line. Download it from the official website https://nodejs.org/en/download/ - choose "LTS" tab, and then click on your operating systen. After it downloaded, follow the wizard.
Via terminal, navigate to project folder on your computer.
Write command npm init and press Enter. This will initialize NPM - the Node Package Manager for JavaScript. NPM makes it easy to add and remove code packages to your project.
In terminal, you will be prompted to answer several questions about the project, press Enter each time, this will make npm proceed with default setup. After setup NPM will generate a package.json file in project folder.
In terminal, write command npm install sass and press Enter. This will install Sass preprocessor package to the project.

Use command

Open the package.json file in a code editor.
In the scripts section, put , in the end of line of test command.
Add Sass command on the next line: "sass": "sass sass/main.scss css/styles.css --watch" (this is how it should looks like). The watch flag (--watch) tells Sass to watch the main.scss file in the sass directory for changes and output them in styles.css in the css directory.
In the terminal write npm run sass - it will use command you just created in package.json and will watch for all changes inside sass/main.scss.
Opensass/main.scss in code editor and save this file - in terminal you should green message confirming that code is saved:

Sass exercises

Important: if after some step something doesn't work, try stopping the sass command (by pressing cmd + c or ctrl + c) and running it again.

Modules

Distribute contents of main.scss into 4 other files: for footer, header, intro, recipes.
Include those files into main.scss using @use command.
Now your code is more readable and has clear separation of concerns!

Variables

Create variables.scss file inside sass folder.
Include variables.scss into each of your other files by writing @import 'variables'; on top of file (example)
Find common values inside CSS and define variables for each of them inside that file. Now put variable names instead of actual values in each file (example
Values I suggest to substitute with variables: colors, font sizes, logo size and logo font, value of media query.
Now your code is more manageable and you control all values easier!

Nesting

If you have CSS selector combined from 2 classes, it means you can put one class into another by nesting. Do this where you see 2 classes combined. Same could be done for media query and for pseudo classes like :hover or :last-of-type (which uses special & character from sass for concatenation)

After doing this, now your code is easier to write! Because you don't need to prefix your classes each time with other classes, you can nest them.

Extend

In many places in various sass files there is some repeated code. This repeated code answers for centering elements in CSS. It has 3 rules:

display: flex;
align-items: center;
justify-content: center;

Let's shorten this.

Create new file in sass folder called helpers.scss.
Include helpers.scss into each of your other files by writing @import 'helpers'; on top of file (example)
Define class there which will answer for centering state which will combine inside those 3 rules. This class will start with % symbol, not with dot (example)
Use this class to substitute abovementioned rules in each place they appear with @extend (example)
Now there is less code and no repetitions! And code is easier to manage, because if we need to change centering we can do so from 1 place!

Operators

In footer.scss create 2 variables: one answering for margin top on mobile, another answering for margin top on desktop (example)
Substitute martin top values in CSS for variables.
Now, define margin bottom for mobile and desktop, as a half of top margin, by using Sass / division feature (example)
Now, values will always be recalculated automatically, we don't need to adjust it manually!

Mixins

in helpers.scss define new mixin which will answer for setting width and height of the element based on passed parameter (example)
for recipe image for mobile and desktop Media Query use 1 line mixin to define square dimensions instead of width and height (example)
Mixins allow you to define styles that can be re-used throughout your stylesheet!

alynioke / exercise-sass