すべてのカテゴリ

結論から言うと、使えます。SassはPHPやWordPress専用のものではなく、HTML＋CSSだけの、いわゆる“バニラ”な環境でも問題なく使えます。誤解されがちですが、Sassは「特定のフレームワークに依存する技術」ではありません。あくまでCSSを効率よく書くためのプリプロセッサです。最終的には通常のCSSに変換されるため、どんな環境でも利用できます。そもそもSassとは何かSassは、CSSをより構造的・効率的に記述するための拡張言語です。例えば以下のようなことが可能になります。・変数を使える・ネスト構造で書ける・共通スタイルをまとめられる・計算や条件分岐ができるしかし重要なのは、「ブラウザはSassを理解できない」という点です。ブラウザが理解できるのはCSSのみです。そのため、Sassは必ずCSSに“コンパイル”してから使用します。バニラ環境での使い方流れは非常にシンプルです。Sassでscssファイルを書くコンパイルしてcssファイルを生成する生成されたcssをHTMLで読み込むつまり、やっていることは普通のCSSと同じです。違うのは「開発時の書き方」だけです。バニラHTMLでも、Reactでも、WordPressでも、最終的に読み込むのはcssファイルです。だから環境は関係ありません。なぜ「PHPでしか使えない」と思われるのかWordPressテーマ開発などでSassを使うケースが多いため、そういう印象を持ちやすいだけです。実際には、・静的HTMLサイト・LP制作・ポートフォリオサイト・ReactやVueなどのSPAすべてで利用可能です。技術的な制限はありません。S

Sass（Syntactically Awesome Stylesheets）は、CSSをより効率的かつ管理しやすくするための拡張言語です。最終的には通常のCSSに変換して使用するため、あらゆるブラウザで動作します。ここでは、Sassの主な特徴をわかりやすくご紹介します。変数での管理Sassでは色やフォントサイズなどの値を変数としてまとめられるため、一箇所の変更で全体に反映できます。テーマカラーや共通スタイルの更新が容易になり、保守性が向上します。ネスト構造CSSでは階層が深くなるとセレクタが長くなりがちですが、Sassでは入れ子構造で記述できるため、読みやすく整理されたコードになります。Mixin（ミックスイン）何度も使うスタイルの組み合わせを一度だけ定義し、必要な場所で呼び出せます。共通レイアウトやアニメーションなど、再利用性が高いスタイルに適しています。継承機能既存のクラスを引き継ぎ、共通部分を共有しながら個別のスタイルを追加できます。重複記述を減らし、コードの簡潔さを保てます。演算機能数値や色に対して四則演算が可能です。フォントサイズの倍率計算や色の明暗調整など、デザイン調整を効率化できます。まとめSassは、変数・ネスト・再利用・継承・演算・モジュール化といった機能により、CSSの記述量を減らし、保守性や開発効率を大きく高めます。特に中〜大規模なプロジェクトでは、その効果を強く実感できるでしょう。

本日は、ポートフォリオブログで、mixinの使い方についてまとめておきました。【備忘録】Sassでmixinを使う 2022年01月10日 Sassで使うmixinについてまとめておきます。 ①mixinとはCSSのスタイルをパッケージしておくもの mixinとは、Sassで使うCSSスタイルをまとめておけるパッケージです。 必要な時にmixinを呼び出すことで、まとまったスタイルを適用できます。 ②　mixin基本形 mixinでパッケージを作ります。 使うときは、includeでパッケージを呼び出します。 これ以降、アットマークがこのブログで使えませんので、＊で代用しています。[Sass] ＊mixin example{ border: 1px solid #fff; margin: 10px auto; } //＊mixinにexampleという名前をつけました。 .box1{ ＊include example; background-color: #ccc; } //exampleという＊mixinを呼び出し、background-colorもつけました。 [CSSでの表記] .box1{ border: 1px solid #fff; margin: 10px auto; background-color: #ccc; } ＊includeで呼び出したことで、＊mixin内のスタイルも適用されます。 ③＊mixinに引数（ひきすう）を１つ使う このmixinにつける名前（ここではexample）に、引数を付けることができます。 引数とは、mixinパッケージの中

CSS設計を学ぶ保守性が高く、きれいなコーディングができるように。BEMはSassと相性が良いので、身につければきれいなコードで今より短時間で記述できるようになるだろう

CSSを書いていると、よく出てくるのが Sass（サス） と SCSS（エスシーエスエス） という言葉です。名前が似ているので混乱しがちですが、結論から言うと SCSSはSassの書き方の一つ です。この記事では、「何が違うのか」「どちらを使えばいいのか」を整理して説明します。Sassとは何かSassは、CSSをより便利に書くための 拡張言語 です。CSSでは書けないような、次のようなことができます。変数を使って色やサイズを管理できる共通のスタイルをまとめて再利用できるファイルを分割して整理できる計算や条件分岐のような書き方ができるつまり、Sassは「CSSを効率よく、読みやすく、大規模に書くための仕組み」だと考えると分かりやすいです。SCSSとは何かSCSSは、Sassの中で最もよく使われている 記法（書き方） です。特徴はとてもシンプルで、CSSとほぼ同じ見た目で書けるという点にあります。そのため、既存のCSSをほぼそのまま移行できるCSSに慣れている人が違和感なく使えるチーム開発でも理解されやすいといったメリットがあります。現在、実務や学習の場面で「Sassを使う」と言われている場合、実際にはSCSSを使っているケースがほとんど です。sass（インデント記法）とは？一方で、拡張子が .sass の書き方も存在します。こちらは インデント記法 と呼ばれています。この書き方では、波括弧を使わないセミコロンを書かないインデント（字下げ）で構造を表すという特徴があります。記述量は少なくなりますが、インデントのミスが起きやすいCSSとの見た目の差が大きい初学者には少し分かりづらい