メタ言語であるSassの未経験者向けスライド。 ・Sassってなに？ ・なぜSassがいるのか？ ・Sassの最も簡単な導入方法 ・基本テクニック を紹介

1. Sassをはじめからていねいに
＜概要­基礎編＞

2. ホリグチ セイト
Front-End-Engineer
LIG.inc 所属
CSSとの出会いは
約15年くらい前
@seito_horiguchi
slideshare
facebook

3. Q.Sassって何？

4. .box {
padding: 10px;
h1 {
width: 100px;
}
}
1
サスペンションの略語。
自動車などの機械の部品。
2
アウグスト3世サス - ポー
ランド国王。
3
Syntactically Awesome
Style Sheets - メタ言語。

5. .box {
padding: 10px;
h1 {
width: 100px;
}
}
1
サスペンションの略語。
自動車などの機械の部品。
2
アウグスト3世サス - ポー
ランド国王。
3
Syntactically Awesome
Style Sheets - メタ言語。

6. • Sass概要 －なぜSassが必要なのか－
• 環境構築 －Sassを使うために必要な環境－
• 基本操作 －Sassの基本操作－
• おまけ
目次

7. Sass概要

8. Sassとは？

9. Sass = メタ言語
CSS Sass

10. なぜSassが必要なのか？

11. 昔

12. 今

13. • Webサイト＆アプリケーションの複雑化
• 運用フェーズでやることが増えた

14. ＝より効率的にCSSを書こう！

15. 環境構築
Step1. Rubyのインストール
Step2. Sassのインストール
Step3. 「Prepros」のダウンロード

16. Step1. Rubyのインストール
http://rubyinstaller.org/
※「Rubyの実⾏行行ファイルへ環境PATHを設定
する」にチェック

17. Step2. Sassのインストール
Windows
1.コマンドプロンプトを起動
2. 「gem install sass」 → Enter
Mac
1.ターミナルを起動
2. 「sudo gem install sass」 → return
※ 「sass –v」で確認できます。

18. Step3. Preprosのダウンロード
http://alphapixels.com/prepros/

19. 他の⽅方法
Gulp
http://gulpjs.com/
Grunt
http://gruntjs.com/
CodeKit
https://incident57.com/codekit/

20. 基本操作
Step1. ネスト
Step2. 演算
Step3. 変数
Step4. &
Step5. Partial

21. .box {
padding: 10px;
.hoge1 {
width: 100px;
}
.hoge2 {
width: 200px;
}
}
.box {
padding: 10px;
}
.box hoge1 {
width: 100px;
}
.box hoge2 {
width: 100px;
}
Sass CSS
Step1. ネスト

22. Step2. 演算
.hoge {
width: 10 + 10px;
height: 20px -‐‑‒ 10px;
padding: 5px * 5;
margin: (50px) / 5;
}
.hoge {
width: 20px;
height: 10px;
padding: 25px;
margin: 10px;
}
Sass CSS

23. Step3. 変数
$red：#BE3624;
$blue：#23599b;
$yellow：#F8C528;
.box-‐‑‒a {
color: $red;
}
.box-‐‑‒b {
color: $blue;
}
.box-‐‑‒c {
color: $blue;
}
.box-‐‑‒a {
color: #BE3624;
}
.box-‐‑‒b {
color: #23599b;
}
.box-‐‑‒c {
color: #F8C528;
}
Sass CSS

24. Step3. 変数
$path: "../../image/";
.hoge {
background:
url(#{$path}image.jpg);
}
.hoge {
background:
url(../../image.jpg);
}
Sass CSS

25. Step4. &
.hoge {
background: #fff;
color: #000;
&:hover {
color: red;
}
&.hidden {
opacity: 0.5;
}
.ie-‐‑‒hack &{
display: none;
}
}
.hoge {
background: #fff;
color: #000;
}
.hoge:hover {
color: red;
}
.hoge.hidden {
opacity: 0.5;
}
.ie-‐‑‒hack .hoge {
display: none;
}
Sass CSS

26. Step5. Partial
命名ルール
_̲base.scss @import "base" ;
・scssファイルの名前の先頭に”_̲”をつけると、コンパイルされないscss
ファイルになる
・よく使う@mixinのセットやクラスを書いておき、インポートして使う

27. おまけ

28. Sassにできることはいっぱい

29. • @for
• @each
• #{$hoge}
• Compass
• @mixin
• @include
• @content
• @extend
…etc

30. よきSassライフを！