For those who may not come from a design background, selecting a color palette is often based on personal preferences. Choosing colors might be done with an online color tool, sampling from an image, “borrowing” from favorite brands, or just …
Sass just launched a major new feature you might recognize from other languages: a module system. This is a big step forward for @import. one of the most-used Sass-features. While the current @import rule allows you to pull …
At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads the stylesheet for us in the browser. But, as the amount of Sass …
One of my favorite ways of adding icons to a site is by including them as data URL background images to pseudo-elements (e.g. ::after) in my CSS. This technique offers several advantages:
Let’s say you wanted to move an element on :hover for a fun visual effect.
@media (hover: hover) {
.list--item {
transition: 0.1s;
transform: translateY(10px);
}
.list--item:hover,
.list--item:focus {
transform: translateY(0);
}
}Cool cool. But what if you had …
I reckon that a lot of our uses of Sass maps can be replaced with CSS Custom properties – but hear me out for a sec.
When designing components we often need to use the same structure of a component …
I love nesting my @media query breakpoints. It’s perhaps the most important feature of Sass to me. Maybe I pick a method and do it like this:
.element {
display: grid;
grid-template-columns: 100px 1fr;
@include breakpoint(baby-bear) {
display: block;
}
Having been in the web development industry for more than 14 years, I’ve seen and written my fair share of good and bad CSS. When I began at Ramsey Solutions five years ago, I was introduced to Sass. It blew …
Brad Frost was asking about this the other day…
Sass people, which way do you do it and why? pic.twitter.com/dIBA9BIuCO
— Brad Frost (@brad_frost) October 1, 2018
.c-btn {
&__icon {
...
}
}I guess that’s technically “nesting” but …
There have long been multiple implementations of Sass. Most notably, the canonical Ruby version, now at 3.5.6. Then there is LibSass, the C++ version, which is at version 3.4 and…
…Current LibSass 3.4 should be compatible with Sass
Controlling scope is something you probably don’t tend to consider when working with CSS and Sass. We have had access to the ampersand (&) for quite some time now, which gives us a level of scope—but it’s easy …
