Use SASS to design your website

Posted by Bharat Thapa on August 7, 2015 in aBit Blogs, Design

Web design today is totally different as compared to few years ago. The technology has advanced so much that it has given websites a brand new look and feel. Websites these days are designed in various ways using various web design technologies & programming languages.

sass-coverI still remember those days when I used to develop websites using just the table tags and edit my codes in a notepad, lol.  Well, today CSS3 plays a lead role when it comes to designing a website. The layouts, the colors, the typography, etc…are the basic CSS elements we craft the website with.  However, using CSS for large websites becomes a nightmare at times when you have to change it time and again. Imagine that you have selected a primary color and it’s combination shades and used it more than 1000 times in your CSS stylesheet. Now, think about, what if you want to change the primary color to something else and make the changes accordingly…. hehe..!! It’s gonna be a nightmare. Well that’s just about the colors, how about other elements…

Using a scripting language like SASS has made my life so much easier.

Sass (Syntactically Awesome Stylesheets) is a stylesheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum.[1][2] After its initial versions, Weizenbaum and Chris Eppstein have continued to extend Sass with SassScript, a simple scripting language used in Sass files. (wiki-pedia)

There is a whole lot of document if you want to know about Sass ( http://sass-lang.com/ ). However, I would simply define it as a great and simple language which reduces a lot of CSS coding and is awesome. It has lots of features, like pre-processors, variables, nesting, mixins, import, etc…..

My favorites are :

Variable

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Nesting

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

There is another similar language called LESS (http://lesscss.org/), but I personally prefer SASS.  Here are some of the advantages of using sass :

  1. CSS compatible
  2. Feature Rich
  3. Mature
  4. Industry Approved
  5. Large Community
  6. Frameworks

 

Well, this post is not to teach you SASS but to inform those web designers who are still struggling with CSS. Do try this out and you would never code in CSS alone….!
Have a great day…!!!

 


 

2 responses to “Use SASS to design your website”

  1. tenisha93.ts@gmail.com' Tenisha Rai says:

    Phenomenal change,complementing CSS. Appreciation to ABit for stepping higher on IT.

Leave a Reply

© Copyright . aBit. All Rights Reserved.