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.
- 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:
- In project's directory, create a folder named
sass
. - In
sass
folder create file namedmain.scss
. - Copy content of
css/styles.css
file fully intosass/main.scss
file with help of code editor. - Delete contents of
css/styles.css
.
- 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.
- 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 themain.scss
file in thesass
directory for changes and output them instyles.css
in thecss
directory. - In the terminal write
npm run sass
- it will use command you just created inpackage.json
and will watch for all changes insidesass/main.scss
. - Open
sass/main.scss
in code editor and save this file - in terminal you should green message confirming that code is saved:
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.
- 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!
- Create
variables.scss
file insidesass
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!
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.
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 calledhelpers.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!
- 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!
- 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!