Sassの基本(SASS記法まで)

はじめに

Sassは以前より知っていいました。ですが、学習コスト>活用メリット という捉え方をしていました。

ですが、Laravelアプリなどの制作で徐々にCSSの量が増えてきていました。

そのため、必要性を感じざるを得ない状況になり重い腰を上げて学習することにしました。笑

※6/26追記:SCSS記法はなんとなく使っていましたが、SASS記法が便利そうだったので使ってみました。それに伴い記事も修正。

CSS設計(SMACSS/BEMなど)まとめ

Sassの概要

✅Sassとは

CSSを拡張したメタ言語。(機能を拡張した言語)

✅基本機能

・ネスト

同じ親要素のセレクタをまとめる。(何度も親要素をコピペして記述する必要がなくなる。)

インデントすることで階層構造の把握がしやすくなる。

記述量が減る

メディアクエリの書く位置を離さずに済む

・変数

プロパティの値に変数を使用可能なので、同じ値を使いまわせる。

※変数は先に宣言する必要がある。

・@extend

セレクタを使いまわすことが可能。

・@mixin

コードの再利用が可能。

・@import

複数のSassファイルをコンパイル時に1つのCSSファイルにまとめる。圧縮も可能。

・関数や条件分岐などプログラミング的機能が使える。

✅その他の機能

・アンバサンド&

親セレクタの参照

・プロパティのネスト

・1行コメント

JSのように//でコメントが可能。

✅関連知識

gulp

さまざまな処理(タスク)を自動化してくれるツール(タスクランナー)。

Dreamweaver

AdobeのHP作成ソフト

SASS記法を使ってみる

※6/26追記

✅SASS記法とは

Scssに比べてタイプ数が減るので、より早くコードを記載することができる。

✅特徴

・波括弧を使わない

・インデントでルールセットを表す

・プロパティと値は1行に1つ

・行末にセミコロン;が不要

・コロン:の後に半角スペース

🙄個人的にコロンの後の半角スペースに気付かなくて地味にハマりました。。。笑

✅VSCodeの設定

拡張機能でStylelintしか入れていない状態だと警告が出たので、Sassをインストール。ついでにインストール数の多かったCompも入れてみました。

これで拡張子.sassでも色が自動で付くようになりました。

✅Gulpの設定

続いてGulpで.sassも自動コンパイルされるよう設定していきます。

gulpfile.jsの編集

gulp.task("sass", function () {
  return gulp
    .src("./src/sass/*.sass")
    .pipe(sass())
    .pipe(gulp.dest("./dist/css"));
});

// Watchに追加
gulp.task("watch", function (done) {
~~~~
  gulp
    .watch(paths.src + "/sass/**.sass")
    .on("change", gulp.series("sass", reload));
});

// defaultに追加
gulp.task(
  "default",
  gulp.series(gulp.parallel("html", "css", "sass", "watch", "browser-sync"))
);

sassファイルの作成(一部抜粋)

// ベースグループ
  
*
  padding: 0
  margin: 0
  word-wrap: break-word

body
  color: black
  background-color: rgba(255, 195, 104, 0.313)
  margin: 0 auto
  font-family: sans-serif
  max-width: 90%
  @media screen and (min-width: 500px) 
    max-width: 60%
  @media screen and (min-width: 700px) 
    max-width: 40%
  @media screen and (min-width: 1024px) 
    max-width: 30%

コンパイル

gulp

確認

SCSSに比べてだいぶシンプル!!かつCSSにするとコメントがデフォルトで消えるようになっていますね!

個人的にはPugを使っているので、同じように書くことができるSASS記法はありがたいです!!

変数なども徐々に使いこなしていきたいです!

おわりに

Sassの学習を始めてみて、改めて学習コストが高いなと感じました。笑

良く言えばできることが多い。

ですので、アプリ制作と併行して徐々に理解を深めていこうと思います。

※6/26追記

最近はGulpをよく使っているので、当時に比べてだいぶSassを使うメリットを感じられるようになった◎

調べたところVueなどにも簡単に導入できそうなので積極的に使っていきたい。

参考:Sassの基本とVueへの導入方法を解説

参考

SassMeister リアルタイムでSassをCSSにコンパイルしてくれるエディタ。

コメントを残す