Saas implementation on Windows

Saas implementation on Windows

Saas implementation on Windows

Sass (syntactically awesome stylesheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. After its initial versions, Weizenbaum and Chris Eppstein continued to extend Sass with SassScript, a simple scripting language used in Sass files.

What is Saas?

Unless you have been coding your css inside an underground shelter for the past 4 years, then you have probably heard of Sass. Sass stands for Syntactically Awesome Style Sheets.

According to its developers , „Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.“

Sass – is awesome. It allows you to use variables, nested rules, mixins and other great features that makes writing CSS easy and fun.

Only one thing that is missing , is a GUI compiler – and that's where Koala steps in.

Koala

Koala is a straight forward GUI application, that compiles Sass ( and also less & coffeescript). It is open source , and can be run in windows, linux and Mac.

Features

  • Multi-language Support: There is support for Less, Sass, CoffeeScript and the Compass framework.
  • Real-time Compilation: Koala listens for file changes, and compiles them automatically when the file changes. Everything is running in the background without user action.
  • Compile Options Support: You can set the compiler options for each file.
  • Compression: Koala can automatically compress code after the compilation is completed.
  • Error Notification: If Koala encountered an error during compilation, it will display the error message.
  • Cross-platform: Koala can run on Windows, Mac and Linux.

Step 1 : Installation

First you need to download Koala and install it. After you launch it for the first time, you'll see this picture below.

Download Koala

Koala installation Windows

2. Adding project to Koala

Now you have to open navigate Koala to your project, Sass will then list all files it can find.

Koala installation Windows

3. Compiling

Now all you have to do is select any listed Sass file and press compile. Koala will then compile your file and produce a normal CSS file using the same name. That’s it! No complications. No typing commands in a console. Just drag, select and click.

Unlike regular CSS, Sass (SCSS) is a real scripting language, with expressions, functions, variables, conditional logic, and loops. You don’t have to use all of these features to get some benefit out of Sass, but they’re there if you need them, and on large projects they can make complex or repetitive CSS much easier to write.

Saas programming

If you already know a little about Object oriented programming, you'll love Saas. There are various things you can do with Saas, and in this introduction I'll just show a couple of them :

  • Variables - a way to store information that you want to reuse throughout your stylesheet

    $primary-color: #333;
    body { color: $primary-color; }
  • Nesting - you can nest your CSS selectors in a way that follows the same visual hierarchy of your HTML

    nav { ul { margin: 0;
    padding: 0;
    st-style: none; }
    li { display: inline-block; }
    a { display: block;
    padding: 6px 12px; 
    text-decoration: none; } }

    This will result with css code like this

    nav li { display: inline-block; }
    nav a { display: block; 
    padding: 6px 12px; 
    text-decoration: none; }
  • Mixins - lets you make groups of CSS declarations that you want to reuse throughout your site.

    @mixin size($width, $height: $width)
    { width: $width;
     height: $height; }

    This can be used in this way

    .square { @include size(200px); }

    This code will output same width and height in css

    .square { width: 200px; 
    height: 200px; }
  • Extend - lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY ( Do not Repeat Yourself )

    .box { border: 1px solid #ccc;
     padding: 10px;
     color: #333; } 
    .success { @extend .box;
     border-color: green; }

Sass Hierarchy – primary Sass has to be clean. In it you have to import all the other Sass files in a specific order. You can't set all the variables in variables.scss and put it in the last line of primary Sass file. It has to be on top so you can use all the variables through sass files.

Posted by Ivan Bašić

Ivan Bašić
I am Digital Marketing Consultant working @ Ingenium. If you wish you can, Send an Email to me

Related Posts

Comments

comments powered by Disqus