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

関連記事

  1. Web関連

    どうしても目に留まっちゃうアメコミ風企業サイトまとめ!

    より読みやすく、よりシンプルに...昨今のWebデザインはそういった傾…

  2. SNS関連

    次にくるのはこれだ!巷で噂のSNS

    2014年はSNSの勢いは留まるどころか益々勢いを増した1年でしたね~…

  3. Web関連

    繋がりは無限大!マルチデバイスの進歩

    今や通信機器はパソコンやタブレット、スマートフォンだけに留まらず、あら…

  4. Web関連

    動画配信サービスhuluってどんなもの?

    最近流行り(?)のhulu。テレビと共同で作品を作ったり、限定映画を配…

  5. Web関連

    コンテンツ内容がわかるいいバナー広告を選んでみた

    最近、バナーの制作依頼が多く、Yahooのバナーに関する規約も変わりま…

  6. AI関連

    【人工知能・AI×Webサイト運営】誰だか分からないユーザー情報を集めて、サイト運用のPDCAを回そ…

    多くの企業がWebサイトを運営する理由は、Webからのお問い合わせや売…

自治体向けDX推進サービス

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    「レスポンシブEメールデザイン」で見込み顧客を一気に獲得!
  2. AI関連

    今さら聞けないAR、VR、MR
  3. Web関連

    3DギャラリーFlash
  4. AIさくらさん

    デジタル接客+AIで非接触を推進する
  5. Web関連

    なるほどね!タスク管理と時間管理は深い関係性をもっていた!
PAGE TOP