The case for using Sass in 2022
Is Sass still relevant? It seems like we need to have this conversation every few months. Most recently, it was Jeremy Keith who suggested in his CSS Day talk that Sass has become obsolete. "A great tool becomes so successful it becomes obsolete. They are like R&D for the web platform and become polyfills when they get implemented in browsers" — @adactio #cssday — @Una, June 9, 2022 I think his in
Sass: LibSass is Deprecated
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
When Sass and New CSS Features Collide | CSS-Tricks
Recently, CSS has added a lot of new cool features such as custom properties and new functions. While these things can make our lives a lot easier, they can also end up interacting with preprocessors, like Sass, in funny ways. So this is going to be a post about the issues I’ve encountered, how I go around them, and why I still find Sass necessary these days. The errors If you’ve played with the n
Sassのモジュールシステムを@importから@useに移行する方法を考えてみた
先日、KOJIKA17さんの「Sassを@importから@useに置き換えるための手引き 」という記事を見て、2022年10月ころにはSassで@importが使えなくなる可能性があることを知りました。まだ2年ありますが、新しく取り組むプロジェクトでは@useを使ったモジュールシステムにしたいので、自分が使っている構成の置き換えについて考えてみました。 まずはアイディアをシェアをして叩き台にしてもらうのが目的ですが、他に良い書き方があったらぜひアドバイスいただきたいというのもあります。 試しながら、考えながら書いているので内容は変更される可能性が高いかもしれません。 Sassの新モジュールシステムについて Sassの新しいモジュールシステムについては、上述の記事や SHIFTBRAINさんのブログ がわかりやすかったです。ありがとうございます。 公式の発表と@useと@forwardのド
Sass: @use
Only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead. The @use rule loads mixins, functions, and variables from other Sass stylesheets, and combines CSS from multiple stylesheets together. Stylesheets loaded by @use are called "modules". Sass also provides built-in modules full of useful functions. The simplest @use rule is written @use "<url>",
Sassを@importから@useに置き換えるための手引き - kojika17
Sassの@importルールは、廃止されることが予定されています。 @useや@forwardといったルールに置き換わるのですが、これらは全く新しいシステムです。 これらの知見が溜まってきたのでご紹介します。 @import と 新しいモジュールシステム Sassの初期の方から実装されていた@importは、テキスト形式でSassファイルを読み込むための機能です。便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面がありました。 新しいモジュールシステムは、この問題を解消し、Sassをより柔軟に使用できるようにします。 @importではグローバルに指定されていた変数などは、ファイルごとにカプセル化され、ファイルの内容に基づいて解決できるようになりました。 現在、Dart Sassしか新しいモジュールシステムは使えませんが、Lib
The Sass Ampersand | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. The & is an extremely useful feature in Sass (and Less). It’s used when nesting. It can be a nice time-saver when you know how to use it, or a bit of a time-waster when you’re struggling and could have written the same code in regular CSS. Let’s see if we can really understa
Introducing Sass Modules | CSS-Tricks
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 If you @i
Feeling Sassy Again
Since 2015, our team has defaulted to PostCSS as our CSS processor of choice. Overall, we like it a lot. But we’ve recently considered reintroducing Sass to our stack. Our first taste of PostCSS was the Autoprefixer plugin, which we ran after Sass finished compiling. Since we were already limiting our use of nesting, loops, mixins and extends in Sass, we were able to transition fully to PostCSS w
現場で役立つ実践Sass（3）変数を使いこなす
現場で役立つ実践Sass（3）変数を使いこなす 連載 現場で役立つ実践Sass 変数はSassで最も使う機能の一つです。 変数を使うことでコードの再利用性が高くなるため、モジュール化やMixinには欠かせない機能です。 第三回目の今回は、Sassの変数まわりの仕様とTipsを紹介します。 ※今記事はRuby Sass 3.4.21で検証して書かれています。LibSassや、Sassのバージョンが違う場合は、コンパイル結果が異なる場合があります。 Sass変数とCSSネイティブ変数について Sassの変数は、コンパイルされたCSSでは、その変数の値に書き換えられます。なので当然そのままCSSとして使用することができます。 そして、現在策定中なのがCSSでも変数が使えるようになる CSS Variables (CSS Custom Properties) という仕様です。 ブラウザ対応状況は
OOCSS + Sass = The Best Way to Write CSS by Ian Storm Taylor
Object-oriented CSS is awesome. But littering your markup with non-semantic classes is not awesome. Those classes sprinkled all over your HTML are going to change, and that’s not gonna be fun. But if you combine OOCSS and Sass you get the best of both worlds: modular CSS without bloated, hard-to-maintain HTML. OOCSS leads to hard-to-maintain HTML.First off, quick disclaimer, a bunch of you probabl
65+ SASS Mixins Library » CSS Author
SASS is an extension of CSS it enables super cool features like variables and Mixins. SASS variables will allow you to store and reuse values through the stylesheet. Where mixing let you define and reuse blocks of styles.It is a great method you don’t need to type the same code over and over again. As you progress, you can see mixing repeated across various projects (box shadows, patterns..). So y
Handling Unused CSS In Sass To Improve Performance — Smashing Magazine
Do you know the impact unused CSS has on performance? Spoiler: It’s a lot! In this article, we’ll explore a Sass-oriented solution for dealing with unused CSS, avoiding the need for complicated Node.js dependencies involving headless browsers, and DOM emulation. In modern front-end development, developers should aim to write CSS which is scalable and maintainable. Otherwise, they risk losing contr
Stepping away from Sass
Stepping away from SassPublished on January 1st 2019 My latest site redesign and why I left out Sass and media queries in favour of native CSS grid, calc, viewport units and custom properties. Post link bridgy link Published on January 1st 2019 Cathy Dutton I try to rebuild or redesign my website at least once every year, it's a great way to keep up to date with HTML and CSS advances as well as wo
プログラマーから見た、SCSSの正しい(かもしれない)使いかた - Qiita
SCSSとは SCSSというのは、CSSのアレなところを何とかしようという目的で作成されたメタ言語です。詳細は省略します。 なにそれ？ ってかたは、コチラなどがわかりやすいのではないかと思います。 CSSのメタ言語Sass(SCSS)、LESSの完全入門 でですね。 ここで大事なのは、こいつは要するにCSS周りの技術ですので、つまるところは基本「デザイナーさんが使う」ものである、というところです。 彼らは概して、非常におおらかで、健康的で、寛容です。私たちサーバーサイドエンジニアのように、細かいことで「こんな仕様は許されんな！」「なんだよこの仕様設計したヤツって○○じゃねーの？」などとイラついたりしません。 なので、あんな欠点だらけのクソ規格であるCSSにも、特に気にしたりしないらしいのです。 ところがやはり、中には「CSSのそーゆーところって、やっぱ問題だよねー」って思う人々もいたらしく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sass Color Generator
2 Smartest Ways to Structure Sass | WDD
Programming Sass to Create Accessible Color Combinations | CSS-Tricks
Handling Unused CSS In Sass To Improve Performance — Smashing Magazine
Logdown - Site Maintenance
