Sassとは

Sassの初心者の記事です。

Post CSSも良さげですね。

Sassとは

• CSS拡張言語です。
• 変数、ネスト、mixin、関数、圧縮、など便利な機能を利用できます。
• 事前にcompileが必要です。

Sassの種類

Sass公式

Sassには、3種類の実装と2つの構文形式があるようです。

Sassの3つの実装

• Dart Sass
• LibSass
• Ruby Sass

現在使用するのは、”Dart Sass” です。

“Lib Sass” は、現在非推奨になっています。

“Ruby Sass” は、2019 年 3 月 26 日にサポートが終了しました。

Sassの2つの構文形式

• Sass(.sass)
• SCSS(.scss)

Sass(.sass)

Sassの初期ではこちらの形式が使用されていました。

CSSクラスの定義を、ブロック{}を使用しないでインデントだけで定義します。

文末の”;”セミコロンも使用しないようです。

SCSS(.scss)

新しい形式です。

中括弧{}、セミコロン”;”を使用します。

こちらSCSS構文が一般的に使用されているようです。

Sassをコンパイルする方法

Sassで書いたファイルは、普通のCSSにコンパイルする必要があります。

いくつか方法があります。

• VSCodeの拡張機能でコンパイルする方法
• npmでsassをinstallしてコンパイルする方法

VSCodeの拡張機能でsassを利用する方法

Live Sass Compilerを使用します。

VSCodeマーケットプレースから検索すると2件ヒットします。(2023-12-28)

• Live Sass Compiler v6.1.2 Glenn Marks…こちらを使用する
• Live Sass Compiler v3.0.0 Ritwick Dey…こちらは非推奨

VSCodeのマーケットプレイスでは非推奨の拡張機能には、タイトルに取り消し線、⚠注意マーク、”この拡張機能は非推奨です。”との表示があるのでわかりやすいですね。

Cursorエディターの場合は、非推奨の案内が表示されないので注意しましょう。

Live Sass Compiler by Glenn Marks

Live Sass Compiler by Glenn Marks, market place…使用方法の説明あります。

Settings & Commands, GitHub…Settingの説明あります。

設定

拡張機能検索ワード

• @ext:glenn2223.live-sass
• liveSassCompile.settings.

設定

"liveSassCompile.settings.formats": [
    {
        "format": "compressed",
        "extensionName": ".css",
        "savePath": "/css",
        "savePathReplacementPairs": null
    }
],

defaultの値がいくつかありますが今回は下記の設定を変更しました。

• “format”: “compressed” …コンパイル後のCSSを圧縮する設定（expanded or compressed）
• “savePath”: “/css” …コンパイル後のCSSファイルの出力先の設定

使用方法

• Live Sass Compiler をInstallする
• scssファイルを作成する
• “Watch Sass”ボタンを押す
  • ボタンは、VSCode下段のステータスバーにあります
  • 押すと、”Watching…”に表示が変わります
  • 再度押すと停止します
• コンパイル後の”style.css”を使用する

Watch中は、scssファイルが更新されるとコンパイルして出力します。

scssファイルが見つからない場合、”Watch Sass” ボタンが表示されません。

先の設定の場合の出力は、”css”ディレクトリに出力され、圧縮されているはずです。

勝手にコンパイルしてほしくない場合は、ファイル名の先頭に”_”アンダーバーを付けます。scssファイルを分割する場合などで利用します。

Sass 文法

いくつかSassのすばらしい機能を紹介

ネスト

html

<div class="div1">
    <div class="div11"></div>
    <div class="div11"></div>
    <div class="div11"></div>
</div>

scss

クラスの中にクラスを定義できます

.div1 {
    background-color: steelblue;
    .div11 {
        width: 70px;
        height: 70px;
        background-color: blue;
        margin: 1px;
    }
}

css (出力結果)

.div1 {
    background-color: steelblue;
}
.div1 .div11 {
    width: 70px;
    height: 70px;
    background-color: blue;
    margin: 1px;
}

CSS Nesting

CSS Nesting

現在は、普通のCSSもネスト使用できるようです。CSSも成長しているんですね。

“&” 親セレクタ参照

“&” は、親要素を示します。親セレクターですね。scss

.button {
    cursor: pointer;
    background-color: rgba(126, 126, 214, 0.9);
    &:hover {
        background-color: rgba(195, 195, 226, 0.8);
    }
}

css

.button {
    cursor: pointer;
    background-color: rgba(126, 126, 214, 0.9);
}
.button:hover {
    background-color: rgba(195, 195, 226, 0.8);
}

などなどscss

.block {
    background-color: wheat;
                        
    & &__item {
        background-color: cadetblue;
        padding: 1rem;
    }
}

css

.block {
    background-color: wheat;
}
.block .block__item {
    background-color: cadetblue;
    padding: 1rem;
}

などなど

以下は、ul, ol 配下のul, ol のpaddingを0にするの意味ですね。scss

ul, ol {
    text-align: left;
    & & {
        padding: {
            bottom: 0;
            left: 0;
        }
    }
}

css

ul, ol {
    text-align: left;
}
ul ul, ul ol, ol ul, ol ol {
    padding-bottom: 0;
    padding-left: 0;
}

変数

変数を使えます

