info@connectthink.com
facebook
linkedin
twitter
email
Connect Think Logo
  • HomeWelcome
  • ServicesWhat We Do
  • PortfolioWhat We’ve Done
  • About UsWho We Are
  • BlogOur Thoughts
  • ConnectGet in Touch

Developer's Corner

Sass
Comments are off

Why it’s time you used Sass

01 Oct 2013
Adam Patarino
CSS, mixins, nesting, Ruby, Ruby on Rails, Sass, SCSS, syntactically awesome Stylesheets, workflow

Listen, we need to talk. As a web developer, you’re probably still using vanilla CSS (Cascading Style Sheets), the primordial styler of markup since the world wide web came into existence. Sure, CSS has changed a lot in the last decade, but it’s still redundant and difficult to translate between developers. Be honest, when was the last time you looked at someone else’s CSS style sheet and said, “Oh, yeah. That’s exactly how I would have done that.”

New practices like Object Oriented CSS and SMACSS are standardizing the decrepit language. But unfortunately, there are still problems with CSS—it’s still a pain to read, write, or make changes. Worst of all, it makes communication and collaboration a real struggle. Wouldn’t it be great if there was a way to make CSS more like a programming language instead of a markup language? One that facilitates natural communication and collaboration? There is a way. It’s called Sass.

SASS: Syntactically Awesome Stylesheets

Syntactically Awesome Stylesheets

What is Sass?

You’ve probably heard of Sass, or Syntactically Awesome Stylesheets. It’s a preprocessor to CSS, which means it takes standardized Sass code, puts it through a compiler, and generates semantic CSS that browsers can read. You get all the features of CSS, yet your end users can’t tell the difference.
Sass introduces several key features that make it such a powerful upgrade to CSS. Features like variables, mixins, conditionals, and nesting. This post isn’t going to teach you everything about Sass, but you can learn the basics here.

Why Sass Will Change Your Life

Sass introduces a series of great tricks that make it easier for you to write CSS. It also allows teams to collaborate on projects in a brand new way. Nesting, variables, and mixins are all capable of bringing standardization to projects that vanilla CSS could never do.

For example, you need to update a blog feed that one of your fellow developers built last week. When you open their Sass file you find colors described as words like $brand-blue, $warning-red, $alert-yellow, and you realize, “I know exactly how this site should look without ever seeing the front end.” That is a moment of pure magic. You just read another developer’s style sheet and you didn’t have to pound your head against your desk.

Abstracting CSS into variables means updates are easy as changing one line. By assigning colors and dimensions to variables and whole sets of styles to mixins, making changes becomes as simple as changing the definition. No need to find+replace. It also opens the door for things like personal frameworks and reusable styles, which translates to having more free time. Everyone could use a little more free time.

And if those reasons aren’t enough, abstracting CSS also helps when it comes time to build new features or make changes. Sass brings a new implicit communication between those writing styles and those reading them. That is to say, Sass makes it easier to communicate with other developers.

Developers are Collaborating

Why are things like WordPress, Rails, and Sublime Text so great? Because there are a ton of developers out there who are developing amazing things for them. Have a problem? Chances are someone has built a WordPress plugin or Ruby GEM for it. With all it’s support, Sass enters into that dimension of perpetual remixes, where everyone builds on great ideas and you reap the rewards.

Compass is one of those great ideas. It’s a library of prewritten styles that will help save you time. Things like vendor prefixes, CSS elements, gradients, etc. You include the mixin and it does the hard part. Imagine never thinking about how webkit’s syntax differs from moz again? And because Compass is so widely used, there are solid plugins built with it in mind, like Susy Grid and Color Schemer. As a developer, tools are important, followed by having a community. Sass has both.

Sass is the Future

The future is here. Sass is one of the fundamental ground shifts that rarely occur and swell into a ubiquitous part of building websites. By abstracting CSS into variables and mixins, we can open a new level of communication with other developers as well as ourselves. Join the already thriving community of developers and designers and start using Sass.

Want to learn more?

Check out these sites with more great information on how to bring Sass to your next web development project:

  • CSS-Tricks: http://css-tricks.com
  • CSS TV: http://css.tv
  • The Sass Way: http://thesassway.com
About the Author
Adam specializes in front-end development, including HTML, CSS, PHP, JavaScript, and WordPress CMS for Connect Think. Read more posts by Adam.

Social Share

Search

Categories

  • Case Study
  • Connect Think News
  • Developer's Corner
  • Industry News
  • Mobile
  • Social
  • Success Stories
  • Web

Archives

  • July 2018
  • October 2017
  • July 2016
  • June 2016
  • April 2016
  • February 2016
  • November 2015
  • June 2015
  • March 2015
  • November 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • April 2014
  • March 2014
  • January 2014
  • December 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013

Tags

app app building app development app guidelines apple Apple Watch application development Apps back end integration Basecamp build apps Case Study connect think CSS developers Drumstick Dash FatStax fatstax for iPad git github Internet Explorer iOS iOS app iPad iphone iWatch mobile modeling OSX plugins programming Sass SCSS Security Simon App software development Swift technology Updates WatchKit watchOS 2 web development WordPress workflow WWDC

From the Blog

  • Consulting for Software Developers 101: A How-to Guide
  • Move Your Feet this Thanksgiving with Wheeler Mission
  • FatStax: Android Application

@connectthink on twitter

  • 178 days ago
  • 193 days ago

Featured Work

Memory Meals

MemoryMeals™

20 Mar 2018
Traders Point Creamery

Traders Point Creamery

15 Mar 2018
CIRTA

Central Indiana Regional Transportation Authority

15 Mar 2018
Indiana State Fairgrounds & Event Center

Indiana State Fairgrounds

20 Nov 2015

Tilson HR

20 Nov 2015

Get in Touch

6507 Carrollton Ave.
Indianapolis, IN 46220

info@connectthink.com

Sign up for our newsletter!

  • This field is for validation purposes and should be left unchanged.
Connect Think, LLC BBB Business Review © 2016, Connect Think, LLC