Author
Stephanie Eckles
Comments
Start the Conversation
It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
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 sort of randomly picking from a color wheel until a palette "just feels right."
Our goal is to better understand what makes a palette "feel right" by exploring key color attributes with Sass color functions. By the end, you will … Read article
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 in third-party packages, and split your Sass into manageable "partials," it has a few limitations:
@import
is also a CSS feature, and the differences can be confusing@import
the same file multiple times, it can slow down compilation, 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 grows, compilation time increases. This is far from ideal.
It can be a real pain when the compilation time creeps over one or two seconds. For me, that's enough time to lose focus at the end of a long day. … Read article
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:
background-size
property, you can set your pseudo-element to any size you need without worrying that they will overflow the boundaries (or get chopped off).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 several list items, and you wanted them all to move on hover, but each one offset with staggered timing?… Read article
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 but change its background or text color based on a theme. For example, in an alert, we might need a warning style, an error style, and a success style – each of which might be slightly different, like this: … Read article
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;
}
}
That's straightforward enough. But what if my element has several sub-elements and the breakpoint affects them as well? There are different approaches, and I'm never quite sure which one I should be doing.… Read article
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 my mind how useful it was! I dove right in and wanted to learn everything I could about it. Over the past five years, I’ve utilized a number of different Sass techniques and patterns and fell in love with some … Read article
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 the selectors come out flat:
.c-button__icon { }
The question was whether you do that or just write out the whole selector instead, as you would with vanilla CSS. Brad's post gets into all the pro's and con's of both … Read article
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 3.4.
LibSass is notable because it powers the majority of Sass ports. Over 30 of them, apparently, including the most popular one: node-sass, which provides Sass for the bajillion projects out there that wanna run an npm-y JavaScript-based … Read article