2 min read

Will Sass Change How Code is Written?

Will Sass Change How Code is Written?

It's important to keep up with technologies which will help us make our web development strategies as efficient and up to date as possible. Every so often, a new tool appears in the development world which may drastically change how we code. As a front-end developer, one of my favorites to have appeared over the past few years has been Sass (Syntactically Awesome Stylesheets). Sass is a stylesheet scripting language, technically called SassScript, which enhances CSS (Cascading Stylesheets) in many fun ways.

If you're not familiar with web development, CSS is the stylesheet language that is used to control all of the styles of websites. It controls everything from fonts, colors, and hover effects to the size of elements and where they are shown on the page. With the release of CSS3 the possibilities are seemingly endless, though that is a whole topic for another day.

As powerful as CSS has become, there are many features that would make it even more flexible, which is where Sass comes in. With Sass, we are now able to use tools such as variables and logic. For example, typically websites would have a few colors that are used throughout the entire site. So, you would have one color code copied over and over in several places throughout your file.

It may look something like this:

SASS_1

Now, what if you decide you want to change that blue color throughout the entire site? With CSS you would have to go through the entire file and replace every line with the new color code. However, if you used Sass, you could use something like this:

SASS_2

Notice how in this case, the color code only appears once. If you decide you want to change that color wherever it appears, you change it in one place, and it is automatically changed everywhere else '- which is a great time saver! You may also notice on line 24 there is another fun feature that Sass offers. If you decide you'd like a section to be a lighter version of the same color, Sass will handle that for you without having to touch Photoshop!

Another great feature that Sass offers is the use of mixins. When developing a website, we have to keep in mind that different browsers sometimes have different requirements. For example, when we want to have a box with rounded corners, Firefox, Internet Explorer (or whatever it's called this week), and Webkit browsers (such as Chrome and Safari) all need their own version of the 'Öborder-radius' attribute, which means what would be adding one line of code, really requires four just to make sure that everyone sees the same thing no matter which browser they choose to use.

SASS_3

With Sass, we can simplify this by using a mixin. This means that we can tell the code that when we use the '@include' line, to use all of the lines that that mixin uses.

SASS_4

This means that now every time we want to add rounded corners, we only have to add one line, and Sass takes care of the rest.

These are only two of many features that Sass offers, but just think of how much more efficient this makes building websites. By using tools like this, not only does it take less time for us to build themes, but it makes them much more flexible and easier to update in the future.


Related Posts

What is a Style Guide (Video)

Watch our new series, What You Need to Know, to learn about CommonPlaces Interactive and the services we offer to help you Communicate, Connect and Convert new customers.
2 min read

How Meerkat and Periscope Could Change the World

Meerkat and Periscope are the latest and hottest apps for the iPhone (Android versions are said to be under development), and they are remarkably similar. Once installed and activated on your phone,...
2 min read

The #1 Way Manufacturers Can Gain a Competitive Advantage

If you are a U.S. manufacturing company, you have very specific needs when designing, or upgrading, your website. Most critical is the choice you make on a content management system, or CMS. A CMS...
1 min read

The Perils of Web Development or Doing It the Right Way

When our clients come to us with an idea, chances are good they are imagining more than just "a website." Unline other industries, our customers do not come to us and simply say, "One website,...