GeoDesign話題のCSSのSassとは?使ったら構築スピード激的アップ!ツイートシェアGoogle+はてブPocket1〜2年前から話題のSassなるものを簡単に使用できるように、解説しようと思います。言っても、今回はじめて触ったので、使えるようになるまでに起こったエラーや改善方法も合せて記載していきます。まとめSassとは何ぞ?Sassとはホームページを作成(構築)する際のコーディングの「スピードが格段と上がる」だとか、「大手会社も使用している」とかよく聞きます。前から気になっていたので、重い腰を上げて使ってみました。インストールSassをインストールするには、Rudyを使用する為、アプリケーションを普通にインストールするのとは訳が違います。sass」と入力してEnter3.インストール完了するまで5分程待ちます。sass」と入力してreturn3.ユーザーのパスワードを入力してreturn4.インストール完了するまで5分程待ちます。→完了!2.GUIソフトの「Koala」をダウンロード&インストールGUIソフトの「Koala」をインストールします。ソフトを通さないといけないのか。テキストエディタだけでも構築できるじゃないか!と思いますが、Sassで書いたものはcssとしてブラウザが読めないので「コンパイル(変換)」する必要があります。そのために、簡単にコンパイルできるGUIソフトのインストールをする必要があるのですね。このサイトから「Download」ボタンをクリックしダウンロードします。ダウンロードが完了したら、任意の場所に本体を保存しましょう。起動したら、左上にある「歯車アイコン」をクリックして、General→Language:日本語に設定します。ソフトを再起動しないと日本語が適用されないので、再起動しましょう。Mode」にもチェックを入れます。4.実際にSassを使用してみる準備が整ったのでSassを使ってみます。テストとして下記の手順で行います。1.デスクトップに「TEST」というフォルダを作ります2.その中にtest.scssというファイルを作ります。内容は下記の様に書いてみましょう。test.sassという感じで表示されます。5.実際にコンパイルしてみましょう。チェックを付けたら、コンパイルボタンを押しましょう。エラーが!!!なんと、エラーが出てしまいました!もしかしたら、Windowsだとエラーが出ない?のかもしれません。MacでのテストなのでWindowsは試していません。^^;ディレクトリの定義(設定)調べてみると、どうやら、コンパイルしたcssを保存する場所・sassを読み込む場所などを前もって定義する必要があるとのことです。Compass」をクリックします。下記の様にテキストエディタが立ち上がるので、赤枠部分の「http_pathとsass_dir」を空に書き換えて保存します。今度こそ、コンパイル!「Success」と出ていればコンパイル成功です!この時点で、デスクトップに作成したTESTディレクトを見ると、新しく「config.rb」と「stylesheets」というディレクトリが新しく作成されているのが分かります。「stylesheets」の中にある、test.cssを開いてみましょう。sassで記述したものをコンパイルしたものになります。入れ子で作ったh1が、cssの構造としてきっちり生成されていますね。使い方としては、例の様な入れ子状態のものであったり、変数を用意して、その値をどこでも使用することが出来ます。...$red:#990000;.box{color:$red;}の様に、定義しておけば、下記の様に生成されます。#990000;}あとは、出力方法も4つの方法を選べます。コンパイルボタンの上にある「アウトプットスタイル」を選択することで下記の様にそれぞれの形で出力されます。まとめいかがでしたか?これで、cssに限らずhtmlやjavascriptなど、ホームページの制作スピードがいっきに上がると思います!最後に紹介したコンパイルスタイルは、使いやすいものを使ってくださいね。大手のメディアサイトになると読み込みスピードを考慮して「compressed」を使うところが多いようです。「レイアウト調整はfloatじゃなくてこれからはCSS3のFlexboxを使って時短化!」も良く読まれています。jQuery・csscsshtmlsassホームページ制作ホームページ構築この記事が気に入ったらいいねしよう!最新記事をお届けします。ツイートシェアはてブGoogle+Pocketfeedlyホームページの問題点を簡易的にチェックバレンタインを活用した販促に!11厳選RECOMMENDこちらの記事も人気です。2014.12.1自社サーバーに負担をかけないgoogleからのjQueryファイルの読み込みABOUTこの記事をかいた人GeoDesignホームページは、情報収集が得意なメディアです。集めたデータを活用することで、ホームページの改善だけではなく、リアルマーケティングや、新商品開発に発展するまでにできるのです。成果の見えるホームページを運用したい。デジタルマーケッターになれる広報担当者を育成したい。自社メディアでブランド力の強化と、顧客創造を図りたい。こんな欲求をかかえるあなた。したらウェブサイトから成果が上がるのかわからない簡単に運用できるシステム、時間ロス・コストロスを減らしたいこんな悩みをかかえるあなた。二等辺三角形を書く方法色々。写真をコミック風(漫画)イラストに加工したい!さらに+αも。