Sassの基礎

Sassとは?

  • CSSをより効率的にかくことができる言語
  • SASS記法とSCSS記法の2つがある

メリットは?

  • CSSより記述を減らせる
  • コードの再利用ができる

通常のCSS

.header {
  width: 100%;
}
.header ul{
  padding: 20px;
}

Sassの場合

.header{
  width: 100%;

  ul{
    padding: 20px;
  }
}

入れ子構造のメリットは?

  • 大きなサイトになるほど効果が大きい
  • クラス名の変更が簡単になる

↓の場合Sassでは1箇所の変更だけで対応できる

通常のCSS

.header {
  width: 100%;
}
.header ul{
  padding: 20px;
}
.header ul li {
  font-size: 30px;
}

Sassの場合

.header {
  width: 100%;
    ul {
      padding: 20px;
    }
      li {
        font-size: 30px;
      }
}