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 ダーシノ
存在感が薄い?!意外とがんばってるさくらインターネットFEチーム / Frontend Conference 2024
bcrikko
1
4.1k
フロントエンドの複雑さに立ち向かう / Tackling Complexity of Front-end Software with DDD and Clean Architecture
bcrikko
19
16k
社内勉強会やっていきガイド / 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.3k
知ってトクするDevToolsの使い方 / DevTools Tips you should know
bcrikko
1
550
伝わるバグ報告 / How to write a better bug report
bcrikko
2
690
決断力を消耗しないSass開発環境構築 / Set up Sass development environment
bcrikko
0
550
Other Decks in Technology
See All in Technology
VPC Latticeのサービスエンドポイント機能を使用した複数VPCアクセス
duelist2020jp
0
350
DDD集約とサービスコンテキスト境界との関係性
pandayumi
2
160
mruby(PicoRuby)で ファミコン音楽を奏でる
kishima
2
490
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
180
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
32
12k
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
3
900
実践アプリケーション設計 ③ドメイン駆動設計
recruitengineers
PRO
13
4k
Webアクセシビリティ入門
recruitengineers
PRO
3
1.4k
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
240
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
4
780
まだ間に合う! StrandsとBedrock AgentCoreでAIエージェント構築に入門しよう
minorun365
PRO
10
690
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
masahirokawahara
1
950
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Embracing the Ebb and Flow
colly
87
4.8k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
The World Runs on Bad Software
bkeepers
PRO
70
11k
It's Worth the Effort
3n
187
28k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
How to train your dragon (web standard)
notwaldorf
96
6.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Fireside Chat
paigeccino
39
3.6k
Building Adaptive Systems
keathley
43
2.7k
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/