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;
      }
}