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
660
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 ダーシノ
存在感が薄い?!意外とがんばってるさくらインターネットFEチーム / Frontend Conference 2024
bcrikko
1
4k
フロントエンドの複雑さに立ち向かう / Tackling Complexity of Front-end Software with DDD and Clean Architecture
bcrikko
19
15k
社内勉強会やっていきガイド / Tips for Sustainable Study Groups
bcrikko
4
2k
加速するコンポーネント設計入門 / Component Design as an Accelerator
bcrikko
9
6.6k
自分がやった設計反省会 / Evaluation of my Architecture
bcrikko
0
470
コンポーネント指向時代のmargin戦略 / Rethinking the relationship between Components and Margins
bcrikko
1
1.2k
知ってトクするDevToolsの使い方 / DevTools Tips you should know
bcrikko
1
530
伝わるバグ報告 / How to write a better bug report
bcrikko
2
680
決断力を消耗しないSass開発環境構築 / Set up Sass development environment
bcrikko
0
540
Other Decks in Technology
See All in Technology
ソフトウェアテストのAI活用_ver1.10
fumisuke
0
240
TypeScript と歩む OpenAPI の discriminator / OpenAPI discriminator with TypeScript
kaminashi
1
150
Slackひと声でブログ校正!Claudeレビュー自動化編
yusukeshimizu
3
180
DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!
martin_lover
0
160
技術書典18結果報告
mutsumix
2
180
継続戦闘能⼒
sansantech
PRO
0
220
エンジニアが組織に馴染むために勉強会を主催してチームの壁を越える
ohmori_yusuke
2
120
iOS/Androidで無限循環Carousel表現を考えてみる
fumiyasac0921
0
130
Cursor Meetup Tokyo
iamshunta
1
330
MCP Clientを活用するための設計と実装上の工夫
yudai00
1
800
ソフトウェアは捨てやすく作ろう/Let's make software easy to discard
sanogemaru
10
5.8k
ゴリラ.vim #36 ~ Vim x SNS ~ スポンサーセッション
yasunori0418
1
350
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Adopting Sorbet at Scale
ufuk
76
9.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
620
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing for humans not robots
tammielis
253
25k
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/