Zenn
🐡

Sassとは

2022/05/20に公開
CSS
Linux
Node.js
Sass
frontend
tech

今回の内容

いつもLinuxの環境構築などでお世話になってるここのサイトから今日はSassについて勉強したいと思います( ･ω･ )/

Sassってなんぞ

Sassとは
  • Sytactically Awesine Style Sheetの略
  • CSSのメタ言語
  • 文字通りCSSを拡張してイケてる書き方ができるようにしたもの！


    メタ言語とは、ある言語についてなんらかの記述をするための言語。
    特定のルールを加えて応用が効くようになったもの(⑅•ᴗ•⑅)
Sassと使うメリット

複雑になりがちなCSSをメンテナンスしやすい!



具体的には...

  • ネスト（入れ子）が使えて構造が把握しやすい
  • 四則演算ができる
  • 変数が使える
  • ファイルを分割できる
  • Mixin（ミックスイン）でコードを引用できる
  • コードを継承で使い回せる
  • JavaScriptのように関数が使える

具体的に見てみる

ネストが使える

例えばsectionの中にclass-oneクラスとbuttonがあったとして、それぞれにCSSを当てたい場合次のようになります。

右が素のCSS、左がSass。
え、分かりやすい。Awesome!!(๑♥‿♥๑)
sectionの中にあるよってことが普通のCSSより分かりやすいですね〜


また、複数のクラスを指定したい場合は

です。
さらに、ある要素に対する疑似要素も見やすくなります。
コンパイルされるとこうなる ↓

&で親要素を取得

&を使うことで、親要素を指定することができます。

変数

$マークによって変数を指定することができます。
何度も出てくるような数値や属性に使えて便利。
ただCSSにも変数はあるのでSass独自というわけでもないけれど...

Sassでもグローバル変数とローカル変数があります★

四則演算

CSSでもcalcを使えば四則演算できるのでこちらもSass独自ではないけど、Sassの場合変数と組み合わせて使えるのでその点が便利♥

ファイルの分割

Sassはファイルを分割し、インポートすることで膨大なコードのCSSファイルをコンポーネント化することが可能。
Mixinや継承などで出てくるコードを分割するのにも使えそう(`·⊝·´)

Mixin

Mixinとは引数を取ることができ、コードを一部書き換えながら再利用できる機能のこと。
関数みたいなイメージですかね（*’∀’人）
正確には別物みたいですが。↓

@mixin, very similar to a function but the main difference between the two is that mixins output lines of Sass code that will compile directly into CSS styles, while functions return a value that can then become the value for a CSS property or become something that might be passed to another function or mixin.

Mixinの使い方
  1. Mixinの作成
  2. includeで適用

例)

使ってみる

ディレクトリの作成、Node.jsの初期化
mkdir sample
cd sample
npm init -y

★npmはNode.jsインストール時に一緒にインストールされます

Sassのインストール
npm install node-sass --save-dev

☆ --save-dev はローカルインストールするためのコマンド
☆　正確に言うと npm install -gがグローバルインストールのコマンドで、-gを付けないとローカルインストール

scssファイルの作成と設定関連

sassディレクトリの中にmain.scssファイルを作成。

mkdir scss
cd scss
touch main.scss



そのファイルに記述したSassのコードをCSSにコンパイルするように設定をするため、package.jsonのscriptsの箇所に以下を記述。

"scripts": {
   "compile:sass": "node-sass sass/main.scss css/style.css"
}

`-w`オプションをつけると、変更を加えるたびにコンパイルが実行されるように設定できる。

☆sass/main.scssの中身をcss/style.cssにコンパイルするよ！という意味なのでファイル名などは適宜変えてください（*’∀’人）

コンパイルの実行
npm run compile:sass

以上、Sassについてでした⸜( •⌄• )⸝❤︎
すごいどうでもいいですが、女子的にはSass関連をググるとピンクで可愛いのでSass大好きです。←そこ？
大事！テンションが上がるもの！( ¯꒳¯ )ｂ✧笑

ほらね？めちゃくちゃ可愛い。


実際にターミナル操作をやってみたいな〜という方はここのサイトで実際にやってみるのがいいかと( •̀ω•́ )/
実際に仮想環境でコマンドをじゃんじゃん叩けるのでパソコンが壊れる心配がなくて良き★
コース全体はこんな感じ

Discussion