Home

Streamline Your CSS with Sass

I began using Sass yesterday and I am already in love.

I began using Sass yesterday and I am already in love. You can very quickly and easily streamline your CSS with Sass.

So what is it?

Well, you can read their site to find out more, but I've found these three main benefits: - CSS is more organized and readable - CSS becomes much more reusable - Writing code is more efficient

Organization

CSS files can get super long and muddy. Think about building a dynamic menu. You're going to have classes like this:

.main-menu {
/* styles */
}

.main-menu ul {
/* styles */
}

.main-menu ul li {
/* styles */
}

.main-menu li {
/* styles */
}

.main-menu li a {
/* styles */
}

With Sass, you would write it like this:

.main-menu {
/* styles */
ul {
/* styles */
li {
/* styles */
}
}
li {
/* styles */
a {
/* styles */
}
}
}

To me, nested styles just make sense. And this code is so much easier to read.

Reusability & Efficiency

If you're building a website, whether it's a theme for an existing platform or a custom content management system, most of your server-side and client-side code is reusable. So when you go to build your next site, you have much of the code already in place, except the CSS. The ability to use variables and functions in Sass makes globally changing your CSS a walk in the park.

It's Not CoffeeScript

Let me be clear about one thing. You aren't learning a new syntax. You aren't learning a new way to write CSS. This is absolutely worth the 30 minutes it takes to know how to use it. You won't be looking up syntax after the first time you use it. You're just writing CSS; it just has a few more features.

So what are you waiting for? Go use it!

Let's Connect

Keep Reading

Decreased Jekyll Build Times 5x with a Custom Asset Pipeline

My team and I ditched the jekyll-assets gem for a homegrown asset pipeline and decreased build times by a factor of five. This is how we did it.

Jan 10, 2019

Keep Stylesheets Organized With Continuous Abstraction

Stylesheets can get out of control really quickly. Here's the approach I use to stay organized.

Feb 17, 2016

Full-Size, Looping Background Video with YouTube Video

It seems looping background videos are the new thing. But you don't have to serve up the video on your server. Let's use a YouTube video to accomplish it!

Feb 12, 2016