SCSS

こちらの方が主流

機能

ネスト記法

簡略化

など

ネスト nest

code:hoge.scss

div {

margin: 0 auto;

p {

padding: 20px;

span {

font-color: red;

}

}

}

親セレクタの参照&

ネストから出して書く必要がなくなる

code:&.scss

...

// 下のように、コメントで省略された名前を補いコメント(検索性向上)

// .button-small

&-small{

}

}

プロパティのネスト

code:nested-property.scss

.nest-sample{

margin: 0 {

top: 10px

}

// border-bottomだけあとで上書き

bottom:0;

}

}

@importで別ファイルから呼び出せる

注意:呼び出す前で宣言する

code:color-argu.scss

.title-text{

border:6px solid $red;

}

code:operation.scss

$main_width: 200px;

content {

$padding:8px;

width:$main_width - $padding * 2;

}