MVCSSを使ってみる 2
|ノウハウが無いので本記事は備忘録扱いです!
実際に書いてみる – 前回の続き –
前回の続きです。
_reset.scssの修正と追加
h1 { font-size: 2em; // margin: 0.67em 0; margin: 0; } ul,li{ margin: 0; padding : 0; }
_settings.sassに情報の修正と追加
$base-borderRadius: 10px $base-sub-background: #fff $base-sub-box-background: #3e3a3a $base-sub-box-color: #fcf3f3 $base-sub-border: 1px solid #aa9c9c $base-fontFamily: Verdana, Arial, ‘ヒラギノ角ゴ Pro W3’, ‘Hiragino Kaku Gothic Pro’, ‘メイリオ’, Meiryo, Osaka, ‘MS Pゴシック’, ‘MS PGothic’, sans-serif
_helpers.sassに情報を追加
せっかくなので継承を使ってみます
%base-sub-box background-color : $base-sub-box-background border : $base-sub-box-color
_base.sassにheder、article、sectionなどの情報を追加
header background: $base-sub-background text-align : center
_content.sassに情報を追加
li border-bottom : $base-sub-border padding : $base-whitespace list-style-type : none &:last-child border-bottom : none
_layout.scssに情報を追加
.l-bucket margin : $base-whitespace auto width : 80% .l-tw-title @extend %base-sub-box margin : $base-whitespace / 2 padding : $base-whitespace / 2 .l-tw-message background : $base-sub-background border : $base-sub-border margin : $base-whitespace / 2 @include border-radius($base-borderRadius) @include box-shadow($base-boxShadow)
index.htmlにclass情報を追加
//articleの変更 <article class='l-bucket'> //タイトル部分のsection変更 <section class='l-tw-title'> //メッセージ部分のsection変更 <section class='l-tw-message'>
確認してみる
基本的な構成だけなので逆にややこしく感じたかもしれないですが、開発が進むともっと沢山の記述と管理が必要になるでしょう。
駆け足になりましたが、MVCSSの流れを自分なりに実践してみました。