Tags

, ,

CSS preprocessors allow coding inside css files. Examples are Sass and Less. In Sass a .scss file contains not css content but sass content. In a practical application a certain color code is set as a variable and then referenced multiple times throughout the file:

$color : #dddddd;

.footer {
background-color: $color;
}

This file is then compiled as a regular css file:

.footer {
background-color: #dddddd;
}

As an added bonus these preprocessors also enable minifying the css file for use in production.

Sass install Windows

The implementation of Sass in the Orinoco River project takes several steps. The development environment in Windows/Xampp. Installing Ruby 2.1.6 (x64) is straightforward, start the Ruby command prompt and enter:

gem install sass

Successful implementation can be verified with the command sass -v which should respond with Sass 3.4.15 (Selective Steve).

Sass install webproject

Sass can be implemented in a web project such as Orinoco River as an style.scss file in the public folder. This file contains the Sass script.The adjacent css folder should be empty. The presence of an style.css folder will make the compiler throw up with unhelpful error messages. The scss file can be “watched” by the Sass executable from the Ruby command line. Move to the document root and enter:

sass --watch public/scss/style.scss:public/css/style.css

and wait for the response:

>>> Sass is watching for changes. Press Ctrl-C to stop

Now with every change to the scss file the .css file is updated automatically.

Sass install Netbeans

No, this method is cumbersome. It is too easy to forget to activate the watcher. Luckily your IDE (for example Netbeans) can handle Sass for you:
* Add the Ruby path (C:\Ruby21-x64\bin on the test machine) to the path defined in the environment variables (start from Computer >> properties >> advanced properties >> environment variables). Restart computer
* In Netbeans move to Tools >> Options >> Miscellaneous.
* Add C:\Ruby21-x64\bin\sass.bat to the Sass path
* At a project level move to project properties and CSS preprocessors and enter public/scss as input and public/css as output.
* For compiler options add –style expanded

Sass install CentOS production server

Getting Sass to run on an old CentOS machine is asking for trouble. The specific problem lies in installing a version of Ruby beyond 1.8.5. Luckily the work-around described here solved this problem. We now have:

ruby -v
ruby 1.9.3p551 (2014-11-13 revision 48407) [x86_64-linux]
gem install sass
sass -v
Sass 3.4.15 (Selective Steve)

Specific for the production environment is the creation of an minified css file. On the command line this is all it takes:

sass -t compressed  public_html/scss/*.scss public_html/style.min.css

A line similar to this one is then added to the deployment script. The only files committed to the repository are those in the scss folder. Committing a minified file will create many many conflicts and should not be considered.

Advertisements