December 21, 2022 in Learn
How to Use the Double Ampersand Selector in Sass
The Sass ampersand (&) symbol is used to reference the parent selector in a nested rule. For example, the following targets .btn on :hover: .btn { … &:hover { background: dodgerblue; } } We can also place the & after…
August 23, 2018 in Learn
How to Install Sass on Windows with Chocolatey
Do you want to know how to Install Sass on Windows? With Chocolatey, installation and updates make life and CSS management so much easier.
August 21, 2018 in Learn
How to Install Sass on MacOS with Homebrew
Have you ever needed to replace the same color in 50 places throughout a gigantic CSS file? It sure would be nice if you could make that color a variable and change it in one place. Functions and mixins? Those…
June 21, 2016 in Learn
Getting Started with Static Sites
You may have heard the buzz about so-called “static” websites. In this post, I’ll tell you what they are, what’s the big deal, and what you need to know to build one. The First Static Sites In the early years…
May 6, 2015 in Learn
Intro to Neat — A Semantic Sass Grid
Mobile devices came to conquer the planet, and they won. Well . . . mobile devices at least seem to dominate the way in which we access the Web. As a result of the mobile revolution, we no longer have…
September 4, 2014 in Learn
Smarter Sass Mixins with Null
With Sass mixins we’re able to pass a list of arguments to set the values of properties. For example, the following mixin uses four variables as arguments to define the display, padding and margin properties of an element. @mixin display ($disp, $padding, $l-margin, $r-margin)…
August 27, 2014 in Treehouse News
New Course: Advanced Sass
Now that you know the basics of Sass, it’s time to put these new skills to work in the best way possible. Learning the ‘best practices’ for writing Sass will gain you admiration among your peers. There are three sections…
July 31, 2014 in Learn
Modular Pseudo-Elements with Sass
When generating pseudo-elements with CSS, we usually need to define certain properties to display the elements. This often means repeating CSS declarations for content, display and position, the most common properties used for generating shapes with pseudo-elements. With Sass, we’re able to…
December 6, 2013 in Community
An Interview with Hampton Catlin
Hampton Catlin is widely known for being the creator of Sass and Haml. He’s also the author of “The Pragmatic Guide to Sass,” built the mobile version of Wikipedia, Dictionary! for iPhone, and founded the libsass project. I recently interviewed Hampton…
July 18, 2013 in Learn
CSS Tip: A Better Clearfix with Sass
The CSS clearfix has been a must-have in our web design toolkit for quite some time and, until new layout features like flexbox become more stable, we’ll always need some form of clearfix in float based layouts. There are several…
July 8, 2013 in Learn
CSS Tip: Better Rounded Borders
We’ve all used border-radius in our designs to round the corners of images, divs, navs, etc. But have you ever noticed what happens when a thick border is added to an element with a border radius? As we learned in…
April 15, 2013 in Learn
Extending Placeholder Selectors with Sass
I recently wrote an article on creating a themable button set with Sass where I used a mixin to define all base styles, then a color value was passed as an argument when included in each theme. Example: @mixin btn-theme($btn-color)…