Sass - CSS Stylesheet Language

Sass (Syntactically Awesome Style Sheets) is an extension of CSS that adds power and elegance to the basic language. It is an open source project that is coded in Ruby. It was created in order to simplify CSS development. It adds a feature set to your stylesheet markup that makes writing styles more organized way.

When I work with Sass the file extensions were scss. So what is Scss in Sass?. Well, when Sass first came out, the main syntax was different from CSS. It looked a lot like Haml. So in version 3 Sass changed it’s main syntax to .scss to make it look like CSS.

What is the use of Sass?

It is important to follow the coding standard in our application. Not only in server side code and also in client side code. So Scss makes writing maintainable CSS easier. You can get more done, in less code, more readable, in less time.

1. Variables

Variables in Sass are preceded with the $ symbol.

Types of variables:

• numbers - 1.2, 13, 10px
• strings - "foo", 'bar', baz
• colors - blue, #04a3f9, rgba(255, 0, 0, 0.5)
• booleans - true, false
• null - null,
• lists - 20px 5px 0 10px, Helvetica, Arial
• maps - (key1: value1, key2: value2)

$baseColor: #eeffcc;

body {
    background: $baseColor;
}

Variable has scope. If it is declared within the braces it can not be accessed outside. But using !global flag we can make the variable globally accessible.

$baseColor: #ccc !global;

Variable might be used in multiple places. In any place if values is not assaigned to it, We can set a default value for a variable using !default flag.

2. Math

It's supports mathematical expressions.

Types of math operators:

• + Addition
• – Subtraction
• / Division
• * Multiplication
• % Modulo
• == Equality
• != Inequality

$container-width: 100%;

.container {
    width: $container-width / 4;
}

3. Functions

It has some built in functions. Click here

4. Nesting

Using this feature we can write single class by nesting the common class together instead of writing multiple classes separately.

.container {
    width: 100%;
}

.container h1 {
    color: red;
}

.container {
    width: 100%;
    h1 {
        color: red;
    }
}

In some situation we have to refer the parent. For example we cannot just write :hover inside the parent a class. We have to refer the parent with the & symbol.

a {
    color: blue;
        &:hover {
        text-decoration: underline;
    }

    &:visited {
    color: purple;

    }
}

5. Imports

Imports allow you to break your styles into separate files and use them into one another. @import directive used to import a scss files.

@import "grids.scss";
@import "grids";

Sass compilers also include a concept called “partials”. If you prefix a .sass or .scss file with an underscore, it will not get compiled to CSS. This is helpful if your file only exists to get imported into a master style.scss and not explicitly compiled.

6. Extends & Placeholders

Using @extend keyword we can inherit already existing styles.

.input {
    border-radius: 3px;
    border: 4px solid #ddd;
    color: #555;
    font-size: 17px;
    padding: 10px 20px;
    display: inline-block;
    outline: 0;
}

.error-input {
    @extend .input;
    border:4px solid #e74c3c;
}

7. Mixin

Mixins allow you to define styles that can be re-used throughout the stylesheet. Can be re-used using @include directive.

@mixin large-text {
    font: {
        family: Arial;
        size: 20px;
        weight: bold;
    }
    color: #ff0000;
}

.page-title {
    @include large-text;
    padding: 4px;
    margin-top: 10px;
}

Its also accept parameters.

@mixin style-border($color, $width) {
    border: {
        color: $color;
        width: $width;
    }
}

p { @include style-border(blue, 1in); }

8. Function Directives

It is possible to define your own functions in sass and use them in any value or script context.

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
    @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

We can also pass named parameters like below,

#sidebar { width: grid-width($n: 5); }

How to use Sass in Visual Studio

Check out my another post to know How to use Sass in Visual Studio. Click here.