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

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. 


Sass Documentation

esembrat3 Wed, 01/21/2015 - 09:54

Getting Started with Sass

Getting Started with Sass

Getting started using the Sass preprocessor is easy, provided you have experience with command-line interface tools.

Setup

The recommended setup for writing Sass on campus is:

The Ruby Sass release and Compass.app have been deprecated or phased out. 

Getting Started

To get started, unpackage the Github package gt_sass_template into your theme's directory. 

Please note:

  • 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:

  1. Open Terminal.
  2. Navigate to the folder to which gt_sass_template was installed to.
  3. Type ./startup to run the node-sass compiler and watch status.

Now, any changes you make to a Sass file will be compiled into CSS.

esembrat3 Fri, 02/03/2017 - 11:26