mk-webwork codenote
SCSS(Sass)
矢印アイコン

SCSS(Sass)

  • css

参照：Sass公式サイトsass-lang.com
ファイルを保存→ツール(Dreamweaver)→コンパイル→同じファイル内にcssファイルが作成される

Scssの記述

/*style.scss 
 Scss Document*/　//←/* */数行のコメントアウトはコンパイルするとcssに反映される
//コメント　←//1行のコメントアウトはコンパイルすると表示されない

main {
  p {
    font-size: 20px;
  }
  div {
    font-size: 20px;
  }
  h2 {
    font-size: 20px;
  }
}

.section-top {
  height: 400px;
  background-color: #888;
  h2 {
    color: #F00;
  }
}

変数

//$マークをつける

$baseBackgroundColor: #333; 
.section-top {
  height: 400px;
  background-color: $baseBackgroundColor;
  h2 {
    color: #F00;
  }
}
.section-news {
  background-color: $baseBackgroundColor;
  &__title {
    color: #00F;
    font: {
      size: 40px;
      weight: 600;
    } 
  } 
}

カスタムプロパティ

:root{
   --main-color:#______;
   --background-color:#______;
   --accent-color:#______;
   --font-color:#______;
}
(--の名称は自由）

h2{
  color:var(--font-color)
}

親要素を表す「あんぱさんと”＆”」

.section-top {
  height: 400px;
  background-color: #888;
  h2 {
    color: #F00;
  }
  &:hover {　　           //←"&"=.section-top
    background-color: #333;
  }
}
/*↑cssにコンパイルすると  
.section-top {
  height: 400px;
  background-color: #888; }
  .section-top h2 {
    color: #F00; }
  .section-top:hover {
    background-color: #333; }
*/


//class="section-news__title"とクラス名をつけた場合
.section-news {
  &__title {　           　//←section-news__titleの意味
    color: #00F;
    font: {
      size: 40px;
      weight: 600;
    } 
  } 
}
/* ↑cssにコンパイルすると 
.section-news__title {
  color: #00F;
  font-size: 40px;
  font-weight: 600; }
*/
←　もどる