Sydeny PC & Technology User Group

Web Design User Group

We Meet the third Saturday of each month
 at the Sydney Mechanics Institute 240 Pitt St Sydney from 2 pm

What we did

CSS Pre-processors

This month we had a look at CSS Preprocessors. So what is a preprocessor? This is the definition from MDN

A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don't exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain.

To use a CSS preprocessor, you must install a CSS compiler on your web server.

So in effect preprocessors are programs to enhance and add functionally to writing CSS.

There are two main contenders for the crown of best preprocessor. They are SASS and LESS with the rest coming in under ten percent. The main reason for their use is the way they add functionality to CSS while trying to making coding simpler. The main features most preprocessors have are,

Variables, Nesting, Mixins, Extends, Color Operations, If/Else Statements, Loops, Math operations, and Imports

Of real interest is Mix in’s. They are sort of Media queries on steroids mixing or compiling various unrelated instructions such as the different browser configurations.

Instillation

Instillation is the similar for both SASS and LESS. Both run on the command line.

First you need to install Nodejs. Node comes with NPM (node package manager) and you use that to install the programs. Once node is installed go to the command line and type

Npm install -g less (or sass) eg npm install less -g

The g stands for global and means the program can be accessed from anywhere on the computer.

There are two other things needed, one is compile, which allows the code written in sass to be sent to a css file. In this example “lessc bootstrap.less bootstrap.css” we compile our less code from bootstrap.less to bootstrap.css, you can simply change the name to your file name. The same would apply to sass files. The other is to initiate watch so you can track changes to the code and compile which allows the program to send the code to a new file. Using watch means that your code is automatically complied, you don’t have to keep going back to comply each change.

GUI Programs you can use.

Once installed there are some GUI programs you can use to make life easier. Koala is one such program and it is cross platform. You can run Koala on most platforms including Linux Mac and Windows and Koala will work with most of the preprocessors as you can see in the screen shot.

Koala-settings

You can also link other text editors like Atom and Sublime Text to write LESS or SASS.

I have added a few links I looked at to prepare this discussion.

https://htmlmag.com/article/an-introduction-to-css-preprocessors-sass-less-stylus

https://www.sitepoint.com/6-current-options-css-preprocessors/

https://www.freecodecamp.org/news/css-preprocessors/

These are the links to the main Preprocessors

https://sass-lang.com/

http://lesscss.org/

https://stylus-lang.com/

https://postcss.org/

This video link is about the installing and using LESS but it will give you a good idea of the basics regardless of the application you choose.

https://youtu.be/qEmV1B-1pu0

and this one is on installing SASS

https://youtu.be/Rnxyf6Vyqiw

PS: if you want to uninstall a package it appears rather easy, its the reverse of instillation eg "npm uninstall -g less". I presume you need the g if you installed globaly otherwise it may remain hide somewhere on the system.

See NPM Site

 

Steve South
Web Design leader

Back