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
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. 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 g
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
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial 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 understand it. Basic Nesting .pa
Introducing Sass Modules | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. 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
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 reÂintroducing 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, Luke Harrison will explore a Sass-oriented solution for dealing with unused CSS, avoiding the need for complicated Node.js dependencies involving headless browsers, and DOM emulation. He will then touch upon some existing solution for removing it from stylesheets. In modern front-end development, developers
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
Programming Sass to Create Accessible Color Combinations | CSS-Tricks
Handling Unused CSS In Sass To Improve Performance — Smashing Magazine
Logdown - Site Maintenance
{{#tags}}- {{label}}
{{/tags}}