First sass
-
Upload
toshiaki-sasaki -
Category
Design
-
view
2.799 -
download
5
description
Transcript of First sass
![Page 1: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/1.jpg)
2013.01.11 AC.tech Toshiaki Sasaki(Web designer at All Connect, Inc.)
![Page 2: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/2.jpg)
![Page 3: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/3.jpg)
Sassこわくないよ
![Page 4: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/4.jpg)
Agenda- Sass?-記法
-導入について
-まとめ
![Page 5: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/5.jpg)
Sass?
![Page 6: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/6.jpg)
Sass is CSS Preprocessor
- CSSを拡張するメタ言語
-CSSを普通に書くよりも効率良く書くことができる
メタ言語とは、ある言語について何らかの記述をするための言語である。それだけでは具体的な利用に関する目的をもっておらず、特定のルールを加えることで具体的な応用として利用可能となる。 -Wikipedia
“
![Page 7: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/7.jpg)
![Page 8: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/8.jpg)
CSSの文法だけを拡張するhttp://hail2u.net/documents/sass-and-sassy-css.html
![Page 9: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/9.jpg)
Why CSS Preprocessor?
-効率的なCSSコーディング
-表示速度向上のアプローチ
![Page 10: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/10.jpg)
How to Coding
![Page 11: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/11.jpg)
Nesting
• Sample & Demo
Nesting
#main { margin: 0; padding: 0; .block { background: #ccc; color: #f00; font-size: 12px; }}
#main { margin: 0; padding: 0;}
#main .block { background: #ccc; color: #f00; font-size: 12px;}
style.scss style.css
入れ子でCSSを書ける
![Page 12: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/12.jpg)
Nesting
• Sample & Demo
Valiables
$margin-top: 40px;$fontsize12: 12px;
.sectionA { margin-top: $margin-top;}.sectionB { margin-top: $margin-top; font-size: $fontsize12;}
.sectionA { margin-top: 40px;}
style.scss style.css
変数を使うことができる
.sectionB { margin-top: 40px; font-size: 12px;}
![Page 13: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/13.jpg)
Nesting
• Sample & Demo
mixin
@mixin sprite { display: block; text-indent: -9999px;}
.sprite-link { @include sprite; width: 300px; height: 100px; background: #eee;}
.sprite-link { display: block; text-indent: -9999px; width: 300px; height: 100px; background: #eee;}
style.scss style.css
includeできる(セットを変数化するイメージ)
![Page 14: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/14.jpg)
Nesting
• Sample & Demo
mixin
@mixin radius($value) { -webkit-border-radius: $value; -moz-border-radius: $value; border-radius: $value;}
.sprite-link { @include radius(8px); background: #eee;}
.sprite-link { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: #eee;}
style.scss style.css
includeできる(セットを変数化するイメージ)
![Page 15: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/15.jpg)
Nesting
• Sample & Demo
extend
.box { margin: 0; padding: 0; background: #eee;}
.sectionA{ @extend .box;}
.box, .sectionA { margin: 0; padding: 0; background: #eee;}
style.scss style.css
セレクタの継承(再利用)
![Page 16: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/16.jpg)
Nesting
• Sample & Demo
Other
#main { width: 940px - 40px; margin: 0; padding: 0 20px;}
#main { width: 900px; margin: 0; padding: 0 20px;}
style.scss style.css
演算できる
![Page 17: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/17.jpg)
Coding is fun, again.
Nesting Valiables mixin
extend others
![Page 18: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/18.jpg)
Nesting@import
@import "common";@import "reset";
style.scss
ファイルの結合
複数の scss ファイルを読み込み、1つの css ファイルとして書き出す
_common.scss _reset.scss style.cssstyle.scss
![Page 19: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/19.jpg)
Nesting@import
@import "common";@import "reset";
style.scss
ファイルの結合
読み込ませる scss ファイルには、css ファイルとして書き出させないためアンダーバーをつける(ex. _common.scss、_reset.scss
_common.scss _reset.scss style.cssstyle.scss
![Page 20: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/20.jpg)
Nesting
• Sample & Demo
compressed
#main {margin: 0;padding: 0;} #main .block {background: #ccc;color: #f00;font-size: 12px;}.sprite-link {display: block;text-indent: -9999px;width: 300px;height: 100px;background: #eee;}
圧縮
改行やスペースを削除して1行ですべてを書き出す
$ sass --style compressed --watch sass:css
style.scss
![Page 21: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/21.jpg)
good performance, good UX
@import compressed
![Page 22: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/22.jpg)
Install
![Page 23: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/23.jpg)
環境用意しないと使えないよ ┐(́∀`)┌ヤレヤレ
![Page 24: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/24.jpg)
Install
- Ruby- Sass
![Page 25: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/25.jpg)
Install
- Ruby- Sass
← Mac OS だと最初から入ってる
![Page 28: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/28.jpg)
$ gem install sass
![Page 29: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/29.jpg)
Install
- Compass
- Ruby- Sass
← New!
![Page 31: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/31.jpg)
$ gem update --system
$ gem install compass
![Page 32: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/32.jpg)
OK!Next!
![Page 33: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/33.jpg)
Compile
![Page 34: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/34.jpg)
.scss .css
css ファイルを作るためには scss ファイルをコンパイルする
![Page 35: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/35.jpg)
sass フォルダ内の .scss ファイルを編集するとcss フォルダへ編集した内容を反映させた css ファイルができる
$ cd project_dir
$ sass --watch scss:css
← プロジェクトのフォルダへ移動
← 監視コマンド
![Page 36: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/36.jpg)
めんどくさい (´・ω・`)
![Page 37: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/37.jpg)
sass フォルダ内の .scss ファイルを編集するとcss フォルダへ編集した内容を反映させた css ファイルができる
$ cd project_dir
$ compass w
← プロジェクトのフォルダへ移動
← 監視コマンド
![Page 38: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/38.jpg)
うん、めんどくさい (´・ω・`)
![Page 39: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/39.jpg)
そもそも黒い画面が... (´・ω:;.:...
![Page 40: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/40.jpg)
まぁまぁ、そんなこと言わずに...
![Page 41: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/41.jpg)
Nesting
• Sample & Demo
batch file
上記を書いて「compass_start.bat」という名前で保存。sass フォルダと同じ階層に置いておく。scss ファイルを編集する前に、compass_start.bat ファイルをダブルクリックすることで、自動的に監視が始まる。コマンドプロンプトを起動して、監視コマンドを自分で入力しなくてもよくなるので楽だね :)
compass watch
for Windows
![Page 42: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/42.jpg)
Nesting
• Sample & Demo
config.rb
http_path = "/"css_dir = "css"sass_dir = "sass"images_dir = "image"javascripts_dir = "js"
output_style = :compressedrelative_assets = trueline_comments = false
設定用の config.rb も同じ階層に置いておく
![Page 45: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/45.jpg)
( ‘д‘⊂彡☆))Д´) パーン
最初から言え
![Page 46: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/46.jpg)
コマンドに慣れておくと、なにかと良いかもね
![Page 47: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/47.jpg)
for Non Sasser
-別の css ファイル作って読み込む
<link rel=”stylesheet” href=”css/style.css” />
<link rel=”stylesheet” href=”css/newcontents.css” />
![Page 48: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/48.jpg)
まとめ
![Page 49: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/49.jpg)
- Sass で効率的かつ、表示速度向上を
意識したコーディングをしよう
-大丈夫、すぐ慣れる :)
まずは Nesting とか、すぐできること
から始めよう
![Page 50: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/50.jpg)
Enjoy coding!
![Page 51: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/51.jpg)
Thank you.
Toshiaki Sasaki@shirokuro331
![Page 52: First sass](https://reader031.fdocuments.in/reader031/viewer/2022013118/55958a661a28ab06638b45d2/html5/thumbnails/52.jpg)
Nesting
• Sample & Demo
Resources
Luc Viatourhttp://www.lucnix.be/main.php
Photo Credit
Sassを覚えようhttp://css-happylife.com/archives/sass/
SassをWindowsにインストールするhttp://taiju.hatenablog.com/entry/20110607/1307413721
Sassられ指南http://www.slideshare.net/taiju/sass-8218412
Compassを使ってSassのCSS出力を手軽にしようhttp://www.skyward-design.net/blog/archives/000118.html
Sass徹底解説~SassがもたらすCSSのパラダイムシフトhttp://cssnite.jp/afterdark/cpi/vol01/