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 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の流れを自分なりに実践してみました。