Sass Indented Syntax Improvements
Bringing SCSS flexibility to .sass files
The Sass indented format is getting more flexible with the ability to have multiline statements, semicolons, and more.
Link
post type
2024 Links
Link post typeSass Color Spaces & Wide Gamut Colors
Inspect and manipulate the new CSS color formats in Sass!
CSS has a range of new color functions that support wider color gamuts (like
display-p3) and perceptually uniform color adjustments (likeoklch). Sass now provides additional tools for working with these new color formats, and converting between them.
Link post type5 Questions for Miriam Suzanne
I talked with Jens Oliver Meiert over at Frontend Dogma about our work here at OddBird, what’s happening in the CSS Working Group, and advice for getting started in frontend development.
2023
Link post typeCSS @scope
Keep selector conflicts to a minimum
The new
@scoperule is here! It’s a better way to keep our component styles contained – without relying on third-party tools or extreme naming conventions.
Link post typeSass Package Importer (Request for Comments)
A new proposal for importing from NPM packages in Sass
UI libraries like Vuetify and Bootstrap make it easy to extend their themes by providing Sass source files with their NPM packages. Now, Sass is requesting feedback on a simpler way to import those libraries into your Sass styles with e.g.
@use "pkg:bootstrap".
2022
Cascade Layers
Giving us control over the cascade
Don’t let specificity force you into strict selector conventions. Cascade Layers allow us to manage specificity without resorting to naming hacks or the
!importantflag.Sass Color Spaces (Request for Comments)
A new proposal for color management in Sass
There’s been a lot of exciting work in the CSS color specifications lately, and since the new features are already starting to land in browsers, we’ve been preparing to add support in Sass as well. My proposal for that is published and ready for public feedback!
-
see all Link posts
Link post typeA Complete Guide to CSS Cascade Layers
Cascade layers are a new CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on specificity hacks or
!important. This guide is intended to help you fully understand what cascade layers are for, how and why you might choose to use them, the current levels of support, and the syntax.
2020
Link post typeVery Extremely Practical CSS Art
CSS-Tricks asked a number of web builders the same question…
“What is one thing you learned about building websites this year?” I’ve always enjoyed the CSS art people create, but I’ve never ventured into it much myself. I’m familiar with many of the tricks involved, but still find it surprising every time: the way people are able to…
Video post typeDesign Engineering Handbook
Thoughts on the design & development process
Learn how design engineering brings together form and function in this new Design Better book written by Natalya Shelburne, Adekunle Oduye, Kim Williams, and Eddie Lou – including interviews with Miriam and others.
-
see all Link posts
Link post typeUsing Custom Property “Stacks” to Tame the Cascade
Since the inception of CSS in 1994, the cascade and inheritance have defined how we design on the web. Both are powerful features, but as authors we’ve had very little control over how they interact. Selector specificity and source order provide some minimal “layering” control, without a lot of nuance – and inheritance requires an unbroken lineage. Now, CSS Custom Properties allow us to manage and control both cascade and inheritance in new ways.
2019
Link post typeEmbracing the Universal Web
CSS-Tricks asked a number of web builders the same question…
“What about building websites has you interested this year?” There are constantly new features appearing in browsers – from subgrid to variable fonts to better developer tools. It’s a really great time to be re-thinking everything we know about design on the web. Responsive design has served us…
Link post typeIt’s My Job, and Yours
CSS-Tricks asked a number of web builders the same question…
“What about building websites has you interested this year?” The role of ethics in our modern web space has been on my mind for the past few years and I suspect it will occupy my thoughts increasingly as I move forward. With each encounter of a questionable feature…
Link post typeIntroducing Sass Modules
Sass recently launched a major new feature you might recognize from other languages: a module system. The new syntax will replace
@importwith@useand@forward– a big step forward for making Sass partials (one of the language’s most used features) more readable, performant, and safe. This article goes…
Link post typeWhy We Switched to React Hooks
Hooks are the new hotness in building web applications with React. In this article for BitSrc, Erica separates fact from hyperbole to examine why OddBird has embraced the new Hooks API to deliver a better product to clients, and how we’ve benefited from having simple, consistent patterns to manage state…
Link post typeCSS Custom Properties In The Cascade
a deep-dive into what’s possible
Pushing past the “variable” metaphor, CSS Custom Properties can provide new ways to balance context and isolation in our patterns and components.
Link post typeHas CSS finally come of age?
Steve Jenkins interviews Miriam about the state of CSS, and what’s coming next for the language – from Intrinsic Design to Dynamic CSS.
2017
Link post type18 Designers Predict UI/UX Trends for 2018
Figma asked 18 designers (including me) what UI/UX trends they predict for 2018. December, with its flurry of holiday parties, cheery out-of-office auto-replies and introspective weather patterns, provided the perfect opportunity to pause and survey the landscape.
Link post typeHow to Write Beautiful Sass
Excerpt from Jump Start Sass, chapter 11
Clean, beautiful code should be a goal in every project. If other developers need to make a change, they should be able to read what is there and understand it. Readable code is the core of maintainability. This excerpt from Miriam’s book, Jump Start Sass will help get you started…
Link post typeMore CSS Charts, with Grid & Custom Properties
Inspired by Robin Rendle, I demonstrate some of my early experiments combining CSS Grids and custom properties to create dynamic layouts and data-visualizations.
Link post typeStop Being Productive
It’s time to re-think what we’re measuring
Miriam reflects on the nature and value of productivity for the SuperYesMore series: The Human in the Machine.
Link post typeFun with Viewport Units
Viewport units have been around for several years now, with near-perfect support in the major browsers, but I keep finding new and exciting ways to use them. I thought it would be fun to review the basics, and then round-up some of my favorite use-cases.
2016
Link post typeLoops in CSS Preprocessors
No matter what acronym drives your selectors (BEM, OOCSS, SMACSS, ETC), loops can help keep your patterns more readable and maintainable, baking them directly into your code. We’ll take a look at what loops can do, and how to use them in the major CSS preprocessors.
Link post typeBeyond Pixels Profile
Experience design is a collaboration
Net Magazine featured Miriam this month with a Beyond Pixels profile. “Miriam Suzanne creates experimental experiences with her band and her fellow developers.”
CSS-Tricks Interview
Chris Coyier interviews Miriam when she joins the CSS-Tricks team as a Staff Writer. We talk about getting started in the industry, name confusion, founding OddBird, building Susy, and more.
Link post typeSass Toolkits, Live Q&A
I did a live Q&A at SitePoint in August, talking about: Customizing Susy for your projects Other ways to do layouts (and why you might not even need a toolkit) How to select a toolkit, or build your very own!
Sass Toolkits, Live Q&A
I did a live Q&A at SitePoint talking about: Customizing Susy for your projects Other ways to do layouts (and why you might not even need a toolkit) How to select a toolkit, or build your very own!
Sass Architecture
Excerpt from Jump Start Sass, chapter 11
I’m excited to release Jump Start Sass, a book I co-authored with Kitty Giraudel. Digital copies are available from SitePoint, with print editions sold by O’Reilly. Here’s an excerpt from Chapter 11, Sass Architecture.
