http://alvarotrigo.com/blog/fullpage-jquery-plugin-for-fullscreen-scrolling-websites/
http://www.apple.com/iphone-5c/
http://onlinedepartment.nl/#cases
フルスクリーンで表示し、矢印キーでその方向にスライドしてコンテンツ表示
https://github.com/peachananr/onepage-scroll
One Page Scroll
iPhone 5sのプロダクトページのように1ページに複数のパネルを垂直方向に配置し、スクロールエフェクトを使って見せる
http://codepen.io/elemental-shift/pen/kHjcu
紙の資料をめくるようなエフェクト
http://www.pixxelfactory.net/jInvertScroll/
スクロールすると横にページが流れる
http://www.jarallax.com/
様々なスクロールマジック
http://matthew.wagerfield.com/parallax/
マウスを動かしたり、デバイスを傾けると、角度が変わる
http://joelb.me/scrollpath/
スクロールマジック
http://wicky.nillia.ms/headroom.js/
下にスクロールするとヘッダーがかくれて、上にスクロールすると現れる
http://leafo.net/sticky-kit/
スクロールしたときに、スクロールさせたくないものは表示する
http://www.thepetedesign.com/demos/autofix_demo.html
スクロールに合わせて最適な場所に最適な大きさで表示する
http://justindomingue.github.io/ohSnap/
メッセージを指定した位置にアニメーションで表示する
http://plugins.compzets.com/animatescroll/
スクロールのアニメーション
http://www.onextrapixel.com/2013/09/24/fancyscroll-js-add-an-iosandroid-overflow-scroll-effect/
ページ一番上まできたときのエフェクト
http://nick-jonas.github.io/windows/
中途半端な位置にスクロールしたとき、ぴったりの位置にあわせる
http://usehook.com/
スマホみたいに下にスライドすると更新する
http://soulwire.github.io/FoldScroll/
https://github.com/soulwire/FoldScroll
スクロールすると紙みたいに折れる
http://www.kennethcachia.com/background-check/index.html
背景の色に合わせて色を変える
http://manos.malihu.gr/jquery-custom-content-scroller/
スクロールバー
http://jresponsive.is-great.net/
レスポンシブ
https://github.com/jakiestfu/Snap.js
ドラッグすると左右に表示される
スマホが最適
http://silvestreh.github.io/onScreen/
オンスクリーンのエフェクト
http://jimjh.com/box-lid/
サイドメニューを表示するときメイン画面が奥行きがあるように斜めになる
http://creativeda.sh/sandbox/bounce_menu/
左下のメニューを開くときバウンドするエフェクト
https://github.com/peachananr/square_menu
本が開くようなエフェクト
http://www.berriart.com/sidr/
メイン画面が左右にスライドしてメニューが現れる
http://ascott1.github.io/bigSlide.js/
クリックしたらメイン画面がスライドしてメニューが現れる
http://multi-level-push-menu.make.rs/
多階層の左右ナビゲーション
http://jasonweaver.name/lab/flexiblenavigation/
多階層のメニューバー
http://responsive-nav.com/
レスポンシブ対応のナビバー
http://scrollnav.com/
スクロールを追跡するナビバー
かわいい
https://github.com/mqchen/jquery.diamonds.js
ダイアモンド型に写真をカットしてレイアウトデザイン
http://www.gougouzian.fr/projects/jquery/dylay/
ぷるぷるしながら並び替え
http://vnjs.net/www/project/freewall/
ブロックを使ったレイアウト
http://mcpants.github.io/jquery.shapeshift/
ドラッグ＆ドロップで並び替え
http://suprb.com/apps/nested/
レンガ状にブロックを並べるレイアウト
http://kamilczujowski.github.io/least/
レスポンシブに対応のイメージギャラリー
http://toddmotto.com/introducing-superbox-the-reimagined-lightbox-gallery/
レスポンシブ対応lightbox
https://github.com/ryun/HCaptions
ホバーすると半透明のパネルが現れるいろいろなアニメーション
http://zurb.com/playground/twentytwenty
ビフォーアフターがわかりやすく表現できる
http://globocom.github.io/destaque/
スライダーのエフェクト
画像と文字がずれてスライドする
http://jacksbox.de/stuff/jquery-fractionslider/
スライド内の要素が違うタイミングで表示される
http://unslider.com/
レスポンシブ対応スライダー
矢印キーやスワイプにも対応
http://mmenu.frebsite.nl/
スマホみたいにスライドしてメニュー表示
http://flowtime-js.marcolago.com/
パワポのスライドショーみたいな感じ
http://markdalgleish.com/projects/bespoke.js/
スライドショーのエフェクト
すごい
http://yuripetusko.github.io/slideToucher/
タッチスクリーン用のプレゼンテーション
ぴったりに調整されない
http://jquery-jkit.com/
スライドショー・ライトボックス・タブ・アコーディオンなど多種多様なUI関係を実装できる
http://owlgraphic.com/owlcarousel/
いろんなスライダー
https://github.com/wmh/jquery-scrollbox
リストを使っていろんなスライダー
http://labs.bigroomstudios.com/libraries/animo-js
CSSアニメーション
いろいろできそう
http://lazylinepainter.info/
イラストのパスをアニメーションで描画する
https://github.com/peachananr/label_better
http://www.thepetedesign.com/demos/label_better_demo.html
フォームの打ち込む場所に要素名が入っていて、クリックすると上に移動する
かっこいい
http://fronteed.com/iCheck/
フォームのデザインいろいろ
http://jschr.github.io/textillate/
テキストのいろんなアニメーション
いい感じなの多い
http://team.fourdesire.com/playgrounds/texteffects
ランダムに文字を表示して生成していくアニメーション
http://circletype.labwire.ca/
文字をサークル状に表示する
http://paramquery.com/
エクセルのような高性能の表を設置する
http://codeb.it/restable/
スマホでもいい感じに表示できる表
http://www.matanhershberg.com/plugins/jquery-animated-table-sorter/
かっこいいアニメーションでソートする表
http://www.opentip.org/
様々なツールチップ
http://stevenbenner.github.io/jquery-powertip/
いろんな角度からツールチップ
https://github.com/matthewhudson/device.js
デバイスを判定しクラス名をつける
http://www.apple.com/iphone-5c/
http://onlinedepartment.nl/#cases
フルスクリーンで表示し、矢印キーでその方向にスライドしてコンテンツ表示
https://github.com/peachananr/onepage-scroll
One Page Scroll
iPhone 5sのプロダクトページのように1ページに複数のパネルを垂直方向に配置し、スクロールエフェクトを使って見せる
http://codepen.io/elemental-shift/pen/kHjcu
紙の資料をめくるようなエフェクト
http://www.pixxelfactory.net/jInvertScroll/
スクロールすると横にページが流れる
http://www.jarallax.com/
様々なスクロールマジック
http://matthew.wagerfield.com/parallax/
マウスを動かしたり、デバイスを傾けると、角度が変わる
http://joelb.me/scrollpath/
スクロールマジック
http://wicky.nillia.ms/headroom.js/
下にスクロールするとヘッダーがかくれて、上にスクロールすると現れる
http://leafo.net/sticky-kit/
スクロールしたときに、スクロールさせたくないものは表示する
http://www.thepetedesign.com/demos/autofix_demo.html
スクロールに合わせて最適な場所に最適な大きさで表示する
http://justindomingue.github.io/ohSnap/
メッセージを指定した位置にアニメーションで表示する
http://plugins.compzets.com/animatescroll/
スクロールのアニメーション
http://www.onextrapixel.com/2013/09/24/fancyscroll-js-add-an-iosandroid-overflow-scroll-effect/
ページ一番上まできたときのエフェクト
http://nick-jonas.github.io/windows/
中途半端な位置にスクロールしたとき、ぴったりの位置にあわせる
http://usehook.com/
スマホみたいに下にスライドすると更新する
http://soulwire.github.io/FoldScroll/
https://github.com/soulwire/FoldScroll
スクロールすると紙みたいに折れる
http://www.kennethcachia.com/background-check/index.html
背景の色に合わせて色を変える
http://manos.malihu.gr/jquery-custom-content-scroller/
スクロールバー
http://jresponsive.is-great.net/
レスポンシブ
https://github.com/jakiestfu/Snap.js
ドラッグすると左右に表示される
スマホが最適
http://silvestreh.github.io/onScreen/
オンスクリーンのエフェクト
http://jimjh.com/box-lid/
サイドメニューを表示するときメイン画面が奥行きがあるように斜めになる
http://creativeda.sh/sandbox/bounce_menu/
左下のメニューを開くときバウンドするエフェクト
https://github.com/peachananr/square_menu
本が開くようなエフェクト
http://www.berriart.com/sidr/
メイン画面が左右にスライドしてメニューが現れる
http://ascott1.github.io/bigSlide.js/
クリックしたらメイン画面がスライドしてメニューが現れる
http://multi-level-push-menu.make.rs/
多階層の左右ナビゲーション
http://jasonweaver.name/lab/flexiblenavigation/
多階層のメニューバー
http://responsive-nav.com/
レスポンシブ対応のナビバー
http://scrollnav.com/
スクロールを追跡するナビバー
かわいい
https://github.com/mqchen/jquery.diamonds.js
ダイアモンド型に写真をカットしてレイアウトデザイン
http://www.gougouzian.fr/projects/jquery/dylay/
ぷるぷるしながら並び替え
http://vnjs.net/www/project/freewall/
ブロックを使ったレイアウト
http://mcpants.github.io/jquery.shapeshift/
ドラッグ＆ドロップで並び替え
http://suprb.com/apps/nested/
レンガ状にブロックを並べるレイアウト
http://kamilczujowski.github.io/least/
レスポンシブに対応のイメージギャラリー
http://toddmotto.com/introducing-superbox-the-reimagined-lightbox-gallery/
レスポンシブ対応lightbox
https://github.com/ryun/HCaptions
ホバーすると半透明のパネルが現れるいろいろなアニメーション
http://zurb.com/playground/twentytwenty
ビフォーアフターがわかりやすく表現できる
http://globocom.github.io/destaque/
スライダーのエフェクト
画像と文字がずれてスライドする
http://jacksbox.de/stuff/jquery-fractionslider/
スライド内の要素が違うタイミングで表示される
http://unslider.com/
レスポンシブ対応スライダー
矢印キーやスワイプにも対応
http://mmenu.frebsite.nl/
スマホみたいにスライドしてメニュー表示
http://flowtime-js.marcolago.com/
パワポのスライドショーみたいな感じ
http://markdalgleish.com/projects/bespoke.js/
スライドショーのエフェクト
すごい
http://yuripetusko.github.io/slideToucher/
タッチスクリーン用のプレゼンテーション
ぴったりに調整されない
http://jquery-jkit.com/
スライドショー・ライトボックス・タブ・アコーディオンなど多種多様なUI関係を実装できる
http://owlgraphic.com/owlcarousel/
いろんなスライダー
https://github.com/wmh/jquery-scrollbox
リストを使っていろんなスライダー
http://labs.bigroomstudios.com/libraries/animo-js
CSSアニメーション
いろいろできそう
http://lazylinepainter.info/
イラストのパスをアニメーションで描画する
https://github.com/peachananr/label_better
http://www.thepetedesign.com/demos/label_better_demo.html
フォームの打ち込む場所に要素名が入っていて、クリックすると上に移動する
かっこいい
http://fronteed.com/iCheck/
フォームのデザインいろいろ
http://jschr.github.io/textillate/
テキストのいろんなアニメーション
いい感じなの多い
http://team.fourdesire.com/playgrounds/texteffects
ランダムに文字を表示して生成していくアニメーション
http://circletype.labwire.ca/
文字をサークル状に表示する
http://paramquery.com/
エクセルのような高性能の表を設置する
http://codeb.it/restable/
スマホでもいい感じに表示できる表
http://www.matanhershberg.com/plugins/jquery-animated-table-sorter/
かっこいいアニメーションでソートする表
http://www.opentip.org/
様々なツールチップ
http://stevenbenner.github.io/jquery-powertip/
いろんな角度からツールチップ
https://github.com/matthewhudson/device.js
デバイスを判定しクラス名をつける
https://rocketbank.ru/
http://www.thepetedesign.com/demos/onepage_scroll_demo.html
http://juanadevega.org/programaempresas/
http://holabeew.com/agencias/en/
http://www.bic-deal.de/
http://loodsmedia.nl/cases/
スクロールすると文字ががたがたに
http://charactersf.com/
http://www.zehfernandes.com/jquery.fullContent/#home
砂浜とか背景にしたらいい感じかも
http://soulwire.github.io/FoldScroll/
スクロールすると紙みたいに折れる
http://vnjs.net/www/project/freewall/
http://mmenu.frebsite.nl/
https://github.com/peachananr/label_better
http://www.thepetedesign.com/demos/label_better_demo.html
このフォームかっこよくてわかりやすい
http://fronteed.com/iCheck/
フォームのデザインいろいろ
http://jschr.github.io/textillate/
テキストのいい感じなアニメーション多い
http://team.fourdesire.com/playgrounds/texteffects
かっこよく文字を表示する
弟好きそう
http://circletype.labwire.ca/
文字をサークル状に表示する
http://www.opentip.org/
いろんな吹き出し
https://github.com/matthewhudson/device.js
デバイスを判定しクラス名をつける
http://www.gougouzian.fr/projects/jquery/moodular/
http://www.thepetedesign.com/demos/onepage_scroll_demo.html
http://juanadevega.org/programaempresas/
http://holabeew.com/agencias/en/
http://www.bic-deal.de/
http://loodsmedia.nl/cases/
スクロールすると文字ががたがたに
http://charactersf.com/
http://www.zehfernandes.com/jquery.fullContent/#home
砂浜とか背景にしたらいい感じかも
http://soulwire.github.io/FoldScroll/
スクロールすると紙みたいに折れる
http://vnjs.net/www/project/freewall/
http://mmenu.frebsite.nl/
https://github.com/peachananr/label_better
http://www.thepetedesign.com/demos/label_better_demo.html
このフォームかっこよくてわかりやすい
http://fronteed.com/iCheck/
フォームのデザインいろいろ
http://jschr.github.io/textillate/
テキストのいい感じなアニメーション多い
http://team.fourdesire.com/playgrounds/texteffects
かっこよく文字を表示する
弟好きそう
http://circletype.labwire.ca/
文字をサークル状に表示する
http://www.opentip.org/
いろんな吹き出し
https://github.com/matthewhudson/device.js
デバイスを判定しクラス名をつける
http://www.gougouzian.fr/projects/jquery/moodular/
http://book.scss.jp/
p.14
Sassとは、CSSを拡張したメタ言語
メタ言語とは、ある言語について何らかの記述をするための言語
Sassの場合は、CSSに対して機能を拡張した言語
簡単にいうと、SassはCSSをより便利に効果的に書けるように大幅パワーアップさせた言語
Sassとは、Syntactically Awesome Stylesheetsの略
日本語に訳すと、構文的にイケてるスタイルシート
じゃあ、CSSってイケてないの？ そうではない。
CSSは、広く普及させる目的もあって、書式自体は非常にシンプルになっていて、プロパティなど、１つ１つ覚えていけば誰でも習得できるようになっている。
しかし、それゆえ複雑なことができない側面があり、コードの再利用や、変数、演算、条件分岐など、プログラムでは当たり前に使える機能がない。そのCSSの弱点を補う目的で誕生したのが、Sass。
p.15
Sassは、CSSとは構文が違うため、CSSファイルにはSassを記述できない。
CSSの拡張子は"css"
Sassの拡張子は"scss"
Sassは、CSSと互換性があるため、CSSのファイルの拡張子を"scss"に変更するだけでもSassファイルになる。(Sassの機能を使わないと意味ないけど・・・)
なんで"scss"？
Sassなら、拡張子も"sass"ならわかりやすいのに。
Sassには、記法が2つある。
最初に作られたのがSASS記法で拡張子は"sass"
後から作られたのがSCSS記法で拡張子は"scss"
この2つの記法には大きな違いがある。
SASS記法は、{}(波括弧)の代わりにインデントで書き、;(セミコロン)は省略できる。その反面、CSSと互換性がなく、書式も異なっているため、あまり広く普及しなかった。
そこで、CSSとの互換性を高めたSCSS記法が作られた。
SCSSは、Sassy CSSの略で、訳すと、かっこいいCSS や イカしたCSS
2つの記法の違い
CSS
ul{
margin: 0 0 1em;
}
ul li{
margin-bottom: 5px;
}
これをSASS記法とSCSS記法で書いた場合
SASS記法
ul
margin: 0 0 1em
li
margin-bottom: 5px
SCSS記法
ul{
margin: 0 0 1em;
li{
margin-bottom: 5px;
}
}
SASS記法は、記述量が減って簡素化しているのがわかる。しかし、CSSと互換性がなく、インデントの深さや改行の位置など、細かい書式が決まっていて、CSS書式で書くとエラーになってしまう。
SCSS記法はネストという機能を使って書いているので、書式は異なっているが、CSSと互換性があるので、CSSと同じ書式で書いても問題はない。
現在、Sassを指す場合はSCSS記法が一般的になっていて、Sassの公式サイトでも、SCSS記法のサンプルがデフォルト表示になっている。
p.17
Sassは、CSSと拡張子が違うため、そのままではブラウザが認識できない。
SassファイルをCSSファイルにコンパイルする必要がある。
コンパイルするには、RubyとSassをインストールする必要がある。
Rubyに関しては、インストールするだけで、Rubyの知識は必要ない。
p.18
魅力的なSassの機能
ネスト (親子関係になるセレクタの入れ子)
1行コメント (//～)
変数 (同じ値を使いまわせる)
四則演算 (widthからpaddingの値を引いたりなど)
@extend (一度使ったセレクタのスタイルを別のセレクタでも使える)
@mixin (スタイルをまとめてテンプレートやモジュールのように定義し、それらを簡単に読み込んで使える 引数を指定し部分的に値を変えるなど、複雑な処理も可能)
パーシャル (複数のSassファイルをコンパイル時に1つのCSSファイルにまとめられる)
制御構文 (条件分岐や繰り返し処理など @mixinなどと組み合わせることで、非常に強力な機能になる)
CSSファイルを圧縮 (コンパイルされたCSSを軽量化)
フレームワーク (Compassを代表とする様々なフレームワークが開発されている)
p.24
GUIツールを使えば、黒い画面(win:コマンドプロンプト, mac:ターミナル)を一切使わずにSassを利用することも可能
GUIツールを使わない場合は、必ず黒い画面を使うけれど、一度環境を構築してしまえば、その後に面倒やややこしいことはない。
黒い画面を使う主な場面
Sassのインストール作業
Sassのアンインストール作業
Sassのアップデート、gemのアップデート
Sassを書き始めるとき
Sassを書き始めるときは、必ず黒い画面を使う必要があるが、Sassを書き始めるたびに黒い画面を立ち上げてコマンドを入力するのはとても面倒。
そこで、コマンドプロンプト用のバッチファイル、ターミナル用のシェルスクリプトを用意する方法がお勧め。この、バッチファイル/シェルスクリプトをダブルクリックするだけで、Sassを書く準備が完了するので便利。
p.26
公式サイトの翻訳
https://github.com/enja-oss/Sass
p.28
Sassは、コンパイルするときにCSSファイルのフォーマット(アウトプットスタイル)を選ぶことができる。その中の、"expanded"というものを指定すると、普通に書いたCSSのように書き出される。(1行コメントは消えるので注意)
なので、社内で自分だけが使う とか CSSで納品する とかの場合でも、Sassで作り、CSSにコンパイルした後、コーディングルールなどに則って修正するなどが可能である。
p.30
SassMeister | The Sass Playground!
http://sassmeister.com/
sass css html 結果
シンプル
jsdo.it
http://jsdo.it/
readme js html css/scss files 結果
日本語 投稿されたコードをダウンロードできる
Pens picked by the Editors of CodePen
http://codepen.io/
html css/scss js 結果
レイアウト変更できる シェアできる
HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck
http://cssdeck.com/
html css/scss js 結果
他の人が作ったコードがみれる
p.51
ターミナルでコマンドでコンパイルする
①Sassファイルを用意する
②作成したSassファイルをホームフォルダに置く
③Sassコマンドでコンパイルする
ターミナル
$ sass [option] [INPUT]:[OUTPUT]
実際こんな感じ
ターミナル
$ sass test.scss:test.css
p.59
アウトプットスタイルの種類
Nested
Sassの階層をインデントで残すため、ネストされているような見た目になる。
Expanded
ルールセットとプロパティを1行ずつ改行した、可視性が高いスタイル。
Compact
セレクタとプロパティがシングルラインになる。
ルールセットごとに改行される。
異なるネストのグループは1行空く。
Compressed
サイズ軽量化を優先し、インデントや改行を全て取り除いて圧縮する。
コメントも削除される。
p.61
Watchオプション
Sassを更新するたびに毎回移動してオプションや書き出しファイルを指定してコンパイルするのはとても面倒。
そんなときのための非常に便利なオプション。それがWatchオプション。
Watchオプションを付けると、Sassファイルまたはフォルダを監視し、更新(保存)されると自動的にコンパイルしてくれる。
Sassファイルを書き換えるだけでCSSファイルも更新されるので、作業効率アップには欠かせないオプション。ほぼ常時使用される。
Watchオプションの指定方法
Watchオプションを利用するには"--whatch"と書く。
このオプションに引数はない。
後は通常のコンパイルと同じように、入力するファイルと出力するファイルを:(コロン)でつないで指定する。
ターミナル
$ sass --watch input.scss:output.css
これで"input.scss"を監視し、更新されると自動的に"optput.css"としてコンパイルする。
コンパイルしたCSSファイルを別のフォルダに保存したい場合は、相対パスで指定する。
ターミナル
$ sass --watch input.scss:css/output.css
これで"input.scss"を監視し、"css"フォルダ内に"optput.css"としてコンパイルする。
指定したフォルダがない場合は作成する。
フォルダ単位で更新を監視する
拡張子を付けずに指定すると、それをフォルダ名として認識し、フォルダ内の全てのファイルを監視するようになる。この場合、Sassファイル名と同じ名前で拡張子が"css"になったファイルがコンパイルされる。
ターミナル
$ sass --watch input
この場合、"input"フォルダ内のSassファイルに更新があると、同じ"input"フォルダにCSSファイルが書き出される。
ターミナル
$ sass --watch .
このように相対パスで書くことで、現在地をWatchすることもできる。
書き出し先を指定したい場合は、監視するフォルダと、CSSファイルを書き出すフォルダを:(コロン)で区切って指定する。
ターミナル
$ sass --watch input:output
この場合、"input"フォルダを監視し、"output"フォルダ内にコンパイルする。
相対パスでも指定できる。
ターミナル
$ sass --watch input:css/output
この場合、"input"フォルダを監視し、"css"フォルダの中の"output"フォルダ内にコンパイルする。
Watchオプションは、他のオプションと一緒に使うこともできる。
特に、WatchオプションとStyleオプションはよく使うオプション。
ターミナル
$ sass --watch --style expanded scss:css
この場合、「"scss"フォルダを監視し、更新があれば"css"フォルダにコンパイル。スタイルは"Expanded"でよろしく」という指示を出している。
p.14
Sassとは、CSSを拡張したメタ言語
メタ言語とは、ある言語について何らかの記述をするための言語
Sassの場合は、CSSに対して機能を拡張した言語
簡単にいうと、SassはCSSをより便利に効果的に書けるように大幅パワーアップさせた言語
Sassとは、Syntactically Awesome Stylesheetsの略
日本語に訳すと、構文的にイケてるスタイルシート
じゃあ、CSSってイケてないの？ そうではない。
CSSは、広く普及させる目的もあって、書式自体は非常にシンプルになっていて、プロパティなど、１つ１つ覚えていけば誰でも習得できるようになっている。
しかし、それゆえ複雑なことができない側面があり、コードの再利用や、変数、演算、条件分岐など、プログラムでは当たり前に使える機能がない。そのCSSの弱点を補う目的で誕生したのが、Sass。
p.15
Sassは、CSSとは構文が違うため、CSSファイルにはSassを記述できない。
CSSの拡張子は"css"
Sassの拡張子は"scss"
Sassは、CSSと互換性があるため、CSSのファイルの拡張子を"scss"に変更するだけでもSassファイルになる。(Sassの機能を使わないと意味ないけど・・・)
なんで"scss"？
Sassなら、拡張子も"sass"ならわかりやすいのに。
Sassには、記法が2つある。
最初に作られたのがSASS記法で拡張子は"sass"
後から作られたのがSCSS記法で拡張子は"scss"
この2つの記法には大きな違いがある。
SASS記法は、{}(波括弧)の代わりにインデントで書き、;(セミコロン)は省略できる。その反面、CSSと互換性がなく、書式も異なっているため、あまり広く普及しなかった。
そこで、CSSとの互換性を高めたSCSS記法が作られた。
SCSSは、Sassy CSSの略で、訳すと、かっこいいCSS や イカしたCSS
2つの記法の違い
CSS
ul{
margin: 0 0 1em;
}
ul li{
margin-bottom: 5px;
}
これをSASS記法とSCSS記法で書いた場合
SASS記法
ul
margin: 0 0 1em
li
margin-bottom: 5px
SCSS記法
ul{
margin: 0 0 1em;
li{
margin-bottom: 5px;
}
}
SASS記法は、記述量が減って簡素化しているのがわかる。しかし、CSSと互換性がなく、インデントの深さや改行の位置など、細かい書式が決まっていて、CSS書式で書くとエラーになってしまう。
SCSS記法はネストという機能を使って書いているので、書式は異なっているが、CSSと互換性があるので、CSSと同じ書式で書いても問題はない。
現在、Sassを指す場合はSCSS記法が一般的になっていて、Sassの公式サイトでも、SCSS記法のサンプルがデフォルト表示になっている。
p.17
Sassは、CSSと拡張子が違うため、そのままではブラウザが認識できない。
SassファイルをCSSファイルにコンパイルする必要がある。
コンパイルするには、RubyとSassをインストールする必要がある。
Rubyに関しては、インストールするだけで、Rubyの知識は必要ない。
p.18
魅力的なSassの機能
ネスト (親子関係になるセレクタの入れ子)
1行コメント (//～)
変数 (同じ値を使いまわせる)
四則演算 (widthからpaddingの値を引いたりなど)
@extend (一度使ったセレクタのスタイルを別のセレクタでも使える)
@mixin (スタイルをまとめてテンプレートやモジュールのように定義し、それらを簡単に読み込んで使える 引数を指定し部分的に値を変えるなど、複雑な処理も可能)
パーシャル (複数のSassファイルをコンパイル時に1つのCSSファイルにまとめられる)
制御構文 (条件分岐や繰り返し処理など @mixinなどと組み合わせることで、非常に強力な機能になる)
CSSファイルを圧縮 (コンパイルされたCSSを軽量化)
フレームワーク (Compassを代表とする様々なフレームワークが開発されている)
p.24
GUIツールを使えば、黒い画面(win:コマンドプロンプト, mac:ターミナル)を一切使わずにSassを利用することも可能
GUIツールを使わない場合は、必ず黒い画面を使うけれど、一度環境を構築してしまえば、その後に面倒やややこしいことはない。
黒い画面を使う主な場面
Sassのインストール作業
Sassのアンインストール作業
Sassのアップデート、gemのアップデート
Sassを書き始めるとき
Sassを書き始めるときは、必ず黒い画面を使う必要があるが、Sassを書き始めるたびに黒い画面を立ち上げてコマンドを入力するのはとても面倒。
そこで、コマンドプロンプト用のバッチファイル、ターミナル用のシェルスクリプトを用意する方法がお勧め。この、バッチファイル/シェルスクリプトをダブルクリックするだけで、Sassを書く準備が完了するので便利。
p.26
公式サイトの翻訳
https://github.com/enja-oss/Sass
p.28
Sassは、コンパイルするときにCSSファイルのフォーマット(アウトプットスタイル)を選ぶことができる。その中の、"expanded"というものを指定すると、普通に書いたCSSのように書き出される。(1行コメントは消えるので注意)
なので、社内で自分だけが使う とか CSSで納品する とかの場合でも、Sassで作り、CSSにコンパイルした後、コーディングルールなどに則って修正するなどが可能である。
p.30
SassMeister | The Sass Playground!
http://sassmeister.com/
sass css html 結果
シンプル
jsdo.it
http://jsdo.it/
readme js html css/scss files 結果
日本語 投稿されたコードをダウンロードできる
Pens picked by the Editors of CodePen
http://codepen.io/
html css/scss js 結果
レイアウト変更できる シェアできる
HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck
http://cssdeck.com/
html css/scss js 結果
他の人が作ったコードがみれる
p.51
ターミナルでコマンドでコンパイルする
①Sassファイルを用意する
②作成したSassファイルをホームフォルダに置く
③Sassコマンドでコンパイルする
ターミナル
$ sass [option] [INPUT]:[OUTPUT]
実際こんな感じ
ターミナル
$ sass test.scss:test.css
p.59
アウトプットスタイルの種類
Nested
Sassの階層をインデントで残すため、ネストされているような見た目になる。
Expanded
ルールセットとプロパティを1行ずつ改行した、可視性が高いスタイル。
Compact
セレクタとプロパティがシングルラインになる。
ルールセットごとに改行される。
異なるネストのグループは1行空く。
Compressed
サイズ軽量化を優先し、インデントや改行を全て取り除いて圧縮する。
コメントも削除される。
p.61
Watchオプション
Sassを更新するたびに毎回移動してオプションや書き出しファイルを指定してコンパイルするのはとても面倒。
そんなときのための非常に便利なオプション。それがWatchオプション。
Watchオプションを付けると、Sassファイルまたはフォルダを監視し、更新(保存)されると自動的にコンパイルしてくれる。
Sassファイルを書き換えるだけでCSSファイルも更新されるので、作業効率アップには欠かせないオプション。ほぼ常時使用される。
Watchオプションの指定方法
Watchオプションを利用するには"--whatch"と書く。
このオプションに引数はない。
後は通常のコンパイルと同じように、入力するファイルと出力するファイルを:(コロン)でつないで指定する。
ターミナル
$ sass --watch input.scss:output.css
これで"input.scss"を監視し、更新されると自動的に"optput.css"としてコンパイルする。
コンパイルしたCSSファイルを別のフォルダに保存したい場合は、相対パスで指定する。
ターミナル
$ sass --watch input.scss:css/output.css
これで"input.scss"を監視し、"css"フォルダ内に"optput.css"としてコンパイルする。
指定したフォルダがない場合は作成する。
フォルダ単位で更新を監視する
拡張子を付けずに指定すると、それをフォルダ名として認識し、フォルダ内の全てのファイルを監視するようになる。この場合、Sassファイル名と同じ名前で拡張子が"css"になったファイルがコンパイルされる。
ターミナル
$ sass --watch input
この場合、"input"フォルダ内のSassファイルに更新があると、同じ"input"フォルダにCSSファイルが書き出される。
ターミナル
$ sass --watch .
このように相対パスで書くことで、現在地をWatchすることもできる。
書き出し先を指定したい場合は、監視するフォルダと、CSSファイルを書き出すフォルダを:(コロン)で区切って指定する。
ターミナル
$ sass --watch input:output
この場合、"input"フォルダを監視し、"output"フォルダ内にコンパイルする。
相対パスでも指定できる。
ターミナル
$ sass --watch input:css/output
この場合、"input"フォルダを監視し、"css"フォルダの中の"output"フォルダ内にコンパイルする。
Watchオプションは、他のオプションと一緒に使うこともできる。
特に、WatchオプションとStyleオプションはよく使うオプション。
ターミナル
$ sass --watch --style expanded scss:css
この場合、「"scss"フォルダを監視し、更新があれば"css"フォルダにコンパイル。スタイルは"Expanded"でよろしく」という指示を出している。
p.65
Sassファイルをコンパイルすると、カレントディレクトリに".sass-cache"というフォルダが作成される。デフォルトの設定では自動で作成される。
Macは先頭に".(ドット)"のつくフォルダを隠しフォルダとして扱うため、通常は表示されないが、作成されている。
これは、名前のとおりキャッシュを格納しているフォルダ。
キャッシュはWatchオプションなどでたびたびコンパイルする処理を高速化するために必要なファイルになる。
キャッシュフォルダの中身はscsscという拡張子のバイナリファイルが格納されている。
違う場所やフォルダ名にしたい場合、またはキャッシュフォルダを作りたくない場合などは、オプションでコントロールすることができる。
キャッシュフォルダの場所を指定するのには、"--cache-location"オプションをつける。オプションの後に半角スペースでフォルダの場所を指定する。
ターミナル
$ sass --watch test --cache-location test
この場合、"test"フォルダにキャッシュを作成する。
相対パスの指定も可能。
ターミナル
$ sass --watch test --cache-location test/.sass-cache
この場合、"test"ファルダ内の".sass-cache"フォルダにキャッシュを作成する。
絶対パスでも指定できる。
ターミナル
$ sass --watch test --cache-location /.sass-cache
この場合、ドライブ直下の".sass-cache"フォルダを指定。
この指定ならすべてのキャッシュをまとめることもできる。
キャッシュを作りたくない場合は"--no-cache"オプションをつける。
ターミナル
$ sass --watch test --no-cache
このオプションをつけることで、キャッシュを作成しなくなる。
しかし、毎回コンパイルを行うのでキャッシュがある場合に比べ処理は遅くなる。
p.66
scssコマンド
sassコマンドは、scssコマンドでも同じ動きをする。
ターミナル
$ scss test.scss:test.css
ヘルプを表示する
Sassのヘルプを表示するオプション。
オプションと説明を一覧で確認できる。
ターミナル
$ sass --help
"-h"または"-?"と書くこともできる。
rubyやgemなどのコマンドも"--help"でヘルプを見ることができる。
エラーが起こると停止する
watchオプションはSassの記述ミスなどでエラーが出た場合も監視を続けるが、"--stop-on-error"オプションをつけるとエラーが起こった場合に監視を停止する。
ターミナル
$ sass --stop-on-error --watch sass
Sassファイルの位置のコメントを残す
CSSのルールセットに、Sassファイルの場所と行数をコメントで書き込む
ターミナル
$ sass --line-comments
p.68
バッチファイル/シェルスクリプトで簡単にコマンドを実行する
黒い画面で、場所を指定して、Sassコマンドを入力して、フォルダの監視やコンパイルを行って・・・
という複数の作業をファイルにまとめて簡単に実行できるようにする。
ダブルクリックで実行できるようにする
バッチファイル/シェルスクリプトを作成すれば、コマンドをパッケージ化して簡単に実行できる。
中身は、上の行から順番にコマンドを実行するだけのテキストファイル。
いったん作成してしまえば、ファイルをダブルクリックするだけで、そのフォルダの監視→コンパイルができるようになる。
Windowsはバッチファイル、Macはシェルスクリプトとそれぞれ形式が少し違うファイルだが、Sassのコマンド自体は共通なので、ファイルを一つ用意しておけば、どちらのOSでもダブルクリックで同じ処理が実行できる。
p.70
Mac用のシェルスクリプトを作成する
シェルスクリプト(Shell Script)とは、macのコマンドが書かれたテキストファイル。拡張子は"command"。
3行のシェルスクリプトを書くだけで、Sassコマンドをダブルクリックで実行できるようになる。1、2行は毎回同じスクリプトなので、3行目のSassコマンドだけ変えることで使い回しできる。
テキストエディタで拡張子"command"のファイルを作成する。
改行コードはLFで作成する。
コマンドでも空のファイルを作成することができる。
ターミナル
$ touch sass.commnd
この場合は、"sass"というファイル名のファイルがつくられる。
シェルスクリプトは次の3行のコマンドを書く。
シェルスクリプト
#!/bin/sh
cd $(dirname $0)
sass --watch sass:css
#!/bin/sh
シェバンといい、シェルスクリプトであることを1行目で示している。
これはお約束で必ず最初に記述する。
cd $(dirname $0)
ここでシェルスクリプトのある場所に移動するというコマンドを実行する。
sass --watch sass:css
3行目はSassコマンドを書く。この場合はWatchオプションのみを記述している。コンパイル先やオプションもターミナル操作と同様に書ける。
シェルスクリプトでは先頭に"#(シャープ)"をつけると1行コメントになるので、コマンドをコメントアウトして作業を使い分けることも簡単。
シェルスクリプト
#!/bin/sh
cd $(dirname $0)
#sass --watch -t nested sass:css
#sass --watch -t expanted sass:css
sass --watch -t compact sass:css
#sass --watch -t compressed sass:css
"-t"は"-style"と同じアウトプットスタイルオプションを意味する。
ファイルはできたが、このままシェルスクリプトを実行してみると"アクセス権限がない"と警告が表示され、実行することができない。
Macの場合、シェルスクリプトを実行するためには実行権限というものが必要になる。
そのため、一度ターミナルで実行権限を与える必要がある。
実行権限を与えるためにchmod(change mode)コマンドを使う。
スクリプトのある場所に移動し、次のコマンドを実行する。
ターミナル
$ chmod +x sass.command
実行権限を与えると、シェルスクリプトがダブルクリックで実行できるようになる。
実行権限とは、パーミッションのこと。
シェルスクリプトをダブルクリックしたときに、テキストエディタなどのターミナル以外のアプリケーションが立ち上がってしまう場合は、ファイルの情報を表示し、"このアプリケーションで開く"の箇所を"ターミナル.app"に変更する。
"すべての変更…"を押すと他のすべてのシェルスクリプトもターミナル.appで動くようになる。
p.73
GUI(Koala)
Windows/Mac両方のバージョンが用意されている
日本語対応
フリーのGUIコンパイラ
設定してフォルダをドラッグ＆ドロップするだけ
記述ミスなどがあった場合はエラーメッセージが表示される
p.88
ルールのネスト
Sassの中で一番良く使う機能
CSSをHTMLの構造に合わせて入れ子で書く
CSSと比べ、id名セレクタ名を何度も書かなくていい
インデントすることでHTMLのツリー構造と同じ形式になる
メンテナンス性が向上する
文字数の大幅カット
例えば、id名が変わったときなど、CSSだと5カ所変更しないといけないときも、1カ所だけで良い
子孫セレクタ以外のセレクタも使用可能
ネストは、使いすぎると階層が深くなって可読性が落ちてしまうので注意
メディアクエリでも使うことができる
CSS
#main {
float: left;
width: 640px;
}
@media screen and (max-width: 640px) {
#main {
float: none;
width: auto;
}
}
Sass
#main {
float: left;
width: 640px;
@media screen and (max-width: 640px) {
float: none;
width: auto;
}
}
cssの場合はネストが使えないため、メディアクエリを書く位置が離れてしまって見通しが悪くなり、同じセレクタに指定したスタイルの関連性がつかみにくい。ネストを使えば"#main"に指定したスタイルの後にメディアクエリを使えるので、見通しが良くなる。
p.92
親セレクタの参照 &(アンパサンド)
例えば、サイドバーの横幅をトップページだけ広くしたい場合、
CSS
#side {
width: 240px;
}
body.top #side {
width: 300px;
}
#side ul.bnr {
margin-bottom: 10px;
}
Sass
#side {
width: 240px;
ul.bnr {
margin-bottom: 10px;
}
}
body.top #side {
width: 300px;
}
これでも良いが、#side内のネストやルールセットが増えれば増えるほど、"body.top #side"のスタイルが下に行ってしまい可読性が悪くなってしまう。
そういった場合に使えるのが$(アンパサンド)を使った親セレクタの参照。
Sass
#side {
width: 240px;
body.top & {
width: 300px;
}
ul.bnr {
margin-bottom: 10px;
}
}
このようにセレクタの後に"&"を書くことで親セレクタを参照できる。
これで、ルールセットが増えても、"body.top #side"のスタイルをネストから出して書く必要がなくなるため、可読性があがる。
親セレクタの参照は、疑似クラスやセレクタの前にも書ける。
CSS
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul.pageNav li {
margin: 0;
width: 50%;
}
ul.pageNav li.prev {
float: left;
}
ul.pageNav li.next {
float: right;
}
Sass
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
ul.pageNav {
li {
margin: 0;
width: 50%;
&.prev {
float: left;
}
&.next {
float: right;
}
}
}
親セレクタの参照"&"を知らずに基本のネストだけ使っていると可読性が悪いソースになってしまうこともあるので注意。
p.94
プロパティのネスト
ルールセットだけでなく、プロパティでも使うことができる
ショートハンドで書けるプロパティで使うことができる
プロパティのネストでは、:(コロン)の後に{(波括弧)を続けて書いていく
CSS
.sample {
border-top: 5px solid #ccc;
border-bottom-width: 3px;
border-bottom-style: dotted;
border-bottom-color: black;
}
Sass
.sample {
border: {
top: 5px solid #ccc;
bottom: {
width: 3px;
style: dotted;
color: black;
}
}
}
この場合は、"border"をネストして、"top"はショートハンドで書いて、"bottom"はさらにネストして書いている。
効率だけを考えれば"bottom"も"top"と同じようにショートハンドを使った方が良い。
プロパティのネストは、次のように書くこともできる。
CSS
.item {
margin: 0;
margin-left: 10px;
border: 5px solid #cccccc;
border-bottom: 0;
}
Sass
.item {
margin: 0 {
left: 10px;
}
border: 5px solid #ccc {
bottom: 0;
}
}
このように、一度ショートハンドでスタイルを指定してから、プロパティのネストを使って上書きすることができる。
この例のほうが使用する頻度は高い。
-(ハイフン)があるプロパティはすべてネストできる
ー(ハイフン)があるプロパティはすべてネストで記述できる
Sass
.sample {
text: {
shadow: 1px 1px 0 #fff;
align: right;
}
z: {
index: 5;
}
}
CSS(コンパイル後)
.sample {
text-shadow: 1px 1px 0 #fff;
text-align: right;
z-index: 5;
}
"text-shadow","text-align"は、記述が簡略化できるので意味があるが、"z-index"はネストする意味は全くないのに、問題なくコンパイルできてしまう。
p.96
Sassで使えるコメント
//(スラッシュ2つ)による1行コメントが使える
コンパイル後のCSSでは削除される
通常コメント(/**/)は残る
フォーマットが"compressed"だとコメントは残らない
"compressed"にしていても残したいコメントがある場合は、"/*"の直後に"!"を書く
Sass
.box {
/*! width: 350px; */
min-height: 300px;
_height: 300px; /* IE6対策 */
}
CSS(コンパイル後)
.box{/*! width: 350px; */;min-height:300px;_height:300px}
このように、"/*"の直後の"!"もそのまま残る。
p.98
変数(Variables)
CSSで同じ赤系の色を別のルールセットで使う場合、
CSS
.notes {
color: #cf2d3a;
}
.notesBox {
padding: 20px;
border: 3px double #cf2d3a;
}
このように同じ色を複数の場所で指定する場合、毎回コピーしたり手間がかかる。
変数を使うことで同じ値を好きな場所で参照することができる。
Sass
// 赤色の変数を宣言
$red: #cf2d3a;
.notes {
color: $red;
}
.notesBox {
border: 3px double $red;
}
変数は、$(ダラー)の直後に変数名を指定し、:(コロン)の後に値を指定する。
宣言した変数を参照するには、使いたいプロパティの値に"$red"などと記述する。
変数は、プロパティの値に対して使うのが基本になる。
別のSassファイルで宣言した変数でも、@importを使ってインポートしていれば参照することができる。その際は、必ず変数を宣言したSassファイルが先に読み込まれるようにする。
変数名で使える文字と使えない文字
変数名は英数字の他に、_(アンダースコア)、-(ハイフン)を使うことできる
マルチバイト文字も使えるので日本語でもおk
半角数字から始まる名前と、連続した-(ハイフン)から始まる名前はエラーになる
ルールセット内で変数を宣言することができる
Sass
.item {
$value: 15px;
margin-left: $value;
padding: $value;
p {
margin-bottom: $value;
}
}
このようにルールセットの{～}(波括弧)内で変数を宣言して使う場合、ネストされたルールセット"p"でも、変数を参照できる。
外側から参照することはできない。変数には参照できる範囲(スコープ)が決まっているため。
変数の参照範囲(スコープ)
変数はソースコードの先頭から順に処理されていくため、必ず呼び出したいルールセットより前で宣言する必要がある。
一度宣言した変数は、変数より後の行であればどこからでも参照することができる。
この参照できる範囲を"スコープ"と呼ぶ。
スコープを制限したい場合は、ルールセット内で変数を宣言すれば、ルールセットの外側からは参照することはできなくなる。
汎用性のある変数名を使っても、バッティングを回避することが可能。
スコープの落とし穴
ドキュメントルート(どこのルールセットにも属さない)で宣言した変数名と、ルールセット内で宣言した変数名が同一の場合、ルールセット内の値に上書きされてしまうので注意。
気づかないうちに上書きしてしまうかもしれないので、ドキュメントルートの変数名には接頭語をつけるなど、変数の命名ルールを定めるといい。
p.103
変数を参照できる場所
変数は基本的にプロパティの値から参照して使うが、宣言した変数を値の一部として使ったり他から参照したりしたい場合もある。
例えば、変数を利用してセレクタから参照したり画像パスを指定したりしたい場合、次のように書くとエラーになってしまう。
Sass(エラー)
$セレクタ名: '.pickupContentsArea, section.main';
$IMG_PATH: '../img/bg/';
$セレクタ名 {
background: url($IMG_PATHpickup.png);
}
セレクタから参照するとエラーになってしまい、画像のパスを参照する場合も変数とファイル名の区別がつかなくなってしまうので同じくエラーになってしまう。
この場合は、次のようにインターポレーション(補完)を補うことで解決できる。
Sass
$セレクタ名: '.pickupContentsArea, section.main';
$IMG_PATH: '../img/bg/';
#{$セレクタ名} {
background: url(#{$IMG_PATH}pickup.png);
}
CSS(コンパイル後)
.pickupContentsArea, section.main {
background: url(../img/bg/pickup.png);
}
これで無事にコンパイルすることができた。
インターポレーションは、参照したい変数名を"#{$変数名}"のように、"#{}"でかこって書く。
このインターポレーション(補完)に関しては、今回の使い方以外にも複数の機能を持っている。
また、変数名のデータタイプを"String型(文字列)"として管理するために、変数名を"'(シングルクォーテーション)"もしくは""(ダブルクォーテーション)"で囲わないとエラーになってしまう。
