scssのファイルを階層化して管理する(@import)
HTMLのサイトでは
ページを作成する際、cssとか書きますけど構造がこんがらがってわけが分からなくなると思います。
こんなん
* { padding: 0px; margin: 0px; } .header { height: 80px; background-color: #CCCCCC; color: #FFFFFF; } .contents .page1 { background-color: #FF0000; } .contents .page1 .block { margin: 10px; } .contents .page1 .block .item { margin-top: 10px; } .contents .page1 .block .item table { width: 100%; } .contents .page2 { background-color: #00FF00; } .contents .page3 { background-color: #00FF00; } .footer { height: 30px; background-color: #CCCCCC; color: #FFFFFF; }
これを毎回書いていたらなにがなんだかわからなくなります。
SCSSかSASS
なんかどっちがどっちかわからないのでとりあえずSCSSにする
これを使用することで階層化した感じでかけるようになりました。
// 個別コンテンツ .page1{ background-color: #FF0000; .block{ margin: 10px; .item{ margin-top: 10px; table{ width: 100%; } } } }
画面が肥大化したり、cssの内容が複雑化した場合は当然scssも肥大化する
その場合は1つのファイルでは収めていたら結局管理しきれない…
@import
これを使用することで複数のファイルに分割して管理することが可能になります
使用方法
matsumotoshigeji-no-MacBook-Air:sass matsumotoshigeharu$ tree . ├── config.rb ├── sass │ ├── _common.scss │ ├── _content.scss │ ├── _footer.scss │ ├── _header.scss │ ├── contents │ │ ├── _page1.scss │ │ ├── _page2.scss │ │ └── _page3.scss │ └── main.scss
※compassで用意しました
cssにするファイルはそのままでimport対象のファイルは先頭にアンダースコアを付与する
そうすることでimport時に展開するような動きを行う
import時にはアンダースコアは不要
付与しなくても取り込んでくれます
ファイル
main.scss
// 共通 @import "common"; // ヘッダー @import "header"; // メインコンテンツ @import "content"; // フッター @import "footer";
_common.scss
// デフォルト @import "compass/reset"; // 共通用設定 *{ padding: 0px; margin: 0px; }
_header.scss
// ヘッダー .header{ height: 80px; background-color: #CCCCCC; color: #FFFFFF; }
_content.scss
// コンテンツ .contents{ // page1 @import "contents/page1"; // page2 @import "contents/page2"; // page3 @import "contents/page3"; }
contents/_page1.scss
// 個別コンテンツ .page1{ background-color: #FF0000; .block{ margin: 10px; .item{ margin-top: 10px; table{ width: 100%; } } } }
contents/_page2.scss
// 個別コンテンツ .page2{ background-color: #00FF00; }
contents/_page3.scss
// 個別コンテンツ .page3{ background-color: #00FF00; }
_footer.scss
.footer{ height: 30px; background-color: #CCCCCC; color: #FFFFFF; }
↓
↓
↓
結果
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } * { padding: 0px; margin: 0px; } .header { height: 80px; background-color: #CCCCCC; color: #FFFFFF; } .contents .page1 { background-color: #FF0000; } .contents .page1 .block { margin: 10px; } .contents .page1 .block .item { margin-top: 10px; } .contents .page1 .block .item table { width: 100%; } .contents .page2 { background-color: #00FF00; } .contents .page3 { background-color: #00FF00; } .footer { height: 30px; background-color: #CCCCCC; color: #FFFFFF; }
所感
まだ、全部は理解していません。階層化するだけでも管理しやすくなりますので、
やっておいたほうがあとあと便利なきがしました。
scssには他にもいろいろな機能があるのでcssが多少苦手でも使いやすくなると思います。