Home / Tutorials / Amazing SAAS – extension of CSS3
sass

Amazing SAAS – extension of CSS3

What is SASS?

SASS is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

SAAS – extension of CSS3, come into existence within last few years ago and it uses the Haml style of indentation as syntax. it’s very much like CSS and really easy to learn the basics.

Lets get start and see some basics of SASS. The first thing that we need to look at are variables.

Variables

Sass supports variables as well as basic math operations. The idea is that you put any values that you reuse in your CSS in variables then use the variable name in your SCSS. Its similar to macros in c and c++ if you remember. If the brand manager then decides that the primary blue colour that you use is the wrong shade (coz his one of the 10 million focus groups someone didn’t like it) then all you have to do is change the variable value and the rest is done for you.

The output will be like this:

Nesting

To avoid having to repeat yourself with your CSS selectors the clever guys at SASS have created nesting that is like shorthand CSS.

The output will be like this:

Selector Inheritance

You can inherit all the properties from a selector without having to duplicate the rules.
For example:

The output will be like this:

Mixins

This is where the true power of SASS comes to light. They’re little chunks of reusable code (like functions) that you can pass arguments into to. Below is a simple border radius mixin.

Now to use this mixin we just put:

The output will be like this:

This is an extremely simple example but you can see the time that is saved by creating these mixins up front then referencing them in your SCSS file.

One of the real plus points for SASS over the other main CSS preprocessor Less is that SASS has Compass which has amongst other things a full library of CSS3 mixins.

About cmadmin

Web Developer & Designer | Android App Developer

Check Also

css tools

CSS Tools – Extremely Useful And Powerful – 01

Here I’m sharing some extremely useful CSS tools, generators, templates and resources. We did not …

analog-clock

Crate Analog Clock using CSS3 only without image

Analog clock without images? yes, Today we are going to create analog clock using CSS3, Javascript …

Leave a Reply

Your email address will not be published. Required fields are marked *

Login


Username
Create an Account!
Password
Forgot Password? (close)

Sign Up


Username
Email
Password
Confirm Password
Want to Login? (close)

Forget Password?


Username or Email
(close)
%d bloggers like this:
SHARE
OR
SUBSCRIBE
To get latest new / tutorial / technology / development information subscribe with us.
ARE YOU READY? GET IT NOW!
Lets Get Updated with latest trends & tutorials!
Your Information will never be shared with any third party.
Ready for latest tutorials & tools !
OR SUBSCRIBE WITH