やさしいSassり方
•
3 j'aime•2,346 vues
初心者の方向けに、Sassの便利な機能や使い所をやさしく説明します。 http://media-massage.net/works/docs/easysass/
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à やさしいSassり方
Similaire à やさしいSassり方 (16)
Plus de 祐磨 堀
Plus de 祐磨 堀 (16)
やさしいSassり方
- 1. P R E S E N T A T I O N : フロントエンドエンジニア 堀祐磨 (ホリデー) やさしい Sass サ ス り方
- 3. やさしいSassり方 SassSass SassSassSass とても やさしい やさしい 普通 はげしい とても はげしい
- 6. やさしいSassり方 @17歳 @25歳 0 2,500 5,000 7,500 10,000 互換性の 確保 レスポンシブ デザイン 複雑化・ 大規模化・ 長期運用 CSS3の 登場 Sassが必要な理由 ∼まだCSSで消耗してるの?∼ せいぜい500行@2005年 たっぷり10000行@2013年 1つのサイトに必要なCSSの行数
- 7. やさしいSassり方 Sassが必要な理由 ∼まだCSSで消耗してるの?∼ まだCSSで消耗してるの? 複雑化・高機能化してくWebデザインに、 CSSだけでは生産性低下／機能不足 もっとプログラミング言語としての機能 • • • • • • • • • • • • • • • がないと立ち向かえない!
- 9. やさしいSassり方 Sassが必要な理由 ∼まだCSSで消耗してるの?∼ CSSプリプロセッサの台頭 LESS, Sass, Stylusといった種類がある 機能的にそれほど大きな差はなく、 好みで選んで良いレベル
- 11. 今 Sassろう
- 12. 今 Sassろう
- 18. やさしいSassり方 Sassるにはコンパイルが必要。コンパイルって何? コンパイルとコンパイラ 「コンパイラ」というアプリよって、 SCSSからCSSに変換「コンパイル」する 実際にWebで使うのは変換後のCSSファイル 変換後のファイルはコンパイラさえあればいつ でも作れるので、変換前のファイルの方が大事 SCSSとCSSの内容は等価 • • • • • • • • • • • • • •
- 19. やさしいSassり方 Sassるにはコンパイルが必要。コンパイルって何? おすすめのコンパイラ Codepen：オンラインで手軽に Sassを試せる Koala：デザイナーでも使いやすい gulp-sass + Gulp.js： 本当はこれが一番 (黒い画面) 優しい 手軽! 玄人
- 23. CSS
- 26. SCSS
- 27. SCSSCSS =
- 37. 変数の「宣言」 変数の「宣言」 変数の「値」 CSSに変換した際 同じ$名前のところに その変数の値が 自動的に置換される 入れ子の中で 宣言した変数は その入れ子の 内側でだけ有効 変数の「$名前」
- 41. やさしいSassり方 同じものは一箇所にまとめよう! 変数のルール 同じ変数に複数回値が入った場合、 その変数が使われている場所で最新 の値が適用される ここは black ここは red ここは yellow ここは red 宣言 また宣言 またまた宣言
- 43. やさしいSassり方 同じものは一箇所にまとめよう! 変数の良い使い方 フォント・テーマカラー・影色等、 サイト全体で使うものは一番最初に宣言 分かりやすい長めの名前を付け、 • • • • • 間違えて上書きしないようにする ある場所でしか使わない変数は入れ子の 内側で宣言し、名前は短くする • • • • •
- 47. 全体の横幅が458px 204px マージン8px マージン8px 同じ横幅 .small-box.small-box.large-box .outer-box 462pxに変更 9pxに変更 200pxに変更 462 - 200 - (9 x 2) 2 =122
- 48. 全体の横幅が458px 204px マージン8px マージン8px 同じ横幅 .small-box.small-box.large-box .outer-box 462pxに変更 9pxに変更 200pxに変更 462 - 200 - (9 x 2) 2 =122 13pxに変更 13 141 500pxに変更 500 137
- 49. やさしいSassり方 数字はその場で計算しよう! 演算 同じ単位同士での四則演算が可能 かけ算は * アスタリスク わり算は / スラッシュ 少数や丸括弧 ( ) も使えます 変数を組み合わせると強力
- 56. やさしいSassり方 ファイルを分けて整理しよう! Sassの@importは超イイ奴 コンパイルすると一つにまとまる! 一つ一つのファイルに役割を定め、関係 することを一箇所にまとめて管理できる
- 60. やさしいSassり方 ?
- 72. やさしいSassり方 まとめ
- 77. 今 Sassろう
- 78. Thank you!