Sassとは

Sassとは Sass（サス、サース）は Syntactically Awesome Stylesheetsといいます。CSSをより効率的に記述するためのメタ言語です。メタ言語とは、他の言語（この場合はCSS）を拡張し、より便利にするための言語を指します。Sassには、「Sa...

ターミナルについて

ターミナルとは ターミナルは、Macをコマンド（命令文）で操作するツールです。通常はアイコンやメニューで操作しますが、ターミナルでは文字を使って直接指示を出します。プログラミングやシステム設定を細かく調整する時に便利で、特に...

Sassのインストール

Sassのインストール 今回は、Sassのインストールを行います。Sassにはいくつかの実装がありますが、その中からDart Sassをインストールします。 Dart Sassを使用する理由は、現在（2024年時点）の標準実装で、公式にサポートされている唯一の...

Sassの書き方

「Sassとは？」のステップで、SassにはSass（インデント形式）とSCSS（波括弧形式）の2つの記述形式があると紹介しました。デザデジでは、CSSに近い記述ができるSCSS形式を採用しており、「Sassの書き方」以降のステップではSCSSを使って進めていきます。...

ブラウザで表示

Sassをコンパイルして、ブラウザに反映 このステップでは、Sassをコンパイルしてブラウザに反映させる方法について学びます。前ステップで学んだSCSSの基本的な書き方を活用し、実際にブラウザでその表示を確認してみましょう。 Sassをコンパ...

変数

本ステップでは、ネスト、変数、演算、ミックスインなどのSCSSの追加機能を解説します。これらの機能を活用することで、コーディングの効率化やデザインの一貫性を向上させ、より洗練されたコードを書くことができます。 ぜひ、SCSSの追加機能を学び...

@mixin / @include

@mixin/@includeについて @mixinと@includeはSCSSでコード再利用を効率化する機能です。@mixinでスタイルを定義し、@includeで適用することで、重複を減らし保守性を向上させます。 @mixinとは？ @mixinは、よく使うスタイルのセット...

@extend

@extendとは？ @extendは、スタイルの重複を避けコードを効率的に再利用できるようにするために使用されます。簡単に言うと、あるスタイルを別のスタイルに「引き継がせる」ことができる機能です。 基本的な使い方 @extendは、指定し...

演算

演算とは？ 演算とは、数値やその他のデータに対して計算を行うことを指します。Sassでは、演算を使用して、数値や色を計算したり、動的に値を設定したりすることができます。これにより、スタイルシート内で柔軟に調整を加えることができ、効率的な...