Sass – CSSを効率的に書くためメタ言語
HTMLとCSSを覚えて、もし余裕があれば、Sass（サス）にも挑戦してみましょう。現場によってはもうCSSではなく、Sassを標準として使っている場合もあります。なので、少しハイレベルなWeb制作会社に入社したければ、基礎は習得しておく必要があります。
Sassとは？
SassはCSSをより便利にした書き方だと覚えれば大丈夫です。
Sassの書き方
|
1 2 3 4 5 6 7 8 9 10 11 |
.header { padding:15px; } .header .title { font-size:18px; } .header .text{ font-size:14px } |
CSSでは、例えばheader内のタイトルとテキストに何かスタイルを適用させる場合は、このように書きますよね。
|
1 2 3 4 5 6 7 8 9 |
.header { padding:15px; .title { font-size:18px; } .text{ font-size:14px; } } |
一方、同じことをSassでは、このようにネスト（入れ子）にして書くことができます。書く量が減るので、開発スピードが上がります。だいぶ楽です。
Sassには二種類の記法（sass記法とscss記法）がありますが、上のscss記法が今は主流です。
他にも、変数やmixinなど、SassはCSSを快適に書くための機能が豊富なので、コーディングをより早くしたいと思っている人はぜひ導入してください。
Sassの勉強方法
よりSassを詳しく勉強したい方は、書籍では、このピンクの本『Web制作者のためのSassの教科書』が定番でおすすめです。
Sassの導入方法からSass独自の機能まで詳しく解説されているので、この本を一冊やり終えれば、基本はがっつり押さえられます。最近改定されて内容が刷新されました。
僕も旧版ですが持ってます。
就職・転職前にSassをどれくらい習得しておくべきか
最初にも書いたとおり、Sassは現場によっては標準で使われるようになってきました。でも、新人の方はまずはHTMLとCSSをマスターすることが先決です。Sassはコンパイル作業で、ターミナルやコマンドプロンプト（黒い画面）を使うため、完全な素人の方には少しややこしいかもしれません。あ、でも全然難しくはないんですよ。
なので、余裕が出てきたら、Sassにもぜひトライしてみてください！
このサイトでは、
本当にWebデザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社に正社員で入社すること
を強くオススメしています。
Webの最先端に触れられるWeb制作会社に入社しスキルをガッツリ高めてほしいです。そして、社内では、やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。
未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強いワークポート
です。Webに強いエージェントは他にもあるし、僕もいくつも登録していますが、ワークポートほど大量に求人案件を紹介してくれるエージェントを他に知りません笑。転職エージェントは複数登録しますが、ワークポートはそのうちのメインエージェントしてぜひ登録しましょう。
あなたはたぶんエンジニアにはなれません。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。
でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。
ほとんどの人がエンジニアにはなれないので、30〜40万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『エンジニアカレッジ』に行きましょう。エンジニアカレッジは、学校＆就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。ここで、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。20代のみ対象です。もし20代ならこのチャンスをぜひつかんでください。
30歳以上の方は、TECH::EXPERT
がオススメです。転職できなければ授業料全額返金してくれます。教室は9時〜22時まで開放し、教室あるいはオンラインでマンツーマンで無制限に質問ができます！超集中なら10週間、ゆったりなら6ヶ月と期間も生活に合わせて選べます。スクールは無数にありますが、有料系ではここが一番爆速に成長できそうです。
参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか
“Sass – CSSを効率的に書くためメタ言語” への2件のフィードバック
Webデザインのご質問やサイトの感想など、お気軽にどうぞ！
管理人（ねこポン）について
週３日だけ会社で働く30代前半ウェブデザイナーです！
インテリ風＆仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。
現在Web業界5年目。事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。
最近ちょこっと『月曜から夜ふかし』に出演しました↓
なんでもWebの質問受け付け中 (^o^) /♪
Web制作会社を歩き回れるゲームを作ってみました！ぜひ探検してみてください。(注意：音が出ます！)
ねこぽんさん、こんにちは！
以前【僕の20代まるごと黒歴史ストーリー】でコメントしましたひろこと申します。
オンラインスクールでHTML・CSSの基本的な部分を学び終わり、いよいよ実際にコーディングをしていくのですが、カリキュラム上sass/compassを使うようなのです…
「ええええ」と思い、ねこぽんさんの記事を検索しましたところこちらにたどり着きました！（こちらのサイトは私の心のよりどころです(^^)/）
正直、HTML/CSSでもいっぱいいっぱいなのに、さらにsass/compassをやるなんて鬼の所業かと…テキストがsass/compassで進んでいる以上、どうしようもないのですが、ねこぽんさんがおっしゃる通り、まずはHTMLとCSSをマスターすることが先決ですよね…( ;∀;)？どう勉強していこうか迷ってしまいまして…
ちなみに、ねこぽんさんは現在お仕事で実際にsassは使用することはよくありますか？
ひろこさん、再びこんにちは！
オンラインスクールがんばってますね〜。おつかれさまです。
心の拠り所という言葉、本当に嬉しいです！しかも百科事典のように使ってくれているようでさらに嬉しいです笑
僕が週３日勤務しているのは事業会社で古い体制なので、素のCSSを使ってます。でも僕が個人で仕事請け負う場合は普通にSassで書いてます。Sassはもはや現場によっては普通に使ってますよ。
Sassをあまり難しく捉えなくていいですよ。Sassはmixinやextend、変数など機能が豊富ですが、そういうのは基本機能を覚えたあとに、かじっていけば大丈夫です。
ふだんメインで使うSassの基本機能は、この記事でも書いてますが、プロパティをネスト（入れ子）する仕組みだけです。それのおかげで、むしろCSSで時間を掛けて書いていたのが短縮されてすごくラクになります。「CSSがラクに書けるんだ〜わーい」くらいの感じでいて大丈夫ですよ。
なので、Sassを書きながら、CSSをきちんと習得していくという流れでもいいと思います。Sassで書きながら、flexboxを覚えていったり、postionを調べたり、animationの使い方を学んでいくという勉強法もいいと思います。
もちろんそれが難しいのであれば、まずはがっつり１つのサイトを素のCSSで作ってみる経験が良いですね。あまり無理して挫折してしまうのも良くないので、ちょっとでもSassに抵抗感があるなら、まずは素のCSSだけをきっちり学びきるのもいいかもですね。
Sass以外にもHTMLをラクに書く「Pug」や、Sassと相性の良い「BEM」というclass名命名のルールなど、この先、まだまだ便利グッズが登場しますよ笑。
鬼の所業かっ！！！となる気持ちはわかります。最初は覚えるのが大変ですもんね。でも、SassもPugもラクをするための仕組みやツールです。「わー！コーディングがどんどんラクになるぞ〜よっしゃー！」という楽しむ姿勢で楽観的に行きましょう〜