改訂2版」を参考に、Sassの初心者でもすぐに使えるテクニックを紹介しています。想定読者は、Sassの知識がちょっとある方。Sassを使うと何か便利になるらしいことは知っている。上手く使いこなせていない。このような方に、まず覚えておくべき使い方を、自分の備忘録も兼ねて書きました。色々な使い方があるので、全部覚えて使いこなすのは、正直難しいです。使えば確実に効率化し、初心者でもすぐに使えると思ったところだけ紹介します。Sass初心者の方の参考になれば嬉しいです。RinkerKindleAmazon楽天市場Yahooショッピングこの本は辞書的に使えるので、Sassをマスターしたい方は持っていて損はありません。覚えてくべきSassの使い方5選Sassをコンパイルする2つの方法この記事を書いている私(わや@wayasblog)は、Web制作の勉強を開始して1年ほどです。改訂2版」を読み、Sassを勉強しました。改訂2版」で勉強前のSassの知識は、「何となく知っているけど、実際にコーディングには使えない」というレベルでした。これからはSassを使おうと決意することができた本です。Sassを使いこなせることができれば、コーディングがかなり効率的になると思いました。改訂2版」の公式サポートサイトは以下です。壮)」の公式サポートサイトです。book2.scss.jp本と一緒に活用できるようになっており、サンプルコードもコピペできます。【覚えるべき技5選】Web制作者のためのSassの教科書Sass初心者が覚えておくべき、便利な使い方を5つ紹介します。順番に見ていきましょう。基本のネストネストはSassの醍醐味とも言える機能ですね。CSSをHTMLの構造に合わせて入れ子で書くことができます。-->このようなHTMLがあった時に、CSSは以下のように書くと思います。red;}ですが、Sassで書くと以下のように入れ子で書くことができます。underline;}「&」で親セレクタの参照をすることができます。変数での管理あらかじめ変数を決めておくことで、他の場所でも呼び出すことができる便利な使い方です。色や文字サイズを管理するのに便利ですね。演算ができる「widthからpaddingを引く」などの計算もSassが計算してくれます。7px;}上記のように、変数とも合わせて使うことができるので便利です。paddingが変わっても、widthも自動的に変わるので、修正の手間が省けます。ミックスインミックスインとは、スタイルの集まりを定義し、使い回しができる機能です。ボタンのスタイルなどは1つのサイトで大体同じだと思うので、便利ですね。}}いちいち書くのが面倒なメディアクエリを省略できますね。ファイル分割Sassファイルを役割に応じて分割して管理する方法です。Sassのファイル設計に関して参考になるのが「吉本式」です。吉本式BEM設計(BEM設計ベース)吉本式BEM設計(BEM設計ベース)とは、より美しいソースコードにするためのマークアップエンジニア向けの技術コンテンツです。tsudoi.org「吉本式」を参考にしたディレクトリ構造は、以下の通りです。scssbase(ベースのスタイル)_base.scss(サイトで共通する必要のあるスタイル)_reset.scss(リセットCSS)mixin(ミックスイン、1つのファイルに1つの定義)_btn.scss_font.scsspageabout(例)block_sec.scss(Block単位)_message.scss(Block単位)style.scsspulgins(jQueryのプラグインで付随してくるCSSファイル)slick.css(例)setting(初期設定で必要なパラメータなど)_config.scss(サイトで共通で必要になる設定値、メディアクエリなど)_function.scss(functionを定義するSCSSファイル)style.scss(インポート用)修正したい箇所がどこに書かれているかがすぐにわかりやすいですよね。※スマホだと見にくいので、説明を省いたのも貼っておきます。scssbase_base.scss_reset.scssmixin_btn.scss_font.scsspageaboutblock_sec.scss_message.scssstyle.scsspulginsslick.csssetting_config.scss_function.scssstyle.scss【Sassの教科書から学ぶ】Sassをコンパイルする方法Sassは、そのままHTMLから読み込むことができないので、CSSに変換する必要があります。CSSに変換することを「コンパイル」といいます。コンパイルする方法はいくつかありますが、その中の2つを紹介します。Sassを使うgulpタスクの実行それぞれ解説します。Sassを使うまずは、初心者向けの方法です。Sass」を導入すれば簡単にコンパイルできます。https://marketplace.visualstudio.com/items?itemName=spook.easysassmarketplace.visualstudio.comSassファイルを保存すれば、自動的にCSSファイルが出力されるので簡単です。色々な細かい設定ができないので、本格的に使うなら次の「gulp」が断然オススメです。gulpタスクの実行ここからは、完全初心者には難しいかもしれません。改訂2版」で勉強中に、かなり手間取りました。黒い画面(ターミナルやコマンドプロンプト)に慣れていなかったからです。表示された時の解決方法。2019※gulpとNode.jsのバージョンの相性があるみたいなので、注意してください。先ほども書いた通り、細かい設定ができるので、便利です。インストール方法などは、割愛します。改訂2版」にも丁寧に書かれていますし、ネット上にも詳しい説明がありますね。「gulpfile.js」の書き方SassからCSSファイルを出力する時に「gulpfile.js」が必要になります。デフォルトのファイルに、gulpのタスクを追加すると、よりきれいなCSSが出来上がります。その時に、以下のテンプレートを使うといい感じにコンパイルされます。.pipe(gulp.dest('./css'));})簡単に見ていきましょう。gulp.src('./sass/**/*.scss')上記で、sassファイル内のすべてのscssファイルをコンパイルすることを意味します。%>")}))Sassの記述ミスなどでコンパイルエラーになってしまうと、タスクが止まってしまいます。いちいち入力し直すのは手間なので、停止させないようにする設定です。エラー時に通知を出すような設定になっています。フォルダの指定.pipe(sassGlob())ファイルを細分化していても、全ファイルがインポートされる設定です。"components/**";上記のようにフォルダごと書けばOKです。'expanded'}))これは、Sassのアウトプットスタイルを表しています。アウトプットスタイルは、以下の4種類あります。nested:ネストされているような見た目expanded:可視性が高いcompact:セレクタとプロパティがシングルラインcompressed:インデントや改行無し基本的には「expanded」でOKです。メディアクエリをまとめる.pipe(postcss([mqpacker()]))バラバラになったメディアクエリをまとめてコード量を削減してスッキリしてくれます。Sassはメディアクエリをネストして書くことができます。コンパイルされるとメディアクエリがバラバラになってしまいます。それを、まとめて記述してくれるのです。'alphabetically'})]))CSSプロパティの記述順を自動でソートしてくれます。以下の3種類+オリジナルのソート順をカスタムすることも可能です。決まりはないようですが、多く採用されているのは「alphabetically」のようです。ベンダープレフィックス自動付与.pipe(postcss([autoprefixer()]))ベンダープレフィックス(「–webkit-」や「–moz-」など)を自動付与してくれる設定です。書き出し場所.pipe(gulp.dest('./css'));「gulpfile.js」から相対パスで見るので、同じ階層の「css」フォルダに書き出すという設定です。【覚えるべき技5選】Web制作者のためのSassの教科書【まとめ】Sassの覚えておくべき使い方は、以下の5つでした。以上が使いこなせたら、コーディング速度UP間違いなしですね。Sassを勉強して感じたことは、コーディングは何よりも準備が大切ということです。変数で管理したり、ファイル分割するには、サイト全体を把握する必要があります。準備せずにいきなりコーディングに取り掛かっていた過去の自分が、いかに非効率だったかがわかりました。「急がば回れ」ですね。Sass初心者の方の参考になっていたら、嬉しいです。最後までお読みいただき、ありがとうございました。「wow.js」と「Animate.css」を使えば、サイトにアニメーションをつけることができます。初心者にも簡単で便利だったので、備忘録も兼ねてシェアします。CODE【Cocoon】記事内にソースコードを埋め込む方法【テンプレあり】この記事では「Cocoon」の記事内にソースコードを埋め込む方法をまとめました。コピペして使えるテンプレも作ったので、ぜひ使ってくださいね。「HTML/CSS/Javascript」については、ブログ内でデモを見せるのに「CodePen」が便利なので、その使い方も解説します。CODEBootstrapのテンプレート「Canvas」の使い方【爆速コーディング可能】Twitter社が開発したCSSフレームワーク「Bootstrap」のテンプレートを使ったLP制作の解説記事です。今回は「Canvas」というテンプレートを使ってみました。英語のサイトなので試行錯誤しましたが、使い方がわかれば便利すぎるテンプレートなので、おすすめです。コメントをキャンセルメールアドレスが公開されることはありません。*サイトプロフィールわや未経験からエンジニア転職目指してます。30代、4歳児の母です。プログラミング&ブログの楽しさにどハマり!2019.1コーディング勉強開始2019.2ブログ開始2019.11退職→本格的にエンジニア目指すまだまだ初心者ですが、読んでもらえると嬉しいです。ったものホーム検索トップサイドバープロフィールわや未経験からエンジニア転職目指してます。30代、4歳児の母です。プログラミング&ブログの楽しさにどハマり!2019.1コーディング勉強開始2019.2ブログ開始2019.11退職→本格的にエンジニア目指すまだまだ初心者ですが、読んでもらえると嬉しいです。届いたらどうする?2019.06.012020.01.23保育園役員の「納得感のある」断り方【役員のメリット・デメリット】2019.03.132019.06.03ワイヤレスイヤホンTws-i7【Lezon/Bluetooth4.2】の使い方を解説2019.06.272020.01.10タイトルとURLをコピーしました。