blog
ブログ

【Sassとはなんぞや】初心者がSass/SCSSを使いこなすまで
CSSからSassへ

はじめまして。デザイナー兼コーダーのかねまるです。
みなさんはコーディングをする際どんな記法でCSSを書きますか?
私は普段CSSをそのまま書いているのですが、今回CSSの拡張言語ことSassに挑戦してみました。

 

というのもきっかけはTwitterでこのようなアンケートを見かけたこと

 

結果は

・SASS 9.4%
・SCSS 71.8%
・他のプリプロセッサを使う 2.3%
・CSSは生で書く! 16.4%

となりました

え?自分って2割にも満たない側の人間だったの?

弊社では基本的に生のcssでコーディングする人が多いためそんなに気にしていなかったのですが、
世の中ではSassで書くのが主流になりつつあるという・・・
そんな現実を目の当たりにし、流石の私もSassを勉強しなきゃやばいなと焦り始めました。


こうなったらそのSassとやらを使ってみようじゃないの!Let's Sass!

■はじめに

 

Sassってよくわからないな〜

 

「説明しよう!Sass(サス)とはCSS(シーエスエス)の拡張言語で変数や関数が使える記述法なんじゃ!」

 

誰?

 

「Sassが大好きサス博士じゃ。Sassのことならなんでも聞いてくれ。」

 

なるほど!Sassについてもっと詳しく教えてよ!

 


「いいじゃろう!Sassは今CSS記述法の主流になるほど便利なもので、上で言ったことに加え、変数や関数、四則演算、セレクタ指定の入れ子の使用、ミックスイン(複数のCSSのまとまりの再利用)など、CSSにはない機能を利用することができるぞ!」

 

「もっというとSassコンパイラでCSSファイルに変換することでWebブラウザの仕様に適応することができるんじゃ。初期のSassはCSSとは違った語彙や文法のSass記法と呼ばれる独自の記法を採用していたんじゃが、バージョン3.0からはCSSの拡張言語であるSCSS記法が新たに導入されたんじゃ。また、プログラミング言語部分はSassScriptとも呼ばれ算術演算や変数、及びその他の様々な追加機能を利用できるようにしているんじゃ。さらに・・・

もっというとSassコンパイラでCSSファイルに変換することでWebブラウザの仕様に適応することができるんじゃ。初期のSassはCSSとは違った語彙や文法のSass記法と呼ばれる独自の記法を採用していたんじゃが、バージョン3.0からはCSSの拡張言語であるSCSS記法が新たに導入されたんじゃ。また、プログラミング言語部分はSassScriptとも呼ばれ算術演算や変数、及びその他の様々な追加機能を利用できるようにしているんじゃ。さらに・・・

もっというとSassコンパイラでCSSファイルに変換することでWebブラウザの仕様に適応することができるんじゃ。初期のSassはCSSとは違った語彙や文法のSass記法と呼ばれる独自の記法を採用していたんじゃが、バージョン3.0からはCSSの拡張言語であるSCSS記法が新たに導入されたんじゃ。また、プログラミング言語部分はSassScriptとも呼ばれ算術演算や変数、及びその他の様々な追加機能を利用できるようにしているんじゃ。さらに・・・

 

 

 

 

 

早くも挫折しそうです。私のような数学嫌いのコーダー初心者にこんなのわかるわけがない。

 

「最初のうちはそんなに難しく考えなくて大丈夫じゃ!予備知識を全て入れようとするとパンクしてしまうからね。」

「さぁ!次に行ってみよう!」

 

■そもそもSassって名前がわかりにくい!

 

Sassのわかりにくいポイントでまず挙げられるのはその名前

図で表すとこういうこと

Sassがふたつあるやんけ!!

実はSass(サス)には二種類の記法があってひとつはSASS(エスエーエスエス)記法、もうひとつはSCSS(エスシーエスエス)記法があるのじゃ

今回学ぶのはSass(サス)のSCSS(エスシーエスエス)記法です。

「教材とか記事でSassでまとめられがちなんじゃが内容を見るとSCSS記法である場合が多いんじゃ」

 

ややこしいね・・・

 

※ちなみにSass(サス)とはSyntactically Awesome StyleSheetの略で、直訳すると「構文的に素晴らしいスタイルシート」となる

 

■けっきょく何が便利なの?

・フォトショップ、イラストレーターでいうところのパレット、XDでいうところのアセット機能やコンポーネントが使える

「つまりこれが変数やMixin(ミックスイン)と呼ばれる部分なんじゃ」

(変数Mixinについては次の記事で説明します)

はえ〜 すげーや

さらに

■ここが便利だSass!

・ベンダープレフィックスが自動でつく

ベンダープレフィックス・・・各ブラウザに示すために使われる識別子

・全部style.cssにまとまって気持ちがいい

・メディアクエリ設定しやすい

Sassってすげぇ!

 

■ここがダメだぜSass

・変数とかコンパイルとかCSSでは聞き慣れない言葉がたくさん出てきてややこしい

・使い始めるのに準備がいる(心の準備も)

「Sass始めようとしている人が遠ざけちゃう理由はここだね」

 

ですが、


CSSが使えれば100%Sass使えます!

 

CSS +便利機能
これがSass(SCSS)

 

「最初は無理に変数やコンパイルを使わずSassを使ってCSSの記述をして慣れてくのがSassへの一歩じゃ!」

 

すごいやサス博士!

ぼくSassを始めたくなったよ!

 

次回!Sass(SCSS)導入編 ––––––––––––––––––––

 

 

参考文献
IT用語辞典 e-Words Sass
enja-oss Sass -SassScript 日本語訳-

自社のサービスや商品をより売り上げアップさせたい方へネット集客を学ぶ無料メルマガ配信中自社のサービスや商品をより売り上げアップさせたい方へネット集客を学ぶ無料メルマガ配信中

facebookでも情報を発信しています

facebookをフォロー

過去のブログ

ブログ一覧に戻る