2019年10月10日SHAREツイートシェアはてブLINEPocketウェブ制作に携わっている方は、ほとんどの方がご存じだと思います。ウェブ制作に携わらない方は使わないので知る必要ないか。いう事は、知る必要がある人はみんな知ってるSass。感ハンパないですが、そのSassについて。僕は、ウェブ制作が仕事ですが、今までCSSは、サクラエディタで書いてました・・・Dreamweaverを使う事もありましたが、客先等で編集をする事が多く、ツールを入れさせてもらえなかったりする事が多かったので効率化は若干諦めていました。最近は1箇所で制作する事が多くなってきたので、よし、この機会に効率化に力を入れてみようか!という事で、Sassを導入。素晴らしいんだ!作業時間、半分は減ってます、ホントに。今まで何してたんだろう・・・という事で、みなさん知っているかもですが、僕のように知ってても着手しなかった人、ウェブ制作を始める人達に向け、Sassって何?便利なの?っていうお話です。導入に手間がかかる管理するファイルが増えるSassってなぁに??簡単に言うとCSSを生成するためのメタ言語というもので、CSSを効率よく書けて色々とラクできるモノです。「サス」って呼びます。拡張子は「.sass」、「.scss」の2種類あり、元々はsassだったのが、Rubyという言語に近い記法だった為あまり受け入れられず、よりCSSの記法に近いscssができました。今はこのscssが主流になっているので、基本こちらを使います。Sassは、コンパイル(変換)する事でCSSファイルを生成してくれるので、scssファイルを編集し、コンパイルしてCSSを作成する、という使い方になります。Sassって何ができるの??CSSで誰もが一度は思った、「めんどくせぇ・・・」って記述をすっきりとできます。その他CSSではできなかった様々な事ができます。セレクタを入れ子(ネスト)にできます!CSSでは、idやclassなど毎回頭から書く必要がありました。10px;}[/css]スタイルを使いまわせます!よく書く同じようなスタイルを、パッケージ化しておいて、呼び出して使う事ができます。ミックスイン(@mixin)と呼ばれる形でパッケージ化、インクルード(@include)と呼ばれる形で呼び出し、というイメージです。#ff0000;}[/css]演算ができます!ん~、これは今のところ僕個人的にはあまりメリットを感じられないのですが、演算もできます。#aa0055;}[/css]条件分岐や繰り返し処理ができます!これは便利!JavaScriptのように比較演算子を用いて条件分岐や繰り返しができます。green;}[/css]CSSファイルを1つにまとめられます!CSSでも、@importが使用できますね。CSSファイルは複数よりなるべく単一の方がサーバー負荷が減り読み込みが速いです。僕は1枚のCSSに全てのスタイルを書いてコメントでなるべくわかるようにという運用をしていたのですが、SassではCSSと同じように、@importが使え、しかもコンパイル後は、インポートした1枚のスタイルシートが生成されます!!制作時には複数に分けて、最終1つのCSSで出せるって最高です!個人的にはこれが一番うれしいかも。好きな感じでCSSへの変換ができます!コンパイルしてCSSを生成する際、コンパイルオプションという機能で、どのようなCSSを生成するか選べます。どんなメリットがあるの?というところですが、コメントやスペースを削除しファイルサイズを圧縮してサーバー負荷を減らしたり、CSSでも可読性を持たせ確認したりとうい選択ができます。コンパイル方法を選べるので便利ですね♪Sassのデメリットやっぱり良い事ばかりではありません。Sassを使おうとする事で考えられるデメリットも挙げておきます。学習コストが必要CSSとほぼ同じ記述なのでたいした事はありませんが、新しい技術を取り入れるにはやっぱりそれなりにお勉強が必要です。書いたらどんな感じになるのか?を把握するまで少し時間がかかるかもです。基本CSSで書いてしまっても問題ないので、習得するまで使えないという事はなく、使いながら慣れていけば良いですね!導入に手間がかかるSassを使うには、Rubyという言語が必要になります。Macにはあらかじめインストールされているようですが、WindowsはこのRubyのインストールから始めます。Sassのインストールなのですが、ここまで、コマンドプロンプトを使ったりします・・・多分、好きな人あんまりいないですよね(-_-;)その他様々な設定や、使っているエディタとの連携など最初に少し時間がかかります。この導入手順については次回ご案内したいと思っています。管理するファイルが増える当然ですが、CSSを生成する為にscssというファイルを作っているので、ファイル、増えますよね。CSSはイジる必要ないので、そんなに変わらないです。Sassの概要はこんな感じです。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。...たきおうぇぶめも。自分の備忘録も兼ねたウェブ系のちょっとした情報や、育児、ネットでの稼ぎ方などを発信しております。