Like any good web designer, I know CSS like I know my ABCs. CSS (short for Cascading Style Sheets), along with HTML, is the foundation of so much we do as developers. But I’m here to tell you that there are better ways to code.

Imagine you’re an artist. You’re asked to draw a picture of a sunset, but all you get to work with are some gray paint and a thick, messy brush. You’ll work with what you’ve got—but even if you’re da Vinci, your painting won’t be as good as it could be. To really work your magic, you need better tools (for starters, a few colors would be nice).

This is a little bit like Sass’s relationship to CSS: Sass is a stylesheet syntax that works as an extension of CSS3. It offers a bunch of handy features that make coding faster, cleaner, and more, well, colorful.

Sass first appeared in 2007. It’s short for Syntactically Awesome Stylesheets (seriously), and has two syntaxes:

• Indented syntax. This is the older, rarer Sass syntax. It was inspired by bare-bones coding languages like Haml, and uses line indentation rather than brackets or semicolons to separate blocks. Indented syntax files go by the extension .sass. The problem with this syntax is that it’s not compatible with CSS, and doesn’t look much like it, either. This makes indented syntax tougher for designers to learn and use.

• Sassy CSS (SCSS). This is the most commonly used form of Sass (introduced in Sass 3.0), and uses the file extension .scss. It works like an add-on to CSS3, meaning that every stylesheet that’s valid in CSS3, is valid in SCSS.

Whichever syntax you choose, think of Sass as CSS3 taken to the next level. Those tedious, repetitive features of CSS that you hate? Chances are, using Sass makes them simpler. Sass offers features like:

• Nesting. When you’re writing code for elements with many sub-components, like tables or lists, typing the same selectors over and over can get old fast. Sass helps you avoid this headache by nesting child selectors inside parent selectors. You can also apply nesting to properties of a given selector, like font or border attributes.

• Variables. You can use Sass variables to describe attributes of selectors that you plan to reuse. Variables are called out using the symbol “$.” Let’s say you want all text to show up in a shade of light blue, but don’t want to keep track of the color’s hexadecimal code.

First, write what you want your color variable to represent:

$lightblue: #00CCFF;

Then, apply that variable to your text:

$textcolor: $lightblue;

Variables are lifesavers on big, long-term projects. Rather than committing styles for colors, links, buttons, and tables to memory, write easy-to-remember variables into your code.

• Mixins. Mixins take variables a step further by allowing you to use a single selector to represent a whole section of code (for example, all style elements of a table). You can even add in equations to instruct an element to adjust sizing as needed. Sass also supports conditional states and “for” and “for each” loops. Best of all, mixins are automatically removed from your code when you compile, so they don’t affect file size. Check out Compass for a great library of reusable, open-source mixins.

Intrigued yet? This is just a sampling of what Sass can do. If you’re ready to add some Sass to your code, head here to learn how to install (it’s written in Ruby). And be sure to check out the developers’ complete Sass Reference Guide, which contains everything you need to know to make your stylesheets syntactically awesome.

Upgrading to Sass from CSS3 is like switching from dingy gray paint to a 64-color Crayola box. Once you get the hang of it, you won’t know how you ever did without.

Want to know more about coding with Sass? Atomic’s developers can give you the inside scoop.

 

In case certain other tech news this week had you distracted, here’s what’s new with Instagram, the app beloved by amateur food photographers and selfie addicts the world ’round. On August 8, the company announced that it had reached 150 million users. And 50 million of them signed up for the service in the past 6 months.

With that kind of user base, it’s no surprise the company made a second announcement: the previously ad-free app plans to roll out advertisements within the next year.

Instagrammers have known this day was coming since the site’s $750 million acquisition by Facebook in April 2012. As Facebook experiments with sponsored posts in addition to its ubiquitous pay-per-click sidebars, it’s no surprise that the social sharing pioneer wants its trendy little sister to start pulling her weight.

There’s been murmuring throughout the tech world on what an Instagram-ready ad might look like. Why the commotion? Other apps and platforms have been able to integrate ads without much user pushback. But Instagram has it a little tougher.

The app has a certain cool factor that just won’t mesh with “Lose Belly Fat with this One Weird Tip”-type ad trash. If the app wants to keep its loyal user base, it’ll have to find a way to make advertising hip.

Don’t panic yet. We’ve got plenty of #throwbackthursday-s to go before we have to deal with ads on the ’Gram. Until then, here are my predictions of what those ads might look like:

• Targeted ads based on a users’ activity and following lists. Facebook already knows how to mine users’ data to sell stuff. And because there are already many successful consumer brands using the app, developers will have a pretty good idea of what users—plus those they’re following and are followed by—are in to. Users can also share their genders and birth dates, allowing for further demographic targeting.

• Embedded posts á la Twitter and Facebook. Because Instagram posts already show up in a feed, it would make sense for ads to look like just another pic in the stream. Posts could link to an advertiser’s external website, or function as a “suggested account” for users to follow based on their interests.

• Integration of video. Instagram added functionality for 15-second video posts in June, a feature that advertisers are sure to cash in on. Imagine having to watch a full-screen interstitial ad (think YouTube) each time you wanted to comment on a photo or refresh your feed. For brands, these are a great way to sell to a captive audience. But used too often, these ads could get majorly annoying, and might repel users.

• Hate ads? Upgrade to Instagram Gold. It seems likely that Instagram will roll out in-app purchasing features over time, like paid filter options. So why not a premium version of the app? This could work well with the Instagram’s curated aura of exclusivity, and would allow the app to earn money without degrading its product.

Here’s the unfiltered truth: this could either go okay for Instagram’s popularity, or it could go really, really badly. It will all depend on whether ads are designed with consumers—or advertisers—in mind. Hopefully, Instagram will learn from the mistakes of its parent company and avoid the ad-weary “fatigue” that has plagued Facebook this year.

Time will tell whether Instagram can grow up, get a job, and still remain cool. We’ll be paying close attention to the platform’s evolution.

By the way: brands interested in connecting with consumers on Instagram don’t have to wait for the big ad rollout. Many retail and B2B brands are already maintaining viral, content-rich Instagram accounts for their businesses.

In fact, given the obstacles Instagram advertisers will likely face, focusing on great content marketing over paid ads on Instagram may be brands’ wisest option.

#staytuned.

Does your business need to get more social? Give Atomic a call, and we’ll help you build some buzz.