Sass Introduction To Web Designers

SASS introduction to Web Designers

As much as everyone loves writing styles in CSS, but lets face it, there are no smart options to write code in it. There is repetition of similar code all over our stylesheet for different selectors. Taking up much time and effort. If the hex value of a color has to be changed in the entire document, the process is a manual one, much like a linear search. The vendor prefixes that impart such cool effects after rendering, makes developer write long redundant code for every browser support.

Preprocessors like SASS, Less , etc. targets these pain points and comes up with ways to ease up the process of writing and maintaining huge amount of CSS. It doesn’t replace CSS by any means. It adds a cleaner syntax and useful additional functionalities.

Like a higher level programming language compiles to assembly language, SASS code compiles into CSS code.

Say Hello to Syntactically Awesome Style Sheet!

SASS introduces features such as Nesting, Variables, Mixins , Control Statements, Mathematical operators, Inheritance & better in-built functions to increase the utility of CSS furthermore, making it a designer’s programming language.

1. Nesting

Instead of repeating selectors’ list over and over, it allows nesting selectors and rules. It makes the structure of the stylesheets similar to the DOM structure.

Below .scss code snippet

.navbar {
  ul {
    margin: 10px;
    padding: 0;
    list-style: none;
  }

  #links {
    display: inline-block;
    a {
        padding: 5px 12px;
        text-decoration: none;
     }
   }
}

this is the .css file that is being generated:

.navbar ul {
  margin: 10px;
  padding: 0;
  list-style: none;
}

.navbar #links {
  display: inline-block;
}

.navbar #links a {
  padding: 5px 12px;
  text-decoration: none;
}

Although it is a good practice to avoid nesting elements more than 3 levels deep as to prevent making the css too rigid!

2. Variables & Operators

The simple yet powerful feature borrowed from programming languages can make writing css a relief! Values that has to be reused throughout the stylesheet can be stored in them. One can store things like colors, font stacks, or any CSS value that has to be reused. It is also possible to do mathematical operations with them.

$official-fonts:  Helvetica, Arial, Georgia;
$brand-color: #d3178d;
$page-margin:10px + 10px;

.header {
  font:  $official-fonts;
  background-color: $brand-color;
  margin:$page-margin;
}

The above .scss generates the .css below:

.header {
  font: Helvetica, Arial, Georgia;
  background-color: #d3178d;
  margin: 20px;
}

Now if the brand color has to be changed, there won’t be a need to make countless changes in the css, just change the value of a single variable and its done!

3. Mixins

These are a reusable block of code which can be mixed in to another ruleset with ease. It also accepts arguments.
They give us the ability to build a reusable library of styles, but most commonly used for vendor prefixes.

 @mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(20px); }
.circle {  @include border-radius(5px);}

The above .scss generates the .css below:

.box {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  border-radius: 20px;
}
.circle {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

4. Functions

These things keep the reusable logic out of any specific declarations and it accepts arguments too. It is also considered a close cousin of mixins.
Then what makes them different from each other?

Mixins returns lines of SASS code, while a function returns a single value.

Following function achieves responsiveness for a fluid layout :

@function calculated-width($target, $container){
    @return ($target/$container)* 100%;
  }

.contentBox{
  width:calculated-width(500px, 1024px);
  height:100%;
}

This in turn will compile to:

.contentBox {
  width: 48.82813%;
  height: 100%;
}

This lets the SASS do the math for you.

It is considered a good practice to refactor & abstract the methods behind successful techniques to make them reusable for next projects.

5. Imports

For management of complex and huge stylesheets,designers split their style sheet up into several smaller CSS files and then import those style sheets from within the main stylesheet.
Every import statement will generate a separate HTTP request.

Now, @imports have long been a part of CSS, then what is new about the SASS version of it?

SASS combines these imported files with the main stylesheet, and serves a single file to the browser.

@import "scss/base";
@import "scss/variables";
@import "scss/typography";
@import "scss/images";

Getting started with SASS is easy.Switching to a preprocessor make development and maintenance easier. It makes the code modular, organized , non-repetitive, lighter to load and lets you make your own custom functions in CSS.

Leave a Reply

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