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…
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…
January 29, 2014 in Learn
A Tale of Front-end Sanity: Beware the Sass @import
Imagine coming into work on your first day as a front-end designer or dev and getting your Rails development system up and running for the first time. You’re really excited to start working on something in the app or website…
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…
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)…
January 29, 2013 in Learn
Create a Themable Button Set with Sass
If you have yet to give Sass a try, don’t worry, this is a good place to start. And if you haven’t already read Andrew’s primer on Sass, give it a read for a better understanding of what we’ll be…
January 16, 2013 in Learn
The Absolute Beginner’s Guide to Sass
What is Sass? Sass stands for Syntactically Awesome Stylesheets Sass, and was created by Hampton Catlin. It’s a way to simplify your CSS workflow, making development and maintenance tasks easier. For instance, have you ever had to do a find-and-replace…