css →（Sass記法）ネスト可について （自分用）

＜css ネスト が可能＞

Sassについて学ぶ

【変数として指定】

（cssは上から読み込む為）変数名は上に記法。また、スコープ範囲注意。

$変数名： 内容；

クラス等 {
プロパティー： $変数名;
}

【scssを別ファイルに分けて読み込む場合】

・ファイル拡張子は　.scss

・別ファイルscssの前に　_アンダースコア必須

　（パーシャル：先頭にアンダースコアが付いた名前のSassファイル　Sassについて学ぶ）

・別ファイルscss内の ＄変数 を呼び出し可能。

@import " 別ファイルscss名 ";　

（＠useもしくは@import）　

style.scss

                        //別ファイルscss名を””で囲む
 @import "???";          //一番上で読み込む  
                        //import時は アンダースコア、拡張子は略可
.class {
  color: $color;       //変数の利用可となる
}

_???.scss

 $color: #000;           //変数の指定

【共通としたい　＝　@mixin 名 →　@include 名　】

＠mixin ミックスイン名 {

//複数箇所、共通の内容指定

}


  ＠mixinの呼び出したいクラスなど名 {
               ＠include ミックスイン名;            //＠mixinの呼び出し　
  }

【@mixin ミックスイン　＋　引数】

＠mixin ミックスイン名($color) {
              background: $color;  
              color: $color;             
}


　クラスなど名 {
       ＠include ミックスイン名(引数);   //引数は$colorへ渡される
}

{}セレクタ内に　 別{}セレクタの指定可

.class {               //この場合、class名変更時１箇所修正で済む
    color: red;

   h1{
     color: blue;
    &:hover{             //h1スコープ内に、&
      opacity: 0.6;
    }
   }
}

ーーーーーーーーーーーーーーーーーーーーーー
<cssのみだと>

.class {            //この場合、class名変更時２箇所修正が必要
    color: red;
}

.class h1{
   color: blue;
}

.class h1:hover{
  opacity: 0.6;
}