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
82
存在感が薄い?!意外とがんばってるさくらインターネット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.9k
自分がやった設計反省会 / Evaluation of my Architecture
bcrikko
0
490
コンポーネント指向時代の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
「Verify with Wallet API」を アプリに導入するために
hinakko
1
240
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
570
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9.1k
Where will it converge?
ibknadedeji
0
190
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
140
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
5.4k
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
0
140
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
190
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
mdstoy
0
130
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
110
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
110
Trust as Infrastructure
bcantrill
0
340
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Gamification - CAS2011
davidbonilla
81
5.5k
A better future with KSS
kneath
239
17k
Bash Introduction
62gerente
615
210k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Building Adaptive Systems
keathley
43
2.8k
Designing Experiences People Love
moore
142
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
It's Worth the Effort
3n
187
28k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
RailsConf 2023
tenderlove
30
1.2k
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/