A3 code note

06/23/2023

Sass

Sassの環境構築

Sass（Syntactically Awesome StyleSheet）とは、CSSを効率的かつ使いやすくするための言語です。直訳すると「構文的に素晴らしいスタイルシート」となります。

さて、環境構築を進めていきましょう。Sassを使用する方法には、コマンドラインでコマンドを実行する方法と、VSCodeの拡張機能「Live Sass Compiler」を使用する方法があります。ただし、コマンドを実行する方法はUbuntu（Windows）とMacでは異なりますので、以下にそれぞれの手順をご説明します。

live sass compiler

「Live Sass Compiler」とは、VSCodeの拡張機能であり、Sassのコンパイルを簡単に行うことができます。この拡張機能を使用することで、手間をかけずに環境を構築し、Sassを利用することができます。ただし、この拡張機能はVSCodeが使用可能な環境でのみ利用することができます。

  1. VSCodeを起動し、左側の拡張機能のアイコンをクリック
  2. 検索窓が表示されるので、そこに「live sass compiler」と入力
  3. 検索結果中「live sass compiler」を選択してインストール

次に設定を行いましょう。設定は「setting.json」というファイルを書き換えることで編集が可能です。

  1. 拡張機能タブのlive sass compilerを探して歯車マークをクリック
  2. 小窓が出てくるのでその中の「拡張機能の設定」をクリック
  3. 一番上の「setting.jsonで編集」をクリック
  4. setting.jsonを開いたら以下のコードをコピペして貼り付け
    （既に何か書いてあったら、書き足しても良いし、全て消してから上書きしてしまっても大丈夫）
{
    "workbench.colorTheme": "Visual Studio Dark",
    "window.zoomLevel": 1,
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css/"
    }
  ]
}

savePath：scssファイルをコンパイルし生成されたcssファイルを保存する場所をパスの形式で記述します。画像の設定ではプロジェクトフォルダをルートディレクトリとした絶対パスで記述されており、ルート直下にcssフォルダをを作成し、その中に保存するようになっています。(style.scssを作った場合)

├── index.html
├── css
│   ├── style.css
│   └── style.css.map
└── Sass
    └── style.scss

window.zoomlevel：VSCodeの拡大率です。数字を大きくすると大きな表示になります。下記のショートカットでも操作できます。

縮小：⌘+ -(Mac)/Ctrl+-(Windows)

拡大：⌘+Shift+ +(Mac)/Ctrl+ +(Windows)

使い方

  1. scssフォルダを作ってその中にstyle.scssを作成
  2. 画面に右下にある「watch sass」をクリック

そしたら自動でcssフォルダとその中にstyle.cssファイルを作成してくれます。
この後はstyle.scssファイルを書き込むたびにstyle.cssファイルにコンパイルされるようになります。

再度「watch sass」をクリックする自動でコンパイルしなくなります。

Ubuntu(Windows)

UbuntuでSassをコンパイルするにはSassの他にRubyをインストールする必要があります。

まずUbuntuを立ち上げましょう。そして以下のコマンドを実行してUbuntuを最新状態にしましょう。

sudo apt update

その後Rubyをインストールする2つのコマンドを実行

sudo apt install ruby
sudo apt install ruby-dev

正しくインストールされたか確認

ruby -v

最後にSassをインストール

sudo apt install ruby-sass

Sassが正しくインストールされたか確認

sass -v

Mac

MacにはSassを使うのに必要なRubyが入ってるので早速Sassをインストールします。

まずはターミナルを開いてください。開いたら以下のコマンドを実行してSassをインストールします。

gem install sass

実行して「1 gem installed」と表示されればインストールは完了です。

Sassのコンパイル

ここからはWindowsの方もMacの方も同じようにSassのコマンドを実行していきます。

以下のディレクトリ構造でディレクトリとファイルを作成してください。

├── index.html
├── css
└── Sass
    └── style.scss

作成したら/作成したディレクトリ$に戻ってcode .でVSCodeを開いてください。試しにstyle.scssファイルに書き込んでみましょう。

scssファイルに書き込んだら以下のコマンドを実行して下さい。

sass --watch Sass/style.scss:css/style.css

実行して以下の文字が返ってきたら成功です。

>>> Sass is watching for changes. Press Ctrl-C to stop.
      write css/style.css
      write css/style.css.map

Sassフォルダの中にあるscssファイルに書き込んだものが常にcssフォルダの中にあるcssファイルにコンパイルされるようになりました。

常にコンパイルされる状態を止めたい場合はCtrl+Cを押したらコンパイルされなくなります。

Sassのセットアップ

まず、各セクションごとに分けたSassを頭に「_」をつけて作成します。
ファイルの頭に_(アンダーバー)をつけるとそのファイルはコンパイルされることがありません。

コンパイルしたいmain.scssのみ_(アンダーバー)をつけていません。

_about.scss
_entry.scss
_footer.scss
_lib.scss　--- 共通部分
_reset.scss -- どのブラウザで見てもキレイになるように
_contact.scss
_first-v.scss
_header.scss
_news.scss
main.scss

作ったSassをmain.scssに読み込ませます。

@import "reset";
@import "lib";
@import "header";
@import "first-v";
@import "about";
@import "news";
@import "entry";
@import "contact";
@import "footer";

ターミナルに以下入力してコンパイル

sass --watch Sass:css

–watch ：ライブでコンパイルしてくれる（勝手にやってくれる）
Sass:css：Sassフォルダのものを、cssフォルダに

@extend

上記方法で違う部分に書いたcssを違うデータで呼びたしたいとき、Sassの機能である@extendを使用します。

.classname {
    // btnのCSSをコピーする
    @extend .btn;
    width: 100%;
}
.title {
    &::before {
        display: inline-block;
        content: "";
        width: 3rem;
        border-top: 1px solid #191919;
        margin-right: 2rem;
    }

    &::after {
        @extend .title::before;
        margin-right: 0;
        margin-left: 2rem;
    }
}

@mixin（ミックスイン）

Mixinは再利用可能なスタイルの塊を定義するために使用されます。

@mixin pc {
    @media (min-width:1025px) {
        @content;
    }
}

// タブレット画面
@mixin tab {
    @media (max-width:1024px) {
        @content;
    }
}

// スマホ画面
@mixin sp {
    @media (max-width:599px) {
        @content;
    }
}
  1. pcという名前のMixinは、画面の幅が1025px以上の場合に適用されるスタイルを定義しています。@contentは、Mixinが呼び出された箇所のスタイルが挿入される場所です。
  2. tabという名前のMixinは、画面の幅が1024px以下の場合に適用されるスタイルを定義しています。
  3. spという名前のMixinは、画面の幅が599px以下の場合に適用されるスタイルを定義しています。

これらのMixinを使用することで、異なる画面サイズに対応したスタイルを簡単に作成できます。例えば、以下のようにMixinを呼び出すことができます：

.my-element {
    color: red;

    @include pc {
        font-size: 20px;
    }

    @include tab {
        font-size: 16px;
    }

    @include sp {
        font-size: 12px;
    }
}