Zenn
🍊

Sass使ってみた

2023/04/25に公開
Rails
tech

Sassとは

Syntactically Awesome Style Sheets の略
CSS を便利に使えるように拡張した言語。
四則演算・ネストなど、CSSにはない機能を利用することができる。

⚠️SassファイルのままではWebブラウザなどが解釈できないため、コンパイルを行い、CSS形式に変換する必要がある⚠️

二つの記述方法がある！

構文 拡張子 説明
SCSS .scss CSS によく似た構文で、いくつかの例外を除いてCSSの上位互換。拡張子が .scss のファイルに記述する。有効なCSSは有効なSCSSでもある。
Sass .sass インデント構文。Sassオリジナルの構文で、中括弧やセミコロンの代わりにインデントを使用。拡張子が.sassのファイルに記述。

SCSSの基本機能

  • 変数を利用できる
  • ネスト構造を利用できる
  • スタイルシートを分けられる
  • 条件分岐を利用できる
  • Mixin機能を利用できる

SCSSの書き方

  • 変数

Sassはローカル変数とグローバル変数を利用することが可能

変数に登録していたら、「自分でわかりやすい名前が使える」＋「変更があったときに元の変数を変更すれば全て変更可能」なので便利！

例

$black: #000000;
$position: left;

.item1 {
    color: $black;
}

.item2 {
    background: $black;
    margin-#{$position}: 30px;
    // #{$変数名}と記述することで、その変数の値を文字列として使用できる。
}
  • ネスト（入れ子）

子要素を波括弧{}で囲うことで、まとめてスタイルを設定することが可能

.item1 {
    width: 200px;

    .item2 {
        width: 100px;

        .item3 {
            width: 50px;
        }
    }
}
  • 条件分岐
$position: left;
$width: 250px;

.item1 {
    @if $position == left {
        padding-left: 10px;
    }
}

.item2 {
    @if $width > 300px {
        margin-right: 10px;
    } @else if $width < 200px {
        margin-left: 10px;
    } @else {
        margin-top: 10px;
    }
}
  • mixin

mixinとは、プロパティと変数をセットしておいて、受け取った変数を使ってスタイルを定義する、というものです。使う際には@includeで呼び出す。

@mixin 名前(引数【任意、初期値設定可】){
  プロパティ: 値【引数含】
}
  • 関数
@function 任意の関数名(引数){
  @return 計算処理【引数含】
}

φ(･･b
https://bear-fruit.online/what-is-sass/

昨日はHTMLとCSSを使いサイトを作る復習をした！
ただCSSを使うだけだと勿体無いと思ったので、
SCSSのネストや変数の簡単な記述法だけ使い、少し学んでみた！

Discussion