SCSS 超基本の書き方

SCSSWEB業界用語

SCSSとは?
CSSをより効率的に書ける言語のこと
具体的に言うと「変数や関数を使うことによって、驚くくらいに早くスタイルシートを作ることができるもの」です!

私は未経験からWEB制作会社に入社したのですが、
現在(2019年時点で)現場では、SCSSで書きコンパイルして
CSSをサーバーにアップするのが当たり前でした。当初は本当にびっくりしました。

なので、今回はSCSSを知らない方向けに、初めの第1歩編をまとめさせていただきました。

第一歩を踏み出しやす様、基礎中の基礎をまずはまとめて見ました!

スポンサーリンク

SCSSのメリット

  • 記述が少ない
  • コードが見やすい
  • 覚えることができれば修正が早い

SCSS超基本の書き方!「ネスト(入れ子)」

実際にどの様に書かれているのか?
まずは超基本のネストの書き方についてです。

見て頂くのが一番早いと思いますのでCSSで書いた時とSCSSで書きた時を並べて見ました。

違いはわかりますでしょうか?

CSSの記述

.container{
  padding: 20px;
}
.container .item{
  margin-left: 30px;
}
.container .item .box{
  color: red;
}

SCSSの記述

.container{
  padding: 20px;
  .item{
    margin-left: 30px;
    .box{
      color: red;
    }
  }
}

この様にSCSSは、子孫セレクタを指定してスタイルを定義する場合は、
親セレクタの括弧の中に子セレクタを設置することによって記述することができます。

もっと簡単にいうと、入れ子になっている為、記述する文字数が減っています!
あるclassを指定するために.containern .item .boxと毎回記述しなくて良いのです!

この書き方をネスト(入れ子)と言います。

SCSSを使うための環境準備

さて、SCSSを実際に使って見たいと思っていただけたでしょうか?

しかし、、、SCSSを使うためには、1つだけやらなければならないことがあります。
そう環境を整えなければ使うことが出来ないのです。

私は、koalaというアプリケーションを使用させていただいてます。

インストールの仕方がわかりやすかったサイトをいくつか載せさせていただきます。
(いつかまとめたい。。。)

Macユーザーは、koalaのダウンロードのみでOKです!

Windowsユーザーは、Rubyをインストールする必要があります。

Macユーザー向け

Koalaを使ってSassを使用する方法
コマンドがわからない、ターミナルを使いたくないという人でも、Sassを使用できる方法に、Koalaという直感的に操作ができるアプリケーションソフトがあります。今…

Windowsユーザー向け

Sassの導入方法から使い方まで、初心者にも分かるように解説 | マコブログ
本記事では、Sassの導入方法と使い方について解説しています。初心者向けに解説しているので難しい言葉は排除しています、「他記事を読んでもよく分からずSassを諦めた」なんて方にオススメです。【Sassを使えば世界が変わる、ワンランク上のコーディングへ】

なお、Koalaは日本語化しておくととても使いやすいです。

まだまだある他機能!

今回はSCSSを知らない方向けに、初めの第1歩編をまとめさせていただきました。

他にもまだまだ機能がありますので、初心者にもわかりやすく
まとめて行ければと考えています。

変数・演算・Sassの @import・
スタイルの継承ができる@extend・
条件分岐・スタイルの定義が可能なミックスイン(@mixin)

私は下記の書籍を参考に日々学ばせていただいてます。
http://book.scss.jp/about/

Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ [ 平澤隆 ]

価格:2,640円
(2019/11/5 23:19時点)
感想(0件)

現場での作業では、
よく理解されている方の記述と初心者の書き方ではかなり差があります。。。
本当に。。

勉強頑張りましょう!

この記事を書いた人
ひよひな

ひよひなと申します。
未経験からWebデザイナーへ転職。
日々の学びをまとめています。どうぞよろしくお願いいたします。

ひよひなをフォローする
WEB業界用語
スポンサーリンク
ひよひなをフォローする
ひよひなのブログ

コメント

タイトルとURLをコピーしました