Sassを「基礎」から順番に学ぶ

Sassを使ってみたいけど、難しいイメージがある人や、SASSの環境構築が大変そうでついつい敬遠してしまう人に向けて、SASSをわかりやすく丁寧に解説しよう！

step1Sassって何？どういうメリットがあるの？

最初はSassの初心者で、まだちゃんと使った事が無い人への記事から紹介しよう。

Sassとはどういうものか？Sassを使うとどういうメリットがあって、どんな機能があるのか、Sassを使う前にSassの事を知りたい人はこちらの記事を読んでみよう！

step2Sassを導入する方法、最初の環境構築に関する記事

ある程度Sassとはどういうものか分かってきたら、今度は実際に使ってみよう。

インストールするだけで簡単！「Prepros」でSassを始めよう！

Sassを実際に使うには環境構築が必要だ。まずは一番簡単にSassを始める方法として、GUIコンパイラという種類のソフトをインストールするのが、お手軽でいいだろう。

ターミナル（コマンド）などの黒い画面も一切不要！

GUIコンパイラの中で、シンプル簡単で使いやすく一番人気のある「Prepros」というソフトの使い方や、インストール方法を画像付きで解説した記事がこちら。

流行りのGulpを使ってSassを使ってみたい！

Sassをもっと本格的に使いたい！最近流行りのGulpを使ったSassの環境構築をやってみたいという人は、ゆっくり読んで順番にやれば、Sass環境を作るのは意外と簡単！

こちらの記事でGulpの環境構築の方法を丁寧に解説しているので、参考にしてみよう！

step3Sassの基本を学びたい！

Sassのネスト機能で使える「&：アンパサンド（アンド）」

Sassでは最も基本の機能として「ネスト機能」があるが、このネスト機能をさらに便利に使いこなせるようになるアイテムとして、「&：アンパサンド（アンド）」がある。

基本的には「親セレクタを参照」できる機能なのだが、詳しい使い方を知りたい方は、こちらの記事を参考にしてみよう。

Sassの変数について

Sassの大きな特徴のひとつとして「変数」が使える点が挙げられるだろう。「変数」を使えば、メンテナンスや作業がとても楽になる！

Sassの「変数」について学びたい人はこちらの記事で勉強してみよう！

Sassの@mixin（ミックスイン）の使い方が知りたい！

Sassの真骨頂とも言える、超便利な機能として「@mixin（ミックスイン）」という機能がある。

簡単に言うとCSSのスタイルを定義しておいて、別の場所でもそのスタイルを使い回せるという機能だ。さらにカスタマイズする為に「引数」も使える「@mixin（ミックスイン）」はSassを使いこなしたい人には不可欠な機能！

「@mixin（ミックスイン）」の使い方を丁寧に解説した、こちらの記事を参考に勉強してみよう！

「@mixinと@extendの違い」が知りたい

また、「@mixin（ミックスイン）」ととても似た機能で「@extend（イクステンド）」という機能がある。

Sassの初心者の方は、このふたつの違いがよくわからないという人が多いので、この違いを解説した記事がこちらだ。

Sassで条件分岐の@ifの使い方

Sassでは@ifを使った条件分岐を使う事ができる。Sassで条件分岐って、どのような時に使うのだろうか？

Sassの条件分岐の使い方とその用途については、こちらの記事を参考にしてみよう！

Sassで使えるループ処理@for、＠while，@eachの使い方

Sassではループ処理（繰り返し）を使う事ができる。Sassで使えるループ処理についてはこちらの記事を参考にしてみよう！

Sass関連の記事一覧