Web関連

「Sass」で神速コーディング!? 概要編

0

ページのレイアウトに必須になっているCSS(Cascading Style Sheets、カスケーディング・スタイル・シート)。
その最新版である「CSS3」も、徐々に使われるようになり、より動きのあるサイトを作れるようになりました。

さまざまな表現ができるようになったCSSですが、コーディングとなると時間がかかったり、ちゃんと整理しながら記述しないと、レイアウト変更の際にどこを変更すればよいのか迷子になってしまいますよね。
そんな悩みを解決してくれるであろう「Sass」を今回は紹介したいと思います。

Sassって?

okamura_150831.jpg

いきなり「Sass」と言われてもわかりませんよね。ウィキペディアによると、
「Sass(サス、Syntactically Awesome Stylesheets)は、Hampton Catlinが設計しNathan Weizenbaumが開発したスタイルシート言語である。 」とあります。
要はCSSと同じスタイルシートの仲間です。

書き方が違う

SassとCSSの大きな違いは「構文(書くときのルール)」です。

CSSでは入れ子になるものを横に並べて書いていきますよね。その結果、同じid名・class名を何度も書くことになり、ちゃんと整理して書かないと、どこになにがあるのか分からず、迷子になる原因になります。
ところがSassでは、他のプログラミング言語でも見られるような「インデント(字下げ)構文」で書くことができます。
例えば、CSSだと

#link{
xxx: xxx;
}
#link ul{
yyy: yyy;
}
#link ul li{
zzz: zzz;
}
#link ul li a{
aaa: aaa;
}

と書きますよね。しかし、これでは何回も同じものを書くことになり、管理も大変だと思います。

一方、SASS構文(もうひとつのSassの書き方)では、

#link{
xxx: xxx;
ul{
yyy: yyy;
li{
zzz: zzz;
a{
aaa: aaa;
}
}
}
}

これでOKです。
何度も同じワードが出てこないSASS構文のほうが見やすく、また、文法もHTMLと通ずる部分があるので、メンテナンスもしやすいかなと思います。

変数が使える

もう一つ大きな違いがあります。それは「変数を使える」ことです。
変数というと、数学の授業を思い出して敬遠してしまいがちですが、初めに

$red: #db4437;

と、変数にカラーコードを入れておけば、あとは「$red」と書くだけで同じ色が使えるので、一括で変更したい場合なんかにすごい便利です。

まとめ

まだまだSassには様々な機能があります。が、すべて書くと長くなりすぎてしまうので、今回はこのあたりで。

CSSよりも管理しやすいSassですが、Rubyの導入などちょっと手順を踏まないと使えません。
これも、またいつかの機会にお話しできればとおもいます。

うまく導入することができれば、コーディングの時間が短縮されるでしょう。

0

システム開発で大事なテストプロセス改善のポイント前のページ

Webサイトに関する昨今のトレンドあれこれを集めてみた!次のページ

ピックアップ記事

  1. 新型コロナウイルスで日本の働き方改革が起こる
  2. AIに求められているものは、実は意外な物だった
  3. 新しい販売形態であるDtoCについて考えてみる
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. Web関連

    WEBサイトは両利き用?

    あなたは利き腕はどちらですか?今回はWEBサイトが利き腕を考慮…

  2. Web関連

    ポケモンGo!田舎でやってみた!

    何かと話題のポケモンGoですが、正直私はポケモン世代でもなければ、興味…

  3. Web関連

    デバイスでもっと快適にイラストライフを目指す!!

    皆さま、デジタルイラストを描く際にどのソフトを使っていますか?イラ…

  4. Web関連

    もう火傷なんてしない!ヘアアイロンを上手に使ってきれいになる裏技!

    女性の皆さんはヘアスタイルを楽しむときヘアアイロン(コテ)を使って髪を…

  5. Web関連

    【デザイナー必見!】日本語Webフォントをダウンロードできるサイトまとめ

    皆さんはデザインにおいてフォントがどれぐらい重要か意識したことあります…

  6. Web関連

    WEB制作時のFTPトラフィックについて

    こんにちはサーバーエンジニアの橋本です。先日自宅で使っているノ…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    WEBサーバーの設定に便利な.htaccessの使い方
  2. Web関連

    ウェアラブルで健康管理
  3. AI関連

    【人工知能(AI)×店舗】未来世界の無人のお店も現実に!店舗運営を一新するAIサ…
  4. SEO関連

    SEO・LPO・EFO対策をしたい!
  5. AI関連

    AIは仕事泥棒じゃない!最強のパートナーだ!
PAGE TOP