Add More Muscle to your CSS with Sass

Grow your online business with us

Get A Quote

Add More Muscle to your CSS with Sass

One of our recent projects needed a substantial amount of coding. During the process of development, however, we noted that we had to re-use bits of codes that not only took time, but also were prone to errors. As a result, unnecessary time was spent on re-doing the same block of codes at different places and needed as many rounds of checking as its number of iterations. How we so much wished for a tool that will help us so away with these redundancies and still be effective with our programming!surinder-post

A little bit of digging online helped us discover Sass. And we were completely blown away by the way it extended the functionality and usage of CSS without over-complicating things. To take an example at a very high level, the below in green are two blocks of codes that have been used at multiple places.

p {

margin : 5px;

padding: 8px;

font-size: 110%;

color: green

text-align: justify;

}

footer {

margin : 5px;

padding: 8px;

font-size: 110%;

color: green

text-align: justify;

}

Now imagine if we can in any way define these parameters in green at one place and just use its reference name. The above example will then fit in just two lines instead of 10 lines of code. If the green code was used in 5 places throughout the program, it would’ve resulted in just 5 lines of code, instead of a huge 25 lines of code. This is precisely what Sass allowed us to do. The new code would look something like this –

@mixin fontprop {

margin : 5px;

padding: 8px;

font-size: 110%;

color: green

text-align: justify;

}

p {@include fontprop}

footer {@include fontprop}

What happens behind the scene?

When Sass is processed, it takes the parameters defined in fontprop after the “mixin” directive and outputs normal CSS with the variable values placed in the CSS. This results in easy to maintain shorter code, lesser processing time, lesser checking and testing and better consistency throughout the program.

With our interest piqued, we applied Sass with amazing results on other parts of the CSS program with the same results as above. Having gained a fair bit of experience on this immensely nifty CSS extension, we share our thoughts with you on this blog. Here are some basics on Sass.

What is Sass?

Short for Syntactically Awesome Stylesheets, Sass is a CSS extension language that is gaining prominence due to its stability, high performance and functionality it provides to CSS stylesheets. It is completely compatible with all versions of CSS so that any CSS library can be used with Sass without any issues. It provides OOP functionalities previously missing with default CSS.

How does it add more value to CSS?

Sass provides many functionalities not available with CSS script. As a result the usage and effectiveness of CSS is tremendously enhanced. Here are some ways in which Sass extends the prowess of CSS –

  1. Variables – With variables, certain properties, parameters or block of features can be reused many times without the need for defining or specifying it again and again. So if you assign a variable to a specific color in order to avoid reusing the same color code, you can do it as

$green: #3bbf00

Now you can use the $green variable as below

p {

margin : 5px;

padding: 8px;

color: $green; }

  1. Mixins – The fontprop example shown in first part of this blog is a noteworthy example of using mixins and achieving functionality not possible within default CSS scripts.

  2. Nesting – Unlike HTML, CSS doesn’t provide for visual hierarchy or nested appearance of code. With Sass, this can be accomplished easily. This feature provides a well-organized CSS code and facilitates better readability.

  3. Selector inheritance – By using @extend, Sass overcomes CSS3 limitations on inheritance and helps share properties of one selector to another. So if we want to justify-align the paragraph at a margin of 5 points, zoom in the font by 110% and give it green color, then we can collect these in one block of reusable code. Our code would look like this

.usethis {margin : 5px;

font-size: 110%;

color: green

text-align: justify;}

Suppose later on we want to use these parameters in addition to some more specific parameter, we can inherit the properties using @extend directive as shown below

.spinoff {

@extend .usethis;

border-color: blue;}

Now wherever .spinoff is used, it will justify-align the paragraph at a margin of 5 points, zoom in the font by 110% and give it green color AND provide a blue color border.

  1. Abides by the DRY principle – The DRY principle states “Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.” Sass helps achieve this rule, as we have succinctly depicted in our actual example above.

Our Takeaways

CSS itself is a good way to apply dynamic styling, but there are certain aspects yet not a part of the language, such as mixins, variables, or inheritance. These can be easily controlled and used by using Sass, our favorite CSS preprocessor tool currently!