I just finished creating a starter repo which I am calling
scss-playground. You can find it here: https://github.com/ackzell/sass-playground
I will paste the
README.md here so you get an idea of what it does:
This repo will provide you with a live reloading environment that will compile your
/css/styles.css which is loaded by the
index.html and served on http://localhost:8080.
So you wanna practice some Sass?
You can do it in many different ways, such as online dedicated editors, or via online environments like codepen or jsfiddle but I figured I feel most comfortable doing stuff in my editor of choice, with all my extensions loaded and ready, fonts, themes and whatnot.
So I decided to create this boilerplate / starter repo to try out a couple npm packages as well as creating a desktop environment that would work for me, then why not make it available for others?
All you have to do is clone this repo, then, on your terminal run:
$ npm install
and when ready to start hacking some SCSS:
$ npm run dev
Open your browser and go to http://localhost:8080, now you can go ahead and write your markup (
index.html) and styles (
/scss/styles.scss) and see your changes reflected on your browser!
I picked a few packages that I thought were modern and that were good for the job:
- sass A newer implementation of the compiler for Sass.
- Servør To run a static file server that I brought in specifically for the live reloading aspect (Reloading the page manually for every change gets old really quick).
- Stylelint I came accross this one and kinda wanted to see what it was about. Seems to work well integrated with VSCode. I previously have used sass-lint and that one has worked really well, but seems no longer maintained.
- Concurrently To be able to run both the server and the Sass compiler at the same time.
- Prettier A code formatter that will make the code look consistent no matter who writes it and will free your mind from trying to decide whether you should add a space or new line in there.
VSCode is my editor of choice, and if you use it too you'll notice some recommended extensions I added to the
You probably also noticed the presence of a couple more files:
.editorconfigSome basic configs for how the editor should treat the formatting of the code (see here)
.node-versionhelps determine what version of node this environment will use. It will be picked up by packages like avn.
.styleintignoreWill be used by stylelint. In this repo we are using a recommended set of linting rules via the former and making sure the linter only picks up the
.scssfiles on the latter.