scss/sass

Programming

WordPressでカテゴリー毎に色分けをする方法(スラッグをclassにする方法)

この記事では、WordPressで作成したカテゴリーにカテゴリー名をclassにして、それを利用して色を振り分ける方法を紹介します。カテゴリーのイメージカラーを設定した時に、記事一覧を表示する時に付ける該当カテゴリーに対しても、そのカラーを適応させたいなんて要件ってあると思います。まさにそれを解決する方法をこの記事では紹介しています。以下のようにカテゴリー名の要素に任意の色付きの何かを付ける事が可能になります。
Programming

【Sass】分割した複数のスタイルシートをまとめる(@import)方法

今回はSassを使用する一番の利点とも言えるファイルの分割記述について紹介します。Sassではファイルを分割して、後で一つのスタイルシートにまとめる技法があります。それを「Partials」と言います。機能別やレイアウト別にSaccファイルを作成することで従来より非常に見通しのよいコードを記述する事ができ便利な機能になっていますので是非習得して下さい。
Programming

【Scssの書き方:後編】@mixinと変数を理解して超効率化!!

今回は、Scssを利用する最大のメリットである@mixinと変数を解説します。これらを理解すれとCSSのみを使ってた時と比べて超効率的にコーディングを進める事が出来るため非常に楽になります。ただ制作会社案件でが割と必須な条件になってる場合もあるので何にしても早めにマスターしておきましょう。
Programming

【Scssの書き方:前編】入れ子構造など基本的な扱い方と考え方

今回は、SCSSの書き方について前編後編に分けて初心者にも分かりやすく詳しく説明していきます。今回の記事を一通り理解出来れば以下のようなコードを書けるようになります。学習時間は約3時間程度で済むレベルです。その割にかなり重宝される技術なので必ずマスターしましょう。
Programming

VS Codeで簡単にSassの環境を作成する方法(Live Sass Compiler)

今回は、Visual Studio Code(VSコード)で超簡単にScssとSassの環境を作成する方法を紹介します。WEB制作系の勉強をしている人はSCSSの技術は必須になってきます。しかしその環境作成で挫折する人が多いのが現状です。そんな時は、今回紹介する方法で超簡単に環境作成しましょう。