CSS Preprocessing (Sass)CSS Preprocessing (Sass)
CSS preprocessing allows you to write shortcode, functions, variables, and other time-saving methods for building up your website CSS.
The preferred tool on campus for CSS preprocessing is Sass.
Sass is an extension of the CSS framework that is already in wide usage across the web. However, Sass provides scripting capabilities to make writing CSS easier. Sass compiles Sass commands, variables, and references into cut-and-dry CSS that can be interpreted by websites.
Sass-written CSS looks very similar to the CSS you already know, with a few new features.
Getting Started with SassGetting Started with Sass
Getting started using the Sass preprocessor is easy, provided you have experience with command-line interface tools.
The recommended setup for writing Sass on campus is:
The Ruby Sass release and Compass.app have been deprecated or phased out.
To get started, unpackage the Github package gt_sass_template into your theme's directory.
- All files in your /css/ folder will be overwritten when compiled. So, if you want to save your custom CSS so far, convert your CSS into Sass.
Once you have the package into your theme directory, run node-sass by:
- Open Terminal.
- Navigate to the folder to which gt_sass_template was installed to.
./startupto run the node-sass compiler and watch status.
Now, any changes you make to a Sass file will be compiled into CSS.