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 System
Search
ダーシノ
October 10, 2019
Technology
0
530
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 ダーシノ
フロントエンドの複雑さに立ち向かう / Tackling Complexity of Front-end Software with DDD and Clean Architecture
bcrikko
17
7k
社内勉強会やっていきガイド / Tips for Sustainable Study Groups
bcrikko
4
1.8k
加速するコンポーネント設計入門 / Component Design as an Accelerator
bcrikko
9
5.7k
自分がやった設計反省会 / Evaluation of my Architecture
bcrikko
0
350
コンポーネント指向時代のmargin戦略 / Rethinking the relationship between Components and Margins
bcrikko
0
510
知ってトクするDevToolsの使い方 / DevTools Tips you should know
bcrikko
1
450
伝わるバグ報告 / How to write a better bug report
bcrikko
2
570
決断力を消耗しないSass開発環境構築 / Set up Sass development environment
bcrikko
0
440
本気でCSS芸やりたい人のためのbox-shadow講座 / Mastering box-shadow
bcrikko
6
6.7k
Other Decks in Technology
See All in Technology
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
350
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
200
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
260
ServiceNow Knowledge Learning Rise up
manarobot
0
210
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
データベース02: データベースの概念
trycycle
0
160
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
310
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
310
web-application-security
matsuihidetoshi
0
170
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
3
330
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
330
競技としてのKaggle、役に立つKaggle
yu4u
3
1.8k
Featured
See All Featured
How to Ace a Technical Interview
jacobian
272
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
In The Pink: A Labor of Love
frogandcode
138
21k
Infographics Made Easy
chrislema
238
18k
Building Applications with DynamoDB
mza
88
5.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
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/