Sassの基本

プログラミング言語のごとく CSS を記述できる SASS の基本について見ていきます。

SASS とは

Sass （サース）とは、簡単に表現すると「CSSをより効率的に書ける言語」になります。

Sass は、「 Syntactically Awesome StyleSheet 」を略した言葉で

• Syntactically　＝　構文的に
• Awesome　＝　 驚くべき
• StyleSheet　＝　スタイルシート

と言う意味になります。

「変数や関数などの CSS を拡張した言語を使うことによって、驚くくらいに早くスタイルシートを作ることができると言う」感じなのでしょう。

変数の仕組みなどは、 CSS のバージョンアップとともにネイティブでサポートされつつありますが、条件分岐やループ処理,Mixin,関数など冗長化を少なくすることができます。

Sass には、「 SASS 記法」と「 SCSS 記法」という2種類の書き方があります。ここでは、 SCSS 記法の書き方について見ていきたいと思います。

セレクタのネスト

子孫セレクタを CSS で記述すると、次のようになります。

ul {
  background: #333;
}
ul li {
  margin-bottom: 1rem;
}
ul li img {
  display: block;
}

Sass では、セレクタの中にセレクタを書いてとネストすることができます。

ul{
    background: #333;
    li{
        margin-bottom: 1rem;
        img{
            display: block;
        }
    }
}

上記例から、記述量を減らせることが確認できます。

プロパティのネスト

セレクタと同じようにプロパティもネストすることができます。

.copyright {
  border-bottom:  1px solid #795548;
  border-right:  1px solid #795548;
  border-left:1px dotted #263238;
  padding-top: 0.5em;
  padding-right: 1.5em;
}

プロパティをネストする場合は、「{」の前に「:」をつけます。

.copyright {
  border:{
    bottom: 1px solid #795548;
    right: 1px solid #795548;
    left: 1px dotted #263238;
  }
  padding:{
    top: 0.5em;
    right: 1.5em;
  }
}

ネストしたことで可読性があがったかな・・・

親の参照「 & 」

「 :hover 」疑似クラスを CSS で記述する場合、親セレクタに続けて「 :hover 」を書きます。

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

Sass では、親セレクタを参照するよう「 & 」を使用します。

a{
  text-decoration: none;
  &:hover{
    text-decoration: underline;
  }
}