Sass basics sassの便利機能一覧

最近はほぼ主流になってきているSass、ここで記述方法がscssの記述をしてる方とsassの記述をしてる方と別れてきますが、今回はsassの記述で便利な方法を紹介していきます。

基本的な記述方法

以下の方法で入力すると、cssにはこのように記述されます。

h1
  font-size: 26px

h1{font-size: 26px;}

↑の内容のようにsassの記述には開始タグやとじタグがなくその代わりに
改行 + インデントで閉じタグの代わりを担います。
またコロンの後に必ず半角スペースを入れることなどルールがあります。

ルール一覧

・「:」コロンの後は必ずスペースを入れる
・「;」セミコロンはなし

またdivタグの中のpタグやクラスタグの中のタグにスタイルを適応させる時は
このように記述します。
以下のような.test1のクラスの中のh2タグにスタイルと適応させる時は

<div class="test1">
  <h2>テストタイトル</h2>
</div>

.test1
  width: 80%
  margin: 0 auto
  h2
    font-size: 22px

↓cssにコンパイルすると

.text1{
  width: 80%;
  margin: 0 auto;
}
.text1 h2{font-size: 22px;}

ファイルのインポート

ファイルのインポートではインポートさせたいファイル名の先頭に「_」アンダーバーを設置する
_common.sass
style.sass
この場合では_common.sass内の記述をstyle.sassへインポートさせるので
style.sass内での記述をこうする

@import common

こうすると記述した箇所にcommon.sassでのスタイルが記述される
例えば上部に@import commonと記述するとstyle.sassの上部にcommon.sassでのスタイルが記述され

下部に記載すると下部に記述されます。

mixin

mixinとは簡単に言うと長く書いた記述を簡略化してくれます。
それでは記述方法は以下です。

//記述指定
=vertical-margin($px)
  margin: $px auto
  &:first-child
    margin-top: 0
  &last-child
    margin-bottom: 0

//使用方法
.test
  + vertical-margin(15px)

↓cssにコンパイルすると

.test {
  margin: 15px auto;
}
.test:first-child {
  margin-top: 0;
}
.test:last-child {
  margin-bottom: 0;
}

参考サイト: https://sass-lang.com/guide

//と/**/のコンパイル後コメントアウトを一緒にコンパイルするか削除するか変わる

//でコメントアウトするとコンパイル後に表示削除されるが、/**/でコンパイルすると、コメントも一緒に表示される。