If you're here, I'm going to assume you already know what Sass is and just want to do the damn thing.
This guide is also specific to the .scss
syntax of Sass.
Install Sass ๐
This assumes you already have a
package.json
file. If not, runnpm init
and enter through for the default values.Run
npm install node-sass
to install node-sass
Setup Your File Structure โ
In your root directory, create a
styles
folder with anscss
folder and acss
folderIn
/sass
, create the filemain.scss
In
/css
, create the filestyle.css
โโ styles/
โ โโ sass/
โ โ โโ main.scss
โ โโ css/
โ โ โโ style.css
See Organizing Sass Files section for more details on recommended file structure.
Watch Changes To Sass Files ๐
- In
package.json
, within the"scripts:"
section add"sass": "node-sass sass/main.scss css/style.css -w"
like so:
"scripts": {
"sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
},
The watch flag
(-w)
tells node-sass to watch themain.scss
file in thestyles/sass
directory for changes and output them instyle.css
in the styles/css directory.This also assumes your
styles
folder is in the root directory. You may need to adjust these filepaths if you're using something like React or Vue and have yourstyles
folder in thesrc
directory, for example.
- In a terminal instance, run
npm run sass
to watch for changes to your .scss files and automatically compile them into css.
Partials ๐ธ
The only thing in your main.scss
folder should be imports of your other .scss files, also known as partials.
All partials begin with an underscore (_).
Create another folder within your
/scss
directory such astest
.Add an .scss file within the /test directory such as
_test.scss
.Import the partial file into your
main.scss
file:@import "test/test";
You do not need to include the underscore or the file extension in the imports.
Test it out ๐งช
- In your
_test.scss
file, add something like:
$red: red; // declare a variable
h1 {
color: $red;
}
- Save the file. You shouldn't see any errors in the terminal if sass compiled successfully. You should see the h1s on your page update to red. If you go to
css/style.css
you should see the compiled css:
h1 {
color: red;
}
- If you do not see the color update or the compiled CSS, ensure you have
npm run sass
running in a terminal instance.
Organizing Sass Files ๐
There are many ways to organize your Sass files, and it really comes down to personal preference.
The 7-1 Architecture is a popular structure for larger projects, although I personally find it a bit overkill for smaller personal projects.
However, you will thank yourself for having a solid file architecture in place if your project ever grows or scales.
Here's what I usually start out with, and then add from there:
โโ styles/
โ โโ sass/
โ โ โโ abstract/
โ โ โ โโ _variables.scss // variable declarations
โ โ โ โโ _mixins.scss // mixin declarations
โ โ โโ base/
โ โ โ โโ _base.scss // *, html, body styles / CSS reset
โ โ โ โโ _typography.scss // typography-related styles
โ โ โโ components/ // reusable components styles eg. buttons
โ โ โ โโ _component1.scss
โ โ โ โโ _component2.scss
โ โ โโ layout/ // layout components styles
โ โ โ โโ _footer.scss
โ โ โ โโ _header.scss
โ โ โโ pages/ // styles specific to pages
โ โ โ โโ _page1.scss
โ โ โ โโ _page2.scss
โ โ โโ main.scss
โ โโ css/
โ โ โโ style.css
and then your main.scss
file would look like this:
@import "./abstract/variables";
@import "./abstract/mixins";
@import "./base/base";
@import "./base/typography";
@import "./layout/section";
@import "./layout/header";
@import "./layout/footer";
@import "./pages/page1";
@import "./pages/page2";
@import "./components/component1";
@import "./components/component2";