AlignMinds Technologies logo

Why Should You Use Syntactically Awesome Style Sheets (SASS)?

Sass is the most mature, stable, and powerful professional CSS extension language in the world initially designed by Hampton Catlin and developed by Natalie Weizenbaum. Sass is completely compatible with all versions of CSS. We take this compatibility so that you can use any available CSS libraries. Sass boasts more features and abilities than any other CSS extension language out there.

There is an endless number of frameworks built with Sass. Compass, Bourbon, and Susy just to name a few.

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 plug-in.

SASS Syntaxes

Sass has two syntaxes. The main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”) and is a superset of CSS3’s syntax. This means that every valid CSS3 style sheet is valid SCSS as well. SCSS files use the extension .scss.

The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.

Pros and Cons of Syntactically Awesome Style Sheets (SASS)


1. Clean Code

If you are coming from Python, Ruby (you can even write props with symbol-like syntax) or even CoffeeScript world, it will come very natural to you – writing mixins, functions and generally any reusable stuff in sass is much ‘easier’ and readable than in scss(subjective).

2. Shorter Development Time

With Sass, you can save a lot of time if you know how to use it well. In addition to CSS, sass lets you write functions, mixins, you can import styles and many such time-saving bits. With proper naming of classes, you can create your own common styles which can be used whenever you want instead of calling the same styles repeatedly. This saves a lot of time just like bootstrap does when you need a ‘text-centre’ class or a ‘pull-right’ to position your element.

3. Consistency

It is always easier to reuse what we have already written than to write new patterns. Along with the fact that this saves a lot of time, you can also have a consistent pattern throughout your page. You won’t have to scale through each element while continuing through the website development.

4. Reduced HTTP requests

Unlike the regular CSS, Sass lets you to breakdown your style sheet into several bits or parts and can be called using @import keyword. The Sass compiler will then combine your style sheet into a single CSS file, which will not only get your style sheet organized but also will reduce the HTTP requests passed and thus allow it to load much faster.


1. Space Sensitive

Sass is space sensitive. Sass does not support the use of extra unnecessary spaces. If we, even accidentally leave extra space or forget to include a semi-colon, sass compiler will show an error which sometimes gets really annoying.

For example:On the below image, you can find an error on line 3057 that happened due to missing braces.

An error on line 3057 due to missing braces

2. Need to write all styles initially

One of the advantages of using sass is that we can reuse the same styles more easily. But to do that, we initially need to write up all the necessary styles which are to be later imported or included and which can be considered time-consuming. Nevertheless, it’s worth it.

In general, there are many advantages and disadvantages to using sass. If you know to use it well, you could get the best out of it. Even some of the disadvantages can be considered as an advantage.

Like a small mistake in the syntax will make the compiler to show an error message. This may be annoying but there might come certain situations when this could actually help you to save a lot of time. For example, in CSS, we make a small mistake like forget a space. But we won’t notice it and the compiler will show no error. But we won’t get the expected result either. So, we might actually spend lots of time researching what went wrong until we figure out that it was a small space issue. In sass, the compiler will immediately show the error even if a small space is missing and could be helpful.

Quick Tips

When you’re starting a project and you intend to do it in sass, these tips may come handy:

– Keep your sass style sheet structured so that it will be easy to maintain.

For example,

.logo { Float: left; Width: 240px; img { margin:0; vertical-align:middle; @media (max-width: $x-minimum-width) { width:100%; height:auto; } } @media (max-width: $x-minimum-width) { width:190px; } }

Sass variables must be effectively used. It might look difficult in the beginning but when you get used, it will be really helpful.

For example,

$x-minimum-width:480px; h2 { font-size:24px; @media (max-width: $x-minimum-width) { font-size:18px; } }

Avoid using mixins. Mixins are more like copying and pasting. Not much effective though.

For example,

@mixin transition($property) { transition: $property .3s ease-in; -webkit-transition: $property .3s ease; -moz-transition: $property .3s ease; -o-transition: $property .3s ease; -ms-transition: $property .3s ease; } a { color:$primary-color; cursor:pointer; @include transition(color); &:hover { color:$secondary-color; text-decoration:none; } }

Compiling a SASS file

To create a sass file, first, you need to create a normal CSS file. Save it as ‘file-name’.scss in your CSS directory where your normal CSS files are saved. Also, create a normal CSS file in the same directory. The styles you write in your scss file will be automatically added to your CSS file by the sass compiler.

To compile the sass file, you need to perform the following steps:

Open command prompt

2. Navigate to the location where your CSS files are saved.

For example: cd C:\wamp\www\example\wp-content\themes\example\css

3. Write the SASS command

Write the SASS command to start compiling the SASS file. Command: sass –watch custom.scss:custom.css

– Shekhar R

Stuck In The Middle of A Project? What’s Next?

Do you get stuck with a line of code very often?

Are you someone who always find it difficult to write the next line of code during the development process?

Do you need help in development, designing or coding domains?

How often have you stuck while coding as you have no idea on how to achieve the required function?

I know the answer may be a big ‘Yes’ from so many.

Stuck while coding. It’s the programmer’s worst enemy – it hurts your productivity, your confidence, your happiness and your peace of mind. It doesn’t mean that you are a failure or inefficient. It’s just that the problem you are facing is complicated and you need help. So, take this situation as a learning opportunity.

First, make sure that you do not get angry and frustrated on the situation, these will not guide you to the proper destination. So just take a break or do something else for a while and back with a fresh mind. You can make wonders with fresh eyes and a cool mind.

A good developer comes through proper practice and experience. They utilize all possible resources including Google search, Forums and any other available resources.

Seeking help from other resources doesn’t make anyone a bad or lazy developer. But, a worse developer is one who didn’t know where to look for help for resolving a problem.

There is a wide range of problem-solving tools and Forums available today. The most crucial thing is how we use it once information been found. Ideally, we should avoid copy and pasting and instead we must read and understand the code before incorporating int into the program we are developing. 

Well, let’s see some excellent forums and sites which help to wipes out the obstacles in your work!

Top resources to solve your coding deadlocks

Stack Overflow

If you are a developer or designer, can you imagine days without Stack Overflow? Obviously, it’s difficult, right? If you are getting stuck, the best ever destination will be none other than Stack Overflow. So, this is one of the most active technical Question &Answer sites and it was evoked by Jeff Atwood and Joel Spolsky in 2008.

Today the Stack Overflow can be rated as Programmer’s Heaven with its excellent tips on problem-solving.  There are thousands, if not lakhs, of programmers who can help us to resolve a problem.  

If you are going to ask a question, first, you should do a proper search since a similar question may be answered by someone already on the platform. If you need an answer to something new, then you can ask a question. So, when you get stuck with an error, invest time to convey the question in a proper way. For example, you can post the exact text with the error or post the code you have already tried. Also mention the software version you are using along with the question.

Before going to ask a question, keep on mind about:

  • Invest Time
  • Be on Topic
  • Start questioning yourself
  • Be prepared to communicate

In short, Stack Overflow is extremely helpful, and it’s absolutely fit to be declared as ‘Programmer’s Heaven’.


Quora is an excellent question/answer (Q&A) forum permitting its members to post questions and answers. Users can also search for questions and answers for a quick fix.

You can get the best code written by the experts on Quora. It’s a huge treasure with millions of fascinating answers on each and every topic that may be interesting to you. Quora can be used as a quick reference for any kind of programming doubts you have in your mind.

One of our team implemented coco3D with guidance from an expert on Quora and we made it a great success. It’s not only used as a helping forum by people, but also it’s a popular platform to share your valuable knowledge. So, get ready to share some of your great ideas. Maybe it would help others who may be looking for an answer or idea that they need in their life.


GitHub is awesome for finding info on coding related topics. I’ve used it for a lot of research purposes and got excellent bits of help on many topics. GitHub helps you to find that perfect set of code that will help you to solve the programming problem you are facing.  It provides its users with a platform to discuss the problems that they are trying to solve.

GitHub’s tagging system can be considered as a great advantage. Another advantage is the GitHub repository.   People can surely reap benefits from it. Availability of the complete code is the highlight of this site. In this competitive programming world, GitHub will surely help to win the race.

Creator’s own Forums

Are you a kind of person who likes to seek help from the creator’s domain? Here creator means the expert(s) who is the founder of a technology. I know some of my colleagues who usually choose this path whenever they get into any kind of deadlocks in programming. Finding solutions from the creator’s page will surely outrank the benefits of referring to any other resource.

Be sure to first visit WordPress own forum for any support on WordPress related problems. On this platform, every question are answered quickly. If you are facing any issues related to Android Development, then you must visit Android Support center and for iOS, you can get expert advice from iOS professional support team. So, start referring to Creator’s forum and solve your programming related issues with ease and in the most perfect way.

General Forums

Just like the listed resources above, there are many other knowledge treasures on the web as well.  Let’s have a look at some helpful websites which may help you with solving your programming related queries.

Site Point

Site Point is one among the most popular online forum for developers and designers today. It is recommended as the best place to get expert solution for your problem and it has around 250,000 members.

Digital Point

Digital point is an excellent forum which is professionally managed by experienced technical leaders. It is one of the biggest webmaster communities for web developers and designers.


MacRumors provides the latest news related to Apple along with rumours related to the same topic. It is also an active iPhone and iPad development Forum. Every thread is replied to and there exist a wide variety of topics. It is worth to post your programming related queries there.

Experts Exchange

We can meet thousands of experts on Experts Exchange to answer every technical question, and it contributes to the success of professionals all over the world.

Dynamic Drive Forum

Dynamic Drive Forum is described as the programmers’ favourite place on the web because it helps them to find fault in their code and also the solution for the same.

So, next time you are stuck with an issue during the development of a program, don’t get depressed but explore these resources. You will surely find the light to come out of the cave you are trapped in.

– Jisna Mathew