はてなブックマーク

The stable release of Chrome 112, which is releasing today, is the first stable browser to add support for the new native CSS nesting feature. This feature—inspired by Sass’s nesting—adds the ability to nest style rules in plain CSS, and even uses Sass’s convention of & to refer to the parent selector. We here at Sass HQ are honored every time our language design inspires improvements in CSS itsel

The CSS working group has been up to all sorts of exciting stuff recently in the Color Level 4 spec, and the Sass team is starting to think about how to integrate those cool new features into Sass’s color model. We need more time to hammer out exactly the right designs for complex features like the Lab color space, but that doesn’t mean we can’t add a few new color goodies. Today we’re announcing

Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation. It’s fast, easy to install, and it compiles to pure JavaScript which makes it easy to integrate into modern web development workflows. Find out more or help out with its development on GitHub. Command LineCommand Line permalink Dart Sass’s stand-alone command-line executable uses the

After much discussion among the Sass core team, we’ve come to the conclusion that it’s time to officially declare that LibSass and the packages built on top of it, including Node Sass, are deprecated. For several years now, it’s been clear that there’s simply not enough engineering bandwidth behind LibSass to keep it up-to-date with the latest developments in the Sass language (for example, the mo

The Sass migrator automatically updates your Sass files to help you move on to the latest and greatest version of the language. Each of its commands migrates a single feature, to give you as much control as possible over what you update and when. UsageUsage permalink To use the Sass migrator, tell it which migration you want to run and what Sass files you want to migrate: sass-migrator <migration>

The Sass team has known for years that the @import rule, one of the earliest additions to Sass, wasn’t as good as we wanted it. It caused a litany of problems for our users: It was next to impossible to figure out where a given variable, mixin, or function (collectively called "members") was originally defined, since anything defined in one stylesheet was available to all stylesheets that were imp

Sass extends CSS’s @import rule with the ability to import Sass and CSS stylesheets, providing access to mixins, functions, and variables and combining multiple stylesheets’ CSS together. Unlike plain CSS imports, which require the browser to make multiple HTTP requests as it renders your page, Sass imports are handled entirely during compilation. Sass imports have the same syntax as CSS imports,

Over the past few months, I’ve been quietly working on a new project. Today I’m ready to announce Dart Sass to the world. It’s a totally new implementation of Sass, designed to be fast, easy to install, and easy to hack on. It’s not yet complete—I’m steadily working my way through sass-spec—so today I’m just releasing version 1.0.0-alpha.1. But it’s solid enough for you to download, play with, and

I’ve just pushed the button to release Sass 3.5.0-rc.1. If it seems like it’s been a while since the last release, that’s true! But there’s a good reason. We decided to enter feature freeze after the 3.5 release to give libsass, the super-speedy C++ implementation of Sass, time to reach feature parity with Sass 3.4. Libsass is much younger than Sass, and C++ is generally a slower language to work

LibSass is an implementation of Sass in C/C++, designed to be easy to integrate into many different languages. However, as time wore on it ended up lagging behind Dart Sass in features and CSS compatibility. LibSass is now deprecated—new projects should use Dart Sass instead. WrappersWrappers permalink LibSass is just a library. To run the code locally (i.e. to compile your stylesheets), you need

We’ve been trying to increase the pace of Sass releases, and it looks like we’ve succeeded. A mere five months after the release of Sass 3.3, we’re announcing the release of Sass 3.4.0, codename Selective Steve. Faster releases mean fewer major features per release, so there are only two big new things to talk about (although there are plenty of little improvements you can read about in the change

After ironing out a bunch of bugs in numerous release candidates, we’re finally ready to release Sass 3.3.0, codename Maptastic Maple, for public consumption. This release has a lot of exciting new features that you can read about in full in the changelog, but there are three that I want to draw your attention to in particular. Maps in SassScriptMaps in SassScript permalink As language designers,

ApplicationsApplications permalink There are a good many applications that will get you up and running with Sass in a few minutes for Mac, Windows, and Linux. You can download most of the applications for free but a few of them are paid apps (and totally worth it). CodeKit (Paid) Mac Prepros (Paid) Mac Windows Linux LibrariesLibraries permalink The Sass team maintains two Node.js packages for Sass

Contributing to this website? Awesome! Use this style guide, developed by Team Sass Design. If you add new design, please document it here. Site ObjectivesSite Objectives permalink Show why Sass is the best CSS Preprocessor, and why you should use it. Be a resource for those who are already using Sass, at whatever level.

Sass supports two different syntaxes. Each one can load the other, so it’s up to you and your team which one to choose. SCSSSCSS permalink The SCSS syntax uses the file extension .scss. With a few small exceptions, it’s a superset of CSS, which means essentially all valid CSS is valid SCSS as well. Because of its similarity to CSS, it’s the easiest syntax to get used to and the most popular. SCSS

Ruby Sass is Deprecated! Ruby Sass is in a sunset period where only critical bugs and CSS compatibility issues will be fixed. It will be completely unmaintained as of 26 March 2019. See the Sass website for details, and consider switching to the sassc gem Sass Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It's transla

Only Dart Sass currently supports loading built-in modules with @use. Users of other implementations must call functions using their global names instead. Sass provides many built-in modules which contain useful functions (and the occasional mixin). These modules can be loaded with the @use rule like any user-defined stylesheet, and their functions can be called like any other module member. All b

Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything set up. PreprocessingPreprocessing permalink CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass has feat

Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects. If you’re looking for an introduction to Sass, check out the tutorial. If you want to look up a built-in Sass function,

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. CSS Compatible Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries. Feature Rich Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has work