What is the next step after learning HTML & CSS? CSS Pre-processors
June 16, 2016
CSS pre-processors are hot these days! The give you a little more power with CSS development and help you with structuring your CSS.
Maybe you heard about Sass, Scss or Less, these are the most popular CSS pre-processors. There are a lot more, but I would personally advise you to check out Sass.
If you have already experience with task runners like GulpJS or Gruntjs (or even NPM scripts) I would advise you to check out PostCSS.
Sass gives you the ability to write variables, functions/mixins and a lot more fancy stuff to write CSS faster. You can find a lot of resources everywhere online. So it would be a good if you feel confident with CSS development.
A lot of beginners think that Sass can run in the browser, Wrong! It needs to be compiled first. The nice thing about that is, you can separate your development files from the production files you use online.
Sass doesn't run in the browser! Sass need to be compiled to CSS, then it will be handled by the browsers like normal stylesheets
Tutorials to get started with Sass:
- Getting Started with SASS (with interactive examples)
- Getting Started with Sass
- The Absolute Beginner’s Guide to Sass
- Frontend Workflow #3: Sass automation with GulpJS
For Sass, you need some tools to compile the Sass code to CSS. You can use the command line for that. I think via a CLI (command line interface) is the best in my opinion, because nowadays a lot of tools are coming as a CLI. (I recommend getting familiar with the terminal/command line, is the best you can do! Don't be afraid to use it!)
Great tools to use for compiling Sass
- Koala (GUI, Free) Windows, Linux & Mac
- Sass (CLI, Free) this is a ruby gem for Windows, Linux & Mac
- Prepros (GUI, Free trial/Paid) Windows, Linux & Mac
- Compass App (GUI, Free) Windows, Linux & Mac
- Scout (GUI, Free) Windows & Mac
- SassMeister (GUI, Free) Browser*
- CodePen.io (GUI, Free) Browser*
- GulpJS Sass (CLI, Free) to be used with GulpJS on Windows, Linux or Mac
- GruntJS Sass (CLI, Free) to be used with GruntJS on Windows, Linux or Mac
- Node-Sass (CLI, Free) to be used with npm scripts on Windows, Linux or Mac
* I told you that Sass doesn't work in the browser, but SassMeister and CodePen.io let you handle Sass in the browser. But these are tools and not your production site or application.
How to start with a CSS pre-processor
How you start with a CSS pre-processor is almost the same as developing without it. But now you can use all these cool feature's that CSS has by itself. You just have to install/setup your tool of choice and create a good structure for your development files.
To help you, if you want to use Sass, I created a while ago a basic structure for my Sass file. So if you want to use it, please grab the Sass structure from GitHub.
If you really need guidance or help from me or the others in the community, sign in (or register for free) and please let us know. You can also reach us in the comments :-)