×

新人コーダーが覚えるべきツール【Sass】~導入のため知っておくべきポイント~

2015年6月14日 コーディング

WEBの開発スピードを早めてくれるツールが次々と登場している昨今、コーディング作業をする人間はそろそろマストで身に着けなければいけないのが、この「Sass」ではないでしょうか。

企業によっては必修の技術に指定し、すべての制作者が使用しているところもあります。

有名企業ではLINE株式会社やクックパッド株式会社、株式会社DeNAなどが必修技術としていますね。

Sass必修

「Sass」
初めにその名を聞いたときは、何か新たな言語のようで、また新しいことを覚えるのは面倒だなと感じました。しかしSassはそれ自体が何かのプログラミング言語ではなく、あくまでCSSの付属品のようなもの。

プログラミングができないと使えないんじゃないの?なんかあの黒い画面使わなきゃいけないんでしょ?怖いんですけど…なんて声を聞いたことがあります。

しかし使いこなすために時間を要するような、特別な技術ではありません。非エンジニアでもチャレンジは可能。

最初の導入が手間ですが、一度入れてしまえば、コーディングの作業スピードが格段に向上すること請け合いです。

Sassとは?

Sassとは、
Syntactically Awesome StyleSheets

直訳すると、構文的にすごいスタイルシート

構文的にすごい

構文的にすごいと言われてもよくわかりませんが、使ってみればその便利さを体感することができます。

CSSを拡張するメタ言語などと言われますが、要はCSSの記述を効率よく、そして管理を楽にしてくれます。

CSSはそもそも非常に単純で明快であるため、誰でも使う事が出来る点が良いところ。しかし単純であるがために、柔軟な命令ができません。

そこで、プログラミング言語のように、「演算」や「変数」といった自由度の高い命令ができる力を与え、もっとCSSを使いやすいものにしようと生まれたのがSassなのです。

今までできなかったことができちゃう

Sassを使用すれば、下記のようなことができてしまいます。

  • 変数で管理ができる
  • 入れ子構造が可能
  • ifやfor文で制御
  • 数値の四則演算

プログラミングをやったことがないデザイナーや新人コーダーの方だと、ピンとこないことかもしれません。ただ、今までのCSSではありえない進化なのです。これらを使いこなすことができれば、便利すぎてもう元には戻れません。

Sass導入のため超えなければならない壁

コーディング作業に大きな恩恵を受けることができる一方で、Sass導入には少しハードルが存在します。

環境構築が大変?

CSSを便利にする拡張機能のSassですが、CSSファイルに直接記述することはできません。scssというファイルを用意して、そこに記述したものをコンパイルする必要があります。

コンパイル…エンジニアではないデザイナーやコーダーにとっては、構えてしまう響きですね。コンパイルとは機械が読み取ることができるように、機械語に変換する作業です。

コンパイルを扱うに当たっては、ターミナルであったりアプリケーションを新しく覚えなければなりません。Sass自体は使いやすかったとしても、そのSassを使用するための環境整備が人によっては難しいのです。

ターミナルでチャレンジしょうとしたため、自分はここで心が折れかけましたが、どうやらアプリケーションを使えばとても簡単なようです。

WinとMac両方で使用可能な「Scout」というアプリで環境構築をおこなえば一瞬だそうです。自信が無い方は、こちらをぜひ。

チーム全体での深い理解

CSSがSassがコンパイルされ生成されるわけです。ここで気を付けなければいけないのが、SassファイルではなくてCSSを直接編集してしまうことです。Sassによってソース管理をしていることを知らない人間が、CSSを編集して「先祖返り」をおこしてしまうケースが考えられます。

Sassを導入することで管理するファイルは増えますし、その記述方法も一緒に作業する人同士で共有しなければ、書いた人しか解読不能なソースとなってしまうでしょう。

「ファイル管理」や「記述のルール」等をしっかりと取り決めをおこない、チーム全体で共有する体制が必須です。

外注とか出しにくくなる?

上記の理由などから、Sassへの理解がある人間同士でのコミュニケーションが必須なツール。そう考えると、外注に出す案件などは指示出しが難しく、余計なトラブルを増やす元になりそうです。

ただ、実際にワークフローを可視化して外注にSassをいじらせている会社を私は知っています。ファイル管理の方法やルール整備さえできれば不可能ではないようです。

チーム情報共有

「一緒に働く人がわかっていないと使えない」「共通のルールを作って且つ共有しなければならない」。

それら理由から、Sassを使える場面が限られてしまうように感じられるのが正直なところです。大企業が社内の必修にするのは良いことだと思いますが、中小の現場の人が導入に踏み切るのは悩みますよね。

1人で完結してしまう案件は積極的に使っていくべきだと思います。複数人が関わる、もしくは保守等でも関わる可能性がある案件であれば、Sassは1人だけで進めることはできません。導入時は大変ですが、共に作業する人に時間を取ってもらい、どのように進めるのか伝える努力が不可欠でしょう。

関連記事