Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Sassの新しいモジュールシステム / Introducing New Sass Module...
Search
ダーシノ
October 10, 2019
Technology
0
670
Sassの新しいモジュールシステム / Introducing New Sass Module System
Sassの新しいモジュールシステム(@use/@forwardの紹介と@importとの比較)を紹介します。
https://twitter.com/bc_rikko
ダーシノ
October 10, 2019
Tweet
Share
More Decks by ダーシノ
See All by ダーシノ
がんばりすぎないAI活用 & Tips / Working with AI
bcrikko
0
80
存在感が薄い?!意外とがんばってるさくらインターネットFEチーム / Frontend Conference 2024
bcrikko
1
4.2k
フロントエンドの複雑さに立ち向かう / Tackling Complexity of Front-end Software with DDD and Clean Architecture
bcrikko
19
17k
社内勉強会やっていきガイド / Tips for Sustainable Study Groups
bcrikko
4
2.1k
加速するコンポーネント設計入門 / Component Design as an Accelerator
bcrikko
10
6.8k
自分がやった設計反省会 / Evaluation of my Architecture
bcrikko
0
480
コンポーネント指向時代のmargin戦略 / Rethinking the relationship between Components and Margins
bcrikko
1
3.4k
知ってトクするDevToolsの使い方 / DevTools Tips you should know
bcrikko
1
550
伝わるバグ報告 / How to write a better bug report
bcrikko
2
700
Other Decks in Technology
See All in Technology
今日から始めるpprof / Pprof workshop for beginners
ymotongpoo
6
780
データエンジニアがこの先生きのこるには...?
10xinc
0
400
analysis パッケージの仕組みの上でMulti linter with configを実現する / Go Conference 2025
k1low
1
240
[2025-09-30] Databricks Genie を利用した分析基盤とデータモデリングの IVRy の現在地
wxyzzz
0
400
Windows で省エネ
murachiakira
0
140
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
280
AWSのProductのLifecycleについて
stknohg
PRO
0
290
stupid jj tricks
indirect
0
7.5k
API提供者のためのMCPサーバー設計ガイド / MCP Server Design Guide for API Providers
yokawasa
0
230
AIコーディングとエンジニアリングの現在地 / A Snapshot of AI Coding and Engineering(Sept. 2025)
ar_tama
0
160
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
310
FastAPIの魔法をgRPC/Connect RPCへ
monotaro
PRO
0
470
Featured
See All Featured
Done Done
chrislema
185
16k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Designing Experiences People Love
moore
142
24k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Transcript
Sassの新しい モジュールシステム ‑‑‑‑ @use と @forward ‑‑‑‑ フロントエンド交流会 ‑ 2019/10/10
ダーシノ(@bc̲rikko)
自己紹介 ダーシノ(@bc̲rikko) さくらインターネット フロントエンドエンジニア NES.css ファミコン風CSSフレームワーク 世界ランク 4位 ※GitHub css‑framework
topicでのスター数
注意事項 Sassにはいくつかバージョンがある Dart Sass Dartで実装されていて、新機能が先行実装されている @use や @forward が実装されているのはコレ LibSass
C++で実装されていて、node‑sassとかで使われている こだわりなくSass書いてる人はたぶんLibSass使ってる Ruby Sass R.I.P. これから話す内容は Dart Sass 1.23.0以降 でしか使えません! (2019年10月時点)
Sassに新しいモジュールシステムが やってきた https://github.com/sass/dart‑sass/releases/tag/1.23.0
新しいモジュールシステム @use @import に代わるもの スコープや名前空間などいろいろ使える @forward ファイルをまとめて読み込んで公開できるもの
@import vs @use # @import @use スコープ グローバル ファイル単位 名前空間
なし ファイル名 (変更可能) プライベート変数 なし あり !default の変数 グローバルに定義 読み込むときに上書き可 CSSの重複 する しない
@import の問題点 読み込むとグローバルに展開されどこからでも参照できる 依存モジュールがわかりづらい 変数名や関数名などの命名に工夫が必要 廃止予定 The Sass team discourages
the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead. https://sass‑lang.com/documentation/at‑rules/import
@use の特徴 スコープ・名前空間のコントロールができる 依存関係がわかりやすい 汎用的な命名をしても大丈夫 !default の上書きが容易 グローバルに定義しなくてよい
@use のスコープ // variables/̲colors.scss // private (prefixに ̲ or ‑
をつけるとprivateになる) $_blue: #3D7FF1; $‑blue: #3D7FF1; // public $primary: $_blue !default; // style.scss @use 'variables/colors'; a { // <namespace>.<variable|function|mixin> のように参照する color: colors. $primary; } a.blue { // ERROR: $̲blueはprivateなのでアクセスできない color: colors.$_blue; }
@use の名前空間 1. 名前空間 = ファイル名 @use 'colors'; a {
color: colors. $primary; } 2. 任意の名前 ( as ) @use 'colors' as c; a { color: c. $primary; } 3. 省略 ( * ) @use 'colors' as *; a { color: $primary; }
!default の上書き // variables/̲colors.scss $_blue: #3D7FF1; $primary: $_blue !default; //
!defaultを上書き @use 'variables/colors' with ( $primary: #0229FF; ); a { // color: #0229FF; color: colors. $primary; }
@forward の特徴 複数のモジュールを読み込み、いい感じに整理してエクスポ ートする @use との違い @forward で読み込むとそのモジュールのメンバーを参 照できない エクスポートするメンバーを取捨選択できる
@forward でモジュールをまとめる 1つにまとめて新たなモジュールを作れる // utils/̲index.scss @forward 'variables'; @forward 'functions'; @forward
'mixins'; // style.scss @use 'utils'; a { // mixins を参照 @ include utils.link; // variables を参照 color: utils. $primary; // functions を参照 font‑size: utils.font-size( 'large'); }
show や hide で取捨選択する show や hide で公開/非公開を選べる // utils.scss
$size‑large: 30px; $size‑medium: 20px; $size‑small: 10px; @ mixin link( $size) { @ if $size == 'large' { font‑size: $size‑large; } @ else if $size == 'medium' { font‑size: $size‑medium; } @ else { font‑size: $size‑small; } } // $size‑large, $size‑medium, $size‑small は公開しない @forward 'utils' hide $size-*; // @mixin link だけ公開する @forward 'utils' show link;
なんか、すごい!
参考サイト Release Dart Sass 1.23.0 ∙ sass/dart‑sass https://github.com/sass/dart‑sass/releases/tag/1.23.0 Introducing Sass
Modules | CSS‑Tricks https://css‑tricks.com/introducing‑sass‑modules/