Snowpack is a modern, lightweight toolchain for faster web development. Traditional JavaScript build tools like webpack and Parcel need to rebuild & rebundle entire chunks of your application every time you save a single file. This rebundling step introduces lag between hitting save on your changes and seeing them reflected in the browser.

Design systems streamline development, communication, and consistency – but often rely on dedicated teams and extended budgets. We wanted a tool that helps create and maintain living style guides & pattern libraries in an agile process, and on a budget. Herman helps you keep your development process simple – and your UX consistent – as you iterate on patterns and scale over time.

Robust design systems require meaningful, readable, reusable code. These Sass utilities are designed to help define and manage your design tokens (colors, fonts, sizes, etc.) in a format that can be understood by both humans and parsers – opening the door for automation, while improving consistency and readability. These tools also integrate with Herman, our automated living pattern-library generator built on SassDoc.

When design systems are the source of truth and subscribers have easy access to code, it's important that code is well-tested. Lindsey shares how we unit test our Sass and how you can too.

Have you ever wondered what balls are similar in size? Which ones are larger or smaller than others?

Simple quantity queries mixins for Sass. Use quantity as a condition to style your items.

Sass maps give you clearer, more flexible variables — learn how to make a map-powered stylesheet with some basic examples.

A presentation at CSS Summit 2015 by Miriam Suzanne

Ignis is a Sass library that I developed to create websites. Its main feature is a BEM system, though it also includes some other useful features:

Easing background gradients
Context stacks: A temporary data storage
Property trees: A persistent data storage
Responsive properties: A generalization of responsive typography
Modular scales

In 2014, Jackie Balzer wrote an excellent piece for Smashing Magazine on using Sass to automatically manage the z-index of elements using lists.

I’ve been using this technique since an ex-colleague introduced me to it in early 2015, but the disconnect between maintaining multiple lists was starting to bug me.

So, I’ve come up with a variation which uses Sass maps and lists, and allows me to clearly see the hierarchy of the different elements.

Sass variable loader for webpack

Прямо сейчас я начинаю верстать новый проект. Я решила, что это хороший повод познакомиться с новой для себя технологией, поэтому выбрала в качестве препроцессора PostCSS. Меня привлекает в нем скорость работы и модульность, однако до сих пор не было случая попробовать его на реальном проекте. Сейчас в основном я использую Sass, и невозможность (хоть и временная) использовать node-sass с шестой версией Node.js, и то, как из-за этого у меня поломались стили в проекте, тоже послужило причиной поиска альтернатив.

Atlas is living style-guide, pattern library, guidelines and documentation static site generator with extensive styles monitoring and Sass components reports. It generates documentation from markdown files and documentation comment in scss files.

Article here — https://medium.com/@nocreativity/manage-your-critical-css-with-this-postcss-plugin-6be1ca226c06

SassCast has a strict mode in which it will throw errors when failing to cast values (most notably to colors and numbers).

Long ago, in the dense mists of the Internet’s past, intrepid adventurers tackled danger in much the same way: sling a fixed 960px layout, fight in a set grid and fire their typography in pixels to ward off evil.

Pure Node.js Sass linting

Add Sass variables to gulp stream, so that you can use for example environment variables in your Sass build process.

sass-to-js is a Library to easily pass Sass variables via CSS to JavaScript.

It provides Sass methods to save Sass values as JSON to CSS and JavaScript helpers to read them from CSS to JavaScript objects.