HTML/CSS

【Sass】の書き方をアップデートすべくbulmaフレームワークを読み解いてみる【初心者向け】

ホームページなりWebサービスを作ろうと思ったらもれなく

『HTML』と『CSS』が必要になりますが、

実は多くのプログラマーが苦手意識を持ってたりするのが『CSS』。

アオキ
なんせ、書くのがめんどくさい。

一行一行書いていかなきゃなのでとてもめんどくさいし、

一箇所変えると他のあらぬところまで影響しちゃったりしてややこしい。

よく使うクラスや書き方を用意しておいてどうにかやりくりしてきたものの、

それでもやっぱりめんどうくさい。

さらには変数もif文も計算もできないということで、

プログラマー
『CSS』はプログラム言語じゃないっしょ。

なんて言われたりします。

そんな世論を知ってか知らずか、

プログラミングっぽい書き方ができる『CSS』が誕生することになりました。

その名も『Sass(サス)』

– Sass・・Syntactically Awesome Style Sheets (構文的に素晴らしいスタイルシート)

機能的には、

  • for分やif文が使える
  • 変数が使える
  • 計算ができる
  • 関数が使える
  • 関数を作れる
  • モジュール化(部品化)できる

などなど。

具体的に『Ssss(サス)』を使ってどれくらいメリットがあるかというと、

最近流行りのCSSフレームワーク『bulma(ブルマ)』を例にとると、

同じ内容を書くために、

  • CSS・・約15,000行
  • Sass・・約5,000行
    (当社調べ)

と、約3倍の行数の差があることがわかりました。

アオキ
3分の1で同じことが書けるのね・・なかなかやるやんけ・・

もちろん『bulma』のなかで、

  • for分やif文が使える
  • 変数が使える
  • 計算ができる
  • 関数が使える
  • 関数を作れる
  • モジュール化(部品化)できる

といった機能ももりもり使われています。

しっかり『Sass(サス)』の使い方、書き方を覚えてCSSをアップデートすべく、

ちょっとだけですが『bulma(ブルマ)』のソースコードを読み解いてみることにしました。

『Sass(サス)』には大きく2つの書き方があります。
 
– Sass・・Rubyっぽい書き方。
– Scss・・CSSっぽい書き方。
 
業界的には『Scss』の方が主流らしいのですが、
『Sass』の方がよりプログラミングっぽく書けるので愛好者も多く、
今回お題のbulmaは『Sass』なのでこちらで解説してみます。

Sponsored link

Sass の書き方 bulma のコードとファイル構成

まずはおもむろに『bulma』のサイトにとんでファイル群をダウンロード。

bulma公式サイト

執筆時点のバージョンは0.7.4

ダウンロードしたファイルを解凍してみると、こんなフォルダ構成。


cssフォルダとsassフォルダがあって、

普通に使う分には、cssフォルダの中の、bulma.min.cssを読み込ませればOKなんですが、

今回のお題は『Sass』の読み解きなので、『Sass』フォルダの中身を見ることに。

すると、

  • baseフォルダ
  • componentsフォルダ
  • elementフォルダ
  • gridフォルダ
  • layoutフォルダ
  • utilitiesフォルダ

と6つのフォルダがあり、同じ階層に『bulma.sass』ファイルもあります。

『bulma.sass』ファイルの中身はこう。

@import という構文の後に、それぞれのフォルダ + _all という記載があります。

『Sass』の機能の中で、

  • モジュール化(部品化)できる

という機能があり、@import の後にファイル名をつけることで、

ファイルをそれぞれ分けてつくっているんですね。

試しに utilitiesフォルダの中の、『_all.sass』ファイルを見て見るとこんな中身。

さらに@import と書いて、それぞれのファイルを読み込んでいます。

図にしたらこんな感じ。

  1. bulma.sassが読み込まれて、
  2. 最初のsass/utilities/_all が読み込まれて、
  3. sass/utilities/_all の中のsassファイルが上から順番に読み込まれると。
アオキ
なんでこんなにファイル分ける必要あるんだろ・・

っと最初は思っちゃうんですが、

よくよく読んで慣れていくにつれ、

アオキ
これ相当考えてつくられてるなぁ、すごい。

って思える様になるかなと思います。

Sponsored link

Sass の書き方 Bulmaの変数初期化ファイルを読む

『bulma.sass』を見ると、最初に utilitiesフォルダを読み込んでいることがわかります。

utilities/_all.sass ファイルの中身を見ると、

  • initial-variable.sass
  • functions.sass
  • derived-variables.sass
  • animations.sass
  • mixins.sass
  • controls.sass

と6つのファイルに分かれています。

まずは一番上の『initial-variable.sass』を見てみます。

『initial-variable』は文字通り、変数の初期化、を設定しているようです。

最初に目につくのが色の指定。

$マークの後に名前をつけることで変数として使えて、

色の指定をRGBではなく、HSLという指定の方法で設定されています。

HSL (色相・彩度・明るさ)の3つの値で色を指定できる書き方

フォントの指定もあれば、フォントのサイズ指定もされています。

『rem(レム)』と書くことで、スマホでもPCでも、ベースのサイズを基準に書けるのでバランス調整しやすいメリットがあります。

レスポンシブ対応ということで、こんな記載もありました。

全部変数で定義しているので、$tablet と書けば 769px ということになります。

CSSではいろんな場所に毎回 769pxと手書きで書いていたので、

変数にするだけでもだいぶ楽になります。

ちなみに!default と書くと デフォルト値が設定されます。

Sponsored link

Sass の書き方 Bulmaの関数指定ファイルを読む

次は utilities/functions.sassファイルを抜粋。

アオキ
見るからに『CSS』じゃない・・

これでもかと言わんばかりに変数+関数+if文もりもりですが、
一つづつさくっと読み解いてみます。

まずは @function

@funciton と書くことで、自作の関数を作ることができます。

utilities/functions.sassファイルの中には、

と4つの自作関数があるようです。
(名前の付け方も英語でわかりやすい様に工夫されています)

『Sass(サス)』ではif文などのプログラミングらしい文法も使えるので、

  • @if 、@elseif, @else ・・文字通りif文
  • @for, @each ・・繰り返し
  • @return 関数の戻り値を返す

といった文法がたっぷりつかわれています。

また、『Sass』が始めから持っている関数もあって、

  • type-of・・データタイプを判別
  • length・・配列の長さ(値の数)を返す
  • nth・・指定した順番の要素を取り出す

といった関数が使われています。

アオキ
自分で関数作れるなんて、、昔のCSSじゃ考えられなかったぜぃ・・

参考記事

知らないと損するSassの組み込み関数徹底解剖

Sponsored link

Sass の書き方 Bulmaの関数指定ファイルを読む

続いては、utilities/derived-variables.sass。

アオキ
derivedってなんだろか・・?

と思って調べてみると、『派生』という意味らしく。

variablesは変数なので、『変数を派生』という意味になるのかなと。

実際にファイルを見ると確かに、
変数を変数で再定義しているような書き方になっています。

例えば

という箇所の場合、

最初に読み込まれる『initial-variable.sass』ファイルで、

と指定されているので、

という意味になります。

アオキ
なぜにわざわざこんなことをしているんだろう・・

と思っちゃうのですが、

単に 緑色 とするだけでは、

緑色がどんな意味を持っているのかがわからないんですよね。

一色ならいいけれど、

例えば 青と緑と黄色と赤で、色の使い分けどうする?

ってなった時に、

それぞれの色に意味を持たせることで、統一感がでてくるのかなと。

と意味を決めることで、

仮に緑の色合いをちょっと変えたいとなった時も、

『initial-variable.sass』ファイルをちょっと変えるだけで、

緑を使っている箇所がまるっと全て変更されるのでとっても便利。

アオキ
CSSの頃は20箇所くらい地道に編集してましたもんね・・変え残しもたっぷり・・

他にもサイズに意味をつけたり、

フォントにも意味をつけたり、

自作関数で色を反転させつつ変数にいれて、
さらに変数に意味つけしたり。

アオキ
『Sass』ってここまで凝るものなのね・・すごい・・

と思わず見入ってしまったのでした。

また、

という書き方もあり、これは別ファイルで @forや@eachで回すためのようです。

他にも勉強になる箇所たくさんあるのですが、

アオキ
ちょっと疲れたので次で最後・・

Sass の書き方 Bulmaのボタンってどうなってるのさ?

みんな大好きボタン。

BulmaのSassファイル群の中では、

elementsフォルダの中に、button.sassというファイルが入っています。

その中身はというとこんな感じ。

一見なんじゃこりゃなんですが、

これまで見てきた様に、他のファイルで変数が定義されています。

  • utilities/initial-variables.sass (変数の初期化ファイル)
  • utilities/derived-variables.sass (変数の派生)

など。

buttun クラスにはたくさんの設定があるので抜粋しますが、

@extend でスタイルの継承したり、
他ファイルで定義した変数を使ってスタイルをあてたりしています。

Sass の書き方 BulmaのSassファイルを読んでみて

Bulmaは近年人気なCSSフレームワークなだけあって、

とても洗練された書き方をされているなぁという印象を受けました。

今回の記事では紹介できなかったものの、

他にもたくさん『Sass』の良さげな書き方が満載なので、

『CSS』にめいっぱい時間をとられているならぜひ読んでみてもらえればと思います。

アオキ
爆速コーディングできるようにもりもり読んで吸収していこー

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


Sponsored link

関連記事

  1. HTML/CSS

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】

    先日とあるコミュニティで質問があがりまして。教えたがり性分の身…

  2. HTML/CSS

    TCDテンプレート『MAG』の見出し(h1,h2)の設定は変更しよう〜SEO重視するなら変更必須〜

    TCDといえばホームページ業者やブロガーならほとんど知っているんじゃ…

  3. HTML/CSS

    ホームページを作成して売上をあげるために知っておきたい事

    今回の記事ではこんな悩みにお答えします。ホームページって稼…

  4. HTML/CSS

    【初心者向け】パソコンでホームページをつくる5つの方法とサーバー4種類をまとめてみました

    子供向け無料プログラミング寺子屋『CoderDojo熊本』第1回のアン…

  5. HTML/CSS

    楽天トラベルのカスタマイズページをできるだけ簡単に手早くつくる方法をまとめてみた

    楽天トラベルのカスタマイズページを作ってみたいと思ってはいるんだけど、…

  6. HTML/CSS

    レスポンシブサイトの作り方をめっちゃわかりやすく書いてみた【Bootstrap4】【初心者向け】

    そもそも『レスポンシブサイト』って何?『レスポンシブサ…

Sponsored link

最近の記事

アーカイブ

Sponsored link
  1. アルデュイーノ Arduino

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
  2. HTML/CSS

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
  3. Laravel

    【Laravel5.5】Webアプリケーションを作るためのゆるめの環境構築編【N…
  4. PHP

    【PHP】配列や連想配列が覚えづらかったので学校に例えてみた【初心者向け】
  5. MySQL

    【mysql】SQL文のつくり方のコツ〜ちょっとずつ組み立てる〜【初心者向け】
PAGE TOP