ポートフォリオサイト UZURA DESIGN-ROOM|長崎のWEBデザイナーウズラの作品集

次世代コーディング”SASS”|新・ウズラ日常記

ブログ”新・ウズラ日常記”

新・ウズラ日常記

  • 2014
  • 02/14
  • 投稿時間: 23:37
  • カテゴリー:WEB技術

次世代コーディング”SASS”

さてさてみなさん!Webコーディングは好きですか?
好きだという方、嫌いという方、得意という方、苦手という方それぞれだと思います。
難色を示している人の中には、”構造が複雑になっていくほど頭がパンク寸前になってしまう・・・”という感じなのでは?
そこで今回紹介するのは、次世代コーディングの方法として今注目されているコーディング手法”SASS”について!
なお、Windowsでの方法ですのでMACでのSASSの使い方は他サイトをご参照ください。

INDEX

SASSって何?

SASSとは、簡単に言うとCSSをもっと便利に・効率良く記述するためのものです。
CSS自体、非常に簡単ですが、簡単ゆえに複雑な設定を得意としません。しかし、SASSを使うとより高度な設定を効率的に組み込むことができます。
SASSには2つの記法がありSASSとSCSSという2つあります。
今回は人気があるSCSSを説明します。

1.Rubyをインストール

Sassを使う大前提としてはじめにRubyをインストールします。

こちらからRubyをダウンロードできます。
http://rubyinstaller.org

2.SASSをインストール

  1. コマンドプロンプトを起動
  2. 「gem install sass」と入力してEnter
  3. しばらくするとインストール完了!

※うまくいかない時はこちらのサイトを参照すると解決するかもしれません。
http://css-happylife.com/archives/2012/0110_0045.php

3.GUIソフト”Koala”をインストール

こちらより”Koala”をダウンロードしてインストールします。
http://koala-app.com
DreamweaverにSassを対応させる
Sassのデータは”.scss”という拡張子なのですが、初期状態のDWはscssファイルが何だかわかっていないので、一度頭に叩き込んで教えてやる必要があります。
そのために、以下のことを実行してみてください!

  1. Dreamweaverを起動
  2. メニュー → 編集 → 環境設定 → ファイルタイプ/エディターを開く
  3. 右側の項目「コードビューで開く」に拡張子”.scss”を追記
  4. Dreamweaverのインストールフォルダ内”\configuration\DocumentTypes”のMMDocumentTypes.xmlを開く(Dreamweaver以外で開くのが好ましい)
<documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false" mimetype="text/css" >

↓

<documenttype id="CSS" internaltype="Text" winfileextension="css,scss" macfileextension="css,scss" file="Default.css" writebyteordermark="false" mimetype="text/css" >
  1. Extensions.txtを以下の通り編集
HTM,HTML,SHTM,SHTML,HTA,HTC,XHTML,STM,SSI,JS,JSON,AS,ASC,ASR,XML,XSL,XSD,DTD,XSLT,RSS,RDF,LBI,DWT,ASP,ASA,ASPX,ASCX,ASMX,CONFIG,CS,CSS,CFM,CFML,CFC,TLD,TXT,PHP,PHP3,PHP4,PHP5,PHP-DIST,PHTML,JSP,WML,TPL,LASSO,JSF,VB,VBS,VTM,VTML,INC,SQL,JAVA,EDML,MASTER,INFO,INSTALL,THEME,CONFIG,MODULE,PROFILE,ENGINE,SVG:All Documents

↓

HTM,HTML,SHTM,SHTML,HTA,HTC,XHTML,STM,SSI,JS,JSON,AS,ASC,ASR,XML,XSL,XSD,DTD,XSLT,RSS,RDF,LBI,DWT,ASP,ASA,ASPX,ASCX,ASMX,CONFIG,CS,CSS,SCSS,CFM,CFML,CFC,TLD,TXT,PHP,PHP3,PHP4,PHP5,PHP-DIST,PHTML,JSP,WML,TPL,LASSO,JSF,VB,VBS,VTM,VTML,INC,SQL,JAVA,EDML,MASTER,INFO,INSTALL,THEME,CONFIG,MODULE,PROFILE,ENGINE,SVG:All Documents
CSS:Style Sheets

↓

CSS,SCSS:Style Sheets

SASSを実際に使ってみよう

以下のページを参照。
http://liginc.co.jp/web/html-css/css/56599#step6