こんにちはコバヤシです。
春ですね。さいきんは休日に晴れの日も多く、うららかな陽気に誘われ予定がなくてもついお外に出かけてしまいます。
線路沿いとか、下町とか、路地裏とか、商店街とかをのんびり散歩するのが好きです(*´｀*)
なんとこの間の休日お散歩した日の夜、スマホの万歩計を見たら7.7キロも歩いていました。(平日の運動不足を休日のお散歩で取り返しているかのような歩きぶりですね。)
山手線の円周の右上あたりのお散歩風景
そんな春。あちらこちらで「新」という文字が目につきます。新社会人・新入生・新生活に、新年度など、春は「新しいこと」だらけですね。
せっかくなので自分も、なにか新しいことを始めたいなと思い・・・
Sassの勉強に取り組み始めてみました。
そして今後、自分のリアルタイムの勉強進度に合わせて、ブログでSassのあれやこれやをお届けしたいと思います。
題して「目指せSassマスター」シリーズ〜〜。
今回は第一回なので、Sassの具体的な文法の話よりも、Sassの概念とコンパイルの方法について書かせていただきます。
そもそもSassってなに？ おいしいの？拡張子は .sass？.scss？
Sassはcssのメタ言語です。といってもわかりずらいですね。Sassはcssを記述するための言語、つまりレベルアップばんです。使いこなすことができればcssよりもできることがたくさんあり超便利です。
そしてSassは拡張子が.sassのものと.scssのものがあります。
さて、新規でSassを作るぞと思い第一に戸惑ったのがここ。
「Sassだから拡張子は.sassじゃないの？でもググると.scssばかり…なぜ？！！」
こんなことを思ったのは私だけではないのではないかと思います。
.sassと.scssざっっっっくりと違いをお伝えすると、.sassのほうが最初に作られたのですが少し難易度高めだった模様。それをわかりやすくしたのが.scssだそう。
現在はSassというとほとんど.scssのことを指すそうです。なので新規で作るときは.scssにします。
Sassを表示させる！コンパイルしましょう
さて、Sassはcssよりも便利そう！使いたい！と思えど、困ったことにブラウザはSassを読み込んでくれません！！！！
大好きなchromeも、嫌いじゃないFirefoxも…そうでもないIEもアイツもコイツもcssじゃないと読み込んでくれないんです。
cssはページをデコレーションしてくれる言語です。こいつを読み込まないということはページがどシンプルになるということ。白黒のメモ書きみたいなページになってしまいます。困ったものだよブラウザさん。
そこでSassをcssに変換しなくてはいけません。変換することをコンパイルと言います。
このコンパイルの方法はさまざまあります。しかも普段は使わないターミナルやコマンドプロンプトと言われる黒い画面を使わなくてはならない方法が多く、目下勉強中のコバヤシにもどの方法が一番簡単で更新に適しているのか、模索中でございます。ﾑｽﾞｶｼﾔ
そこで今回は一番手を付けやすいと感じたDreamWeaverのコンパイルをご紹介！
↓↓↓↓
DreamWeaverで新規のSassをコンパイルする方法
1.まずはファイルを作りましょう
サイト→新規サイトで今回の作業用のフォルダを定義します。(まだ空っぽにしてあります。)
このときDreamWeaverでは、
サイト設定→cssプリプロセッサ―→一般
でファイルの保存時に自動コンパイルを有効にするにチェックを入れてください。これを入れないとSassをたくさん書いて、保存してもcssに変換されず(私のように)頭を抱えることになります(੭ु´･ω･)੭ु⁾⁾
2.Sassを作りましょう
Sassといえど拡張子はscssで作りましょう！
scssの記法なのにsassファイルで書くとエラーになります。そして当然コンパイル結果もエラーになります。もちろんエラーを出して実証済みです|дﾟ)
そして、Sassファイルにまだ何も記述していないうちにさっさと保存をしてしまいましょう。
あらかた書いてから保存を押してエラーになった場合、記述に問題があったのか、１.サイトの定義に問題があったのかわからなくなってしまう恐れがあるので、一つずつ作業を行うことをおすすめします。
すると、正しく作業を進められている場合は、なんとこの段階で自動的にcssができています。
もちろんscssの中身が空なので、変換後のcssも空っぽ。でもコンパイルできそうな香りは漂ってきましたね( *´艸｀)ﾌﾌﾌ
3.Sassをゴリゴリ書いてみましょう
変数やネスト、mixin などなど…Sassの機能は書かなくては覚えられません。
といっているコバヤシもまだまだどう書いていいものかわからないことだらけですが、「書いて・遊んで・感動して・覚える！」という感じで、めちゃんこ楽しんでおります。
世のSassマスターの方々がしているスタイリッシュな記法を早く使いこなしたいものです。
3.Ctrl+Sで保存してみる！Macではcommand+S！
さて、こんな感じでザザーーーっと書いてみたので、レッツ保存！レッツコンパイルです！
すると・・・さっきまで、書いていたSassの内容がcssの中に無事反映されております！！！！
や、っ、た、ね(´;ω;)！！！！
黒い画面(コマンドプロンプト)でコンパイルを行う際はwatchを入力しなくては自動でデータを更新してくれないところ、DreamWeaverでは、1.のサイト設定の自動的にコンパイルにチェックを入れるだけで、適宜コンパイルしてくれるのです。偉い。
ちなみに……
今回はSassとcssをおなじ階層に書き出しましたが、コンパイル先のフォルダを選んで書き出すこともできます。書き出すときに圧縮して書き出すことや、Sassのインデントを守った書き出しを行うこともできます！
ちなみにちなみに、SassはSyntactically Awesome Style Sheets＝構文的に素晴らしいスタイルシートの略称だそうです。
構文的に素晴らしいスタイルシートですよ！(大事なことなので二回言う)
↑これを知った時にSass覚えたいって思いました。ネーミングに製作者の自信が漂っていてかっこよすぎます。
Sassの勉強にはインプレスさんのこちらの参考書を使っております。理解が難しい箇所は励ましながら説明をしてくれていて、これまたどハマりです。
Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語 | 平澤 隆, 森田 壮 |本 | 通販 | Amazon
Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語 | 平澤 隆, 森田 壮 |本 | 通販 | Amazon