変数名の頭に”$”を付けてください

変数名に使用できる文字。英字、数字、ハイフン、アンダーバー。先頭は英字が安全です。

変数名途中のハイフンとアンダーバーは同じ扱いになります。scss

$textColor: rgba(8, 41, 151, 0.9);
$backGroundColor: rgb(229, 243, 153);

.div2 {
    background-color: $backGroundColor;
    color: $textColor;
}

css

.div2 {
    background-color: rgb(229, 243, 153);
    color: rgba(8, 41, 151, 0.9);
}

変数用のファイルを別に用意する場合

@useルールを使用して別ファイルを読み込みます。

@useは名前空間を形成します。_variables.scss

$backGroundColor: rgb(245, 146, 134);

style1.scss

@use "./partial/variables";

.container {
    background-color: variables.$backGroundColor;
}

分割とインポート

他のscssファイルを読み込むときは、@useルールを使用します。

昔は@importを使用していましたが、現在は使用しません。

読み込まれるscssファイルのファイル名の先頭には”_”アンダーバーを付けます。

“_”アンダーバーを付けないと、compileされて別のcssファイルが生成されてしまいます。。

@useでファイル名を指定するとき、ファイル名先頭の”_”と拡張子は省略が可能です。

cssクラスの分割

@useで読み込まれたCSSクラスはそのまま有効になります。

出力結果CSSを確認してみましょう。./partial/_p1.scss

.backGroundColor {
    background-color: aqua;
}

style.scss

@use "./partial/_p1.scss";
or
@use "./partial/p1";

css

.backGroundColor {
    background-color: aqua;
}

変数定義の分割

@useで変数定義を読み込んだ場合は、名前空間を指定する必要があります。

mixinでも名前空間の指定が必要です。

変数名が”-“,”_”で始まる場合、それはprivateになります。_p2.scss

$var1: 1rem;

style.scss

@use "./partial/p2";

.container1 {
    // padding: $var1; // 名前空間が必要ですね
    padding: p2.$var1;
}

@use 別名定義 as

名前空間名の別名を定義できます。

“as”を使用します。style.scss

@use "./partial/p3" as v;

.container2 {
    padding: v.$var1;
    background-color: burlywood;
}

@use 名前空間なし 「*：アスタリスク」

名前空間の指定を省略することができます。

“as *” と指定します。./partial/_p4.scss

$var4: 3rem;

style.scss

@use "./partial/p4" as *;

.container4 {
    padding: $var4; // 名前空間なし
}

mixins

css定義に別名を付けて呼び出せます。返り値の無い関数のようですね。

@mixinで処理を定義し、@includeで呼び出します。scss

// 定義する
@mixin coloring-pastel-set1 {
    background-color: #eee9da;
    color: #6096b4;
}
                        
// 呼び出す
.text-box-23 {
    @include coloring-pastel-set1;
    padding: 1rem;
}

css

.text-box-23 {
    background-color: #eee9da;
    color: #6096b4;
    padding: 1rem;
  }

引数も使用できますscss

@mixin coloring-pastel-set2($padding) {
    background-color: #eee9da;
    color: #6096b4;
    padding: $padding;
}
                        
.text-box-24 {
    @include coloring-pastel-set2(2rem);
}

css

.text-box-24 {
    background-color: #eee9da;
    color: #6096b4;
    padding: 2rem;
    margin: 1px;
  }

引数に初期値を設定するscss

@mixin coloring-pastel-set3($padding: 1rem) {
    background-color: #eee9da;
    color: #6096b4;
    padding: $padding;
}
.text-box-25 {
    @include coloring-pastel-set3;
}
.text-box-25-3 {
    @include coloring-pastel-set3(3rem);
}

css

.text-box-25 {
    background-color: #eee9da;
    color: #6096b4;
    padding: 1rem;
  }
.text-box-25-3 {
    background-color: #eee9da;
    color: #6096b4;
    padding: 3rem;
}

複数の引数は”,”で区切って指定するscss

@mixin _container-set1($padding: 1rem, $margin: 1rem) {
    padding: $padding;
    margin: $margin;
}
.container1 {
    @include _container-set1($padding: 2rem, $margin: 2rem);
    background-color: darkseagreen;
}

@useルールで呼び出す場合は名前空間の指定が必要

別名の定義も可能_coloring27.scss

@mixin coloring_set27 {
    background-color: #f6aa06;
    color: #933d01;
}

style.scss

@use "coloring27";

.test-color {
    background-color: coloring27.$Color25;
    color: coloring27.$Color23;
}

@contentでmixinにblockを挿入する

slotの概念かな_mixin.scss

@mixin block1 {
    margin: 1px 0;
    padding: 1rem;
    @content;
}

style.scss

.container3 {
    @include mixin.block1 {
        background-color: thistle;
    }
}

css

.container3 {
    margin: 1px 0;
    padding: 1rem;
    background-color: thistle;
}

media-queryでよく使用されるようだ。

@mixin sp {
    @media (max-width: 768px) {
        @content;
    }
}

.container4 {
    @include mixin.sp {
        background-color: slateblue;
    }
}

参考

Sass: Syntactically Awesome Style Sheets

SassMeister | The Sass Playground!

Sass GitHub