by Dr. Radut

libSass in Linux Mint

Published by peter -

libSass is a SASS processor written in C++ for speed and use anywhere. You use libSass in Sass.js and other SASS applications. How do you install libSass in Linux Mint?

Linux Mint has Sassc in the Software Manager and it is a recent version. My Linux Mint 18.3 has Sassc 3.4.2. The Sassc download is only 0.5 Megabytes and uses only 2 MB on disk. The installation of Sassc brings in libSass, 3.3.4 in Mint 18.3, only a small addition to the space used by Sassc. This is far easier than all the complicated alternatives including the direct compilation of libSass.

You can test libSass by testing Sassc. Test the installation of Sassc by opening a command line box and entering sassc. You should see something like the following.

Usage: sassc [options] [INPUT] [OUTPUT]

Options:
   -s, --stdin             Read input from standard input instead of an input file.
   -t, --style NAME        Output style. Can be: nested, expanded, compact, compressed.
   -l, --line-numbers      Emit comments showing original line numbers.
       --line-comments
   -I, --load-path PATH    Set Sass import path.
   -P, --plugin-path PATH  Set path to autoload plugins.
   -m, --sourcemap         Emit source map.
   -M, --omit-map-comment  Omits the source map url comment.
   -p, --precision         Set the precision for numbers.
   -a, --sass              Treat input as indented syntax.
   -v, --version           Display compiled versions.
   -h, --help              Display this help message.

The sassc software does not work error free. No matter what I supply to sassc, sassc fails with a variety of error messages. Something as simple as displaying the version results in an error. Fortunately the CSS is produced before the failure.

The output

Sassc appears to fail after processing the SASS to CSS. Using the default everything, the indentation of the CSS is fauly, it is that bad Java style indentation. The nested option produces the same result. The expanded option produces a nicer layout but still does not have the braces lining up. The compact option has everything for an element on one line. The compressed option removes all spaces.

The test

$colour: #445577;
body { color: $colour; }
h1
 {
 color: $colour;
 float: left;
 }

The default

The default output CSS is shown next and uses 68 bytes. The nested option is exactly the same.

body {
  color: #445577; }

h1 {
  color: #445577;
  float: left; }

Expanded

The expanded option follows and uses the same 68 bytes.

body {
  color: #445577;
}

h1 {
  color: #445577;
  float: left;
}

Compact

The compact CSS output is the following 62 bytes.

body { color: #445577; }

h1 { color: #445577; float: left; }

Compressed

The output from compressed is the following hard to read text that uses only 42 bytes.

body{color:#457}h1{color:#457;float:left}

Errors

Errors in the SASS code look like the following example. There is an option to make sassc add the SASS line numbers to the CSS using comments.

Error: property "float" must be followed by a ':'
 on line 6 of test.scss
>>     float; left;
 ----^

Conclusion

Sassc is a quick easy way to install and test libSass. You can then use libSass in Sass.js or anything else.

Tags
SASS