【HTML】Sass・SCSSを使ってWEBサイトの制作を効率化する

CSSコーディング

現在の多くのWEBサイトではHTMLとCSSによって構築されています。WEBサイトの制作方法を勉強するとHTMLとCSSについてを学ぶと、ここ最近は、SassやSCSSといったキーワードが出てきます。SassやSCSSを活用しなくても、もちろんWEBサイトを制作することができますが、Sass・SCSSを使うことでWEBサイトの制作を効率化することができます。今回は、Sass・SCSSとは何か?を簡単にご紹介します。

Sassとは?

Sass(サース、サス:Syntactically Awesome Stylesheets)は、CSSを効率よくまとめ、開発効率を良くしようと開発されたスクリプト言語の一つです。拡張子は.sassという形で管理ができます。

WEBサイトを構築するとCSSは、何千行ものコードによって記述されることがあります。規模の大きなWEBサイトになるとさらに膨大なコードの記述になり、開発時間がかかったり、記述ミスや、見落としが出ているリスクが高まります。

そこでSassでは、記述するコードの簡略化、CSSだけでは記述できなかった変数の利用、プログラミングなどで使われるループ、引数、複数のファイルを統合するといった管理方法で効率化しています。

SCSSとは?

SCSSは、Sassで構文をよりCSSの構文に近づけたブロックの書式を用いたものです。拡張子は.scssという形で管理ができます。

Sass・SCSSをWEBサイトに組み込む方法

Sass・SCSSをWEBサイトへ組み込む場合、そのままではCSSとして認識できないためCSSに変換するか、変換するためのスクリプトと一緒に読み込み利用することができます。Sass・SCSSを変換する(コンパイル)の方法としては、コマンドや専用のソフトを使う方法があります。

WEBのコーディングで使われるAdobeのDreamweaverでもSass・SCSSを変換(コンパイル)してCSSにすることができます。

関連記事

【WP】WEBカタログのようなギャラリーを作成することができる『Page Flip Image Gallery』

説明書やページ数のあるカタログをサイトに公開するとき、ページをペラペラとめくることができるWEBカタログの形式で公開したいときがあります。 しかしWEBカタログはページをめくるアニメーションやボタン操作などFlashやJavascriptなどを用いた開発が必要となるので...続きを読む

2015.02.19WordPress

ぴんきぃまこ様WEBサイト制作

藤枝市青葉町にあるドックトリミングサロン「ぴんきぃまこ」様のWEBサイトを制作いたしました。ロゴに合わせてピンク色のベースに、大人っぽい可愛らしさを演出できるようにデザインをしました。お店からの最新情報をお届けできるように、CMSで構築し、お知らせやおすすめ商品、スタッフ...続きを読む

2018.06.01WEBサイト制作

MakeShop(メイクショップ)の販売代理店となりました

デザインスタジオ・エフではこのたび、GMOグループのMakeShop(メイクショップ)の販売代理店となりました。 月額無料から利用できるショッピングカート。MakeShopは、ネットショップの開店から運用までの一連の作業を効率化し、ネットショップオーナーをサポートします。 ...続きを読む

2015.03.24

【WP】プラグイン『Photospace』の利用方法

以前に紹介をした『Photospace』は、jQueryのサムネイル付のスライドショーギャラリーを実装できる「Galleriffic」を、WordPressの標準ギャラリーのショートコードに対応させることができるプラグインです。インストールと標準設定をご紹介しましたが、今回は...続きを読む

2015.06.29WordPress

HTML5 + CSS3 レスポンシブサイト テンプレート『Minimaxing』

スマートフォンが普及して、WEBサイトをスマートフォンで閲覧することも多くなっています。従来のWEBサイトをスマートフォンに対応したいと検討される方もいらっしゃると思います。 今回、ご紹介するのはパソコン、タブレット、スマートフォンに対応したレスポンシブ型のWEBサイト...続きを読む

2015.02.06HTMLコーディング