Arin Adamson
By Arin Adamson | Web Dev | April 15, 2015

Sass Keeps CSS Organized and Structured

CSS (or Cascading Style Sheets) has come a long way since it was founded in 1996. Now, we can control browser webkits, how elements display at particular screen widths and do all other sorts of cool things that weren’t possible back then. The one major feature that CSS lacks is an efficient way to organize and keep all of your styles structured easily. We can import multiple css stylesheets into one, but using this method compromises website load speeds. With teams of web developers collaborating on one website (and big websites using hundreds, sometimes thousands, of selectors) it is very important to have organization and structure. The solution is Sass CSS. Sass stands for Syntactically Awesome Style Sheets, a totally accurate name. Simply put, Sass is a compiler that outputs one stylesheet from a structured set of .scss files. It’s simply beautiful, giving today’s developer a way to use programmatic capabilities for CSS and keep your stylesheets nice and organized.

Organization

If you developed a big website and created a stylesheet from scratch, you know how big and messy things can become within the stylesheet. In my opinion, organization is the major feature that Sass provides for developers. In Sass, you can separate parts of the stylesheet into different files and then use the compiler to create one stylesheet for the website. You circumvent the necessity for users to load individual css stylesheets, which would happen if you used the same method without Sass. This feature enables teams of web developers to collaborate on a project seamlessly. Prior to Sass, development teams would need to create styles and then pass the styles to a manager to overview and include in the master stylesheet. It was either that method or one stylesheet, one developer. Needless to say, Sass helps improve the overall quality control for a web development team.

Variables, Functions and Mixins

If you could use variables in stylesheets, how much easier would it be to edit and structure stylesheets? If you said, “it would improve your life significantly”, I agree with you. Sass gives us that ability – it was truly an amazing day when I was first able to create variables for my stylesheets. Not only can you create variables, but you can create functions, conditional statements and snippets of styles called mixins. Sass brings a lot of features to the table that enable you to quickly make edits and quickly implement styles for any type of website. If you aren’t using these features for your stylesheets, you are being left behind.

Nesting Selectors

In Sass, you have the ability to nest classes in other classes and further organize the structure of your stylesheets. This is useful for targeting selectors within other selectors. It gives you a nice method of organization. In Sass, a selector such as .example .element-1{} can be created like .example{ display:none; .element-1 { display:block; } }. You don’t have use nesting for your selectors, however I would highly recommend it.

Minification

Minification of stylesheets is another important aspect in today’s internet driven world. Minified stylesheets improve the page speed of websites by decreasing the file size of the stylesheet, thus reducing the amount of bits an internet user is required to load. Sass compilers typically include this feature, which outputs a minified stylesheet. This may not seem like much, but can be a big help.

Integrating with Sass

So you have decided that Sass is something that you want to use on your next website? Take the time to overview the documentation for Sass and learn the basics. Next, you will need a Sass compiler. There are a few options to choose from, and personally I prefer Koala. The next step is to start creating some “Sassy” stylesheets and compile your first css stylesheet using Sass. You may be overwhelmed at first – transitioning from a method that you are used to can take some time, which is why I recommend slowly moving to Sass. The great thing about Sass is you can still use old conventional methods, but remember that you now have the power to take your CSS code 10 steps further.

background dots

Related Topics

Site Speed’s Impact on Search Visibility and Your Audience

by Ryan Rosati

About 13 years ago, Apple first introduced the iPhone. Since then, the consumption of media through mobile devices has skyrocketed. In 2013, mobile…

Inside the Buyer’s Journey (Pt 1):
Buying into Brand

by Angela Asca

Why is brand important to the buyer’s journey? Branding is so important in catering to your users. It’s also imperative to make sure…

Gutenberg for WordPress: Your Questions Answered

by Stephani Worts

Chances are if you have a WordPress website, you’ve heard by now of “Gutenberg”. While visions of the 15th-century inventor might spring to…

In the time it takes to read this sentence, you could be on your way to a well-oiled demand generation machine. Ready for your blueprint?

yes, i want my Digital blueprint