はじめに*********
プログラミング勉強中のものです。
いろいろまとめています
お気づきの点があれば、ご指摘ください。
##Sassとは?
Sassはcssをより便利に効率的に書くための記法
sassとscssの2種類あり、一般的にはscssが主流
#####Sassを使うメリット
1.コードの記述量が減る
2.複数のCSSファイルを1つにまとめることができる
3.同じ値を使い回すことができる
##1.コードの記述量が減る
たとえば下記htmlファイルのcssを指定したい時
<div class="header">
<p>hogehoge</p>
</div>
cssだとheaderを2回書く必要がある
子要素が増えていくと書くのが大変だが。。
.header{
width:100%
}
.header p{
color:#fafafa;
}
scssだと同じセレクタなら記述の省略が可能
css:hoge.scss
.header{
width:100%
p{
color:#fafafa;
}
}
また、入れ子構造内で「&」を使えばhoverやactiveも使用可能
.header{
width:100%
p{
color:#fafafa;
&:hover{
color:red;
}
}
##2.複数のCSSファイルを1つにまとめることができる
scssにはファイルを分割するバーシャルという機能があり、分割したファイルを1つに統合することも可能
バーシャルファイルは"_(アンダーバー)ファイル名"で作成可
バーシャルファイルの読み込みは @immport "ファイル名";
##3.変数の定義やスタイルの定義(@mixin)ができる
$変数名: 値; で変数名を指定して、他のファイルで使用することも可
$main-color:#fafafa;
h1{
background-color:$main-color;
}
@mixin を使えばスタイルの指定し、複数箇所で簡単に呼び出すことも可能
例えばcssだと同じコードを何回も書く必要があるので、少しめんどくさい
.hoge1{
width:200px;
height:100px;
}
.hoge2{
width:200px;
height:100px;
}
これに@mixinを省略できる。修正の時も@mixin部分だけ修正すればOK
@mixin hoge{
width:200px;
height:100px;
}
.hoge1{
@include hoge;
}
.hoge2{
@include hoge;
}
ちなみに引数の指定も可能
hoge1とhoge2で違う色の指定ができる
@mixin hoge($color){
width:200px;
height:100px;
color:$color;
}
.hoge1{
@include hoge(#fafafa);
}
.hoge2{
@include hoge(red);
}