The Internet has changed, grown, and become more complex since the early 1990’s, and Cascading style sheets (CSS) have been around since the beginning. Created out of the need to style web documents to look nicer, CSS became an important and vital part of web design and development today.
With the vast changes in technology, our CSS has become more robust as well as more time consuming to our process. Deeper functionality means more complex code. Simplifying without cutting corners is important to both developers and clients alike.
We are always on the lookout for ways to improve our process. Striving to work quick, aspiring to produce the best code possible, and pushing the envelope of what we create.
All this within scope and under-budget for the client. Therefore we needed something... something that could give us the superhero-like ability to code crazy fast.
A CSS preprocessor provided what we needed.
What is a CSS preprocessor?
A CSS preprocessor is a programming language that takes a preprocessed bit of code and creates a nice, clean, and pretty chunk of CSS. It takes all the unprocessed code and produces the good ol’ fashion CSS that browsers know and love.
Enter SASS (Syntactically Awesome Stylesheets), the CSS preprocessor of choice for The C2 Group. SASS’s flexibility, community, and extendibility really caught our attention, and we’ve wholeheartedly adopted SASS into our workflow.
Enough technobabble. What does this look like?
In the old days we’d write these long and arduous lines of code, at times misspelling things, and break classes so we’d have to go back and debug. With SASS, it’s less breaking and more doing.
Let’s look at this little, SASSy piece of code.
<p> CODE: https://gist.github.com/thec2group-blog/1ae702f2d6ec30241546724fb8e147ac.js</p>
The CSS selected are NESTED within each visually. When the preprocessor takes this code and processes it, it writes everything so any child class adopts the parent class’s title.
So, when this is processed, it would look like this:
<p> CODE: https://gist.github.com/thec2group-blog/655e69c0064a40baf570d7370635e5fe.js</p>
The code is written faster by the developer and the preprocessor churns out this easy-to-read CSS.
Where do we go from here?
There are a myriad of applications for using SASS. A common use is defining variables within a SASS file for colors and fonts to reference through a stylesheet. It’s also easy to create mixins that define whole blocks of CSS to add to different classes, helping a developer code faster and “cleaner”.
Creating nested styles ensures cleaner code, easier to follow CSS files, and most importantly enables us to create a better user experience.
What do you think? Do you use SASS? What about other preprocessors like LESS or Stylus? Chime in below!