新しいWordPressテーマデザイナーのためのSass入門

新しいWordPressテーマデザイナーとして、CSSファイルを整理、拡張、読みやすく保ちながら、長いCSSファイルの管理の課題にすぐに気づくでしょう。

WPBeginnerのメンバーを含む多くのデザイナーやフロントエンド開発者は、作業を容易にするためにSassやLESSのようなCSSプリプロセッサ言語の使用を推奨しています。しかし、これらのプリプロセッサとは何でしょうか？そして、それらをどのように使い始めるのでしょうか？

この記事は、新しいWordPressテーマデザイナー向けのSassの入門です。CSSプリプロセッサとは何か、なぜそれが必要なのか、そしてそれらをインストールしてすぐに使い始める方法を説明します。

Sass（Syntactically Awesome Stylesheet）とは何ですか？

私たちが使用するCSSは、使いやすいスタイルシート言語として設計されました。しかし、ウェブは進化しており、デザイナーはより少ない労力と時間でより多くのことを可能にするスタイルシート言語を必要としています。

SassのようなCSSプリプロセッサ言語を使用すると、変数、基本的な算術演算子、ネスト、ミックスインなど、現在CSSで利用できない機能を使用できます。

これは PHP に非常に似ており、サーバー上でスクリプトを実行して HTML 出力を生成するプリプロセッサ言語です。同様に、Sass は .scss ファイルを前処理して、ブラウザで使用できる CSS ファイルを生成します。

WordPressの管理画面のスタイルは、バージョン3.8以降、Sassを利用するようにポートされました。すでに多くのWordPressテーマショップや開発者がSassを利用して開発プロセスをスピードアップしています。

WordPressテーマ開発のためのSass入門

ほとんどのテーマデザイナーは、テーマをステージング環境やライブサーバーにデプロイする前に、ローカル開発環境で作業します。Sassはプリプロセッサ言語なので、ローカル開発環境にインストールする必要があります。

まず、Sassをインストールする必要があります。コマンドラインツールとして使用できますが、Sass用の便利なGUIアプリもいくつかあります。Mac、Windows、Linuxで利用できる無料のオープンソースアプリであるKoalaの使用をお勧めします。

この記事のためには、空のテーマを作成する必要があります。単に/wp-content/themes/内に新しいフォルダを作成してください。名前は「mytheme」など、好きなものにできます。空のテーマフォルダ内に、さらにフォルダを作成し、stylesheets と名付けてください。

スタイルシートフォルダに、メモ帳のようなテキストエディタを使用してstyle.scssファイルを作成する必要があります。

次に Koala を開き、プラスアイコンをクリックして新しいプロジェクトを追加する必要があります。次に、テーマディレクトリを見つけてプロジェクトとして追加します。Koala が stylesheets ディレクトリ内の Sass ファイルを自動的に見つけて表示することがわかります。

Sassファイルで右クリックし、出力パスの設定オプションを選択します。次に、テーマディレクトリのルート（例：/wp-content/themes/mytheme/）を選択し、Enterキーを押します。Koalaは、テーマディレクトリにCSS出力ファイルを生成します。

これをテストするには、Notepad のようなテキストエディタで Sass ファイル style.scss を開き、次のコードを追加する必要があります。

$fonts: arial, verdana, sans-serif; 
body { 
font-family:$fonts;
} 

次に、変更を保存してKoalaに戻る必要があります。Sassファイルを右クリックすると、右側にサイドバーがスライドインします。Sassファイルをコンパイルするには、単に‘Compile’ボタンをクリックしてください。

テーマディレクトリにあるstyle.cssファイルを開くと結果を確認できます。以下のような処理済みのCSSが表示されます。

body {
  font-family: arial, verdana, sans-serif; }

Sassファイルで変数$fontsを定義したことに注意してください。これで、フォントファミリーを追加する必要があるたびに、すべてのフォントの名前を再度入力する必要がなくなります。$fontsを使用するだけで済みます。

SassがCSSにもたらすその他のスーパーパワーは何ですか？

Sassは信じられないほど強力で、後方互換性があり、学習も非常に簡単です。前述のように、変数、ネスティング、ミックスイン、インポート、パーシャル、数学的および論理演算子などを作成できます。

次に例を示しますので、WordPressテーマで試してみてください。

複数のスタイルシートの管理

WordPressテーマデザイナーとして直面する一般的な問題の1つは、多くのセクションを持つ大きなスタイルシートです。テーマの作業中に、問題を修正するために何度も上下にスクロールすることになるでしょう。

Sassを使用すると、複数のファイルをメインのスタイルシートにインポートし、テーマ用の単一のCSSファイルとして出力できます。

CSSの@importについてはどうですか？

CSSファイルで@importを使用する問題は、@importを追加するたびに、CSSファイルがサーバーに別のHTTPリクエストを行うことです。これはページの読み込み時間に影響し、プロジェクトにとって良くありません。

一方、Sassで@importを使用すると、Sassファイルにファイルをインクルードし、ブラウザ用にすべてを単一のCSSファイルとして提供します。

Sassで@importを使用する方法を学ぶには、まずテーマのstylesheets ディレクトリにreset.scssファイルを作成し、このコードを貼り付ける必要があります。

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

次に、メインのstyle.scssファイルを開き、リセットファイルをインポートしたい場所にこの行を追加する必要があります。

@import 'reset';

ファイル名をすべて入力する必要がないことに注意してください。これをコンパイルするには、Koalaを開き、再度コンパイルボタンをクリックする必要があります。次に、テーマのメインのstyle.cssファイルを開くと、リセットCSSがそこに含まれているのがわかります。

Sassのネスティング

HTMLとは異なり、CSSはネストされた言語ではありません。Sassを使用すると、管理しやすく作業しやすいネストされたファイルを作成できます。たとえば、<article>セクションのすべての要素を、articleセレクタの下にネストできます。

WordPressテーマデザイナーとして、これによりさまざまなセクションで作業し、各要素を簡単にスタイル設定できます。ネスティングを実際に確認するには、style.scssファイルに次を追加してください。

.entry-content { 
p { 
font-size:12px;
line-height:150%;  
} 
ul { 
line-height:150%; 
}
a:link, a:visited, a:active { 
text-decoration:none;
color: #ff6633;
} 
} 

処理後、以下のCSSが出力されます。

.entry-content p {
  font-size: 12px;
  line-height: 150%; }
.entry-content ul {
  line-height: 150%; }
.entry-content a:link, .entry-content a:visited, .entry-content a:active {
  text-decoration: none;
  color: #ff6633; }

テーマデザイナーとして、ウィジェット、投稿、ナビゲーションメニュー、ヘッダーなどに異なるルックアンドフィールをデザインすることになります。Sassでネストを使用すると、構造化され、同じクラス、セレクタ、識別子を何度も記述する必要がなくなります。

SassでMixinを使用する

スタイルルールは同じでも、異なるセレクターやクラスで使用するため、プロジェクト全体で一部のCSSを再利用する必要がある場合があります。ここでミックスインが役立ちます。style.scssファイルにミックスインを追加しましょう：

@mixin hide-text{
    overflow:hidden;
    text-indent:-9000px;
    display:block;
}

このミックスインは、基本的に一部のテキストが表示されないようにします。ロゴのテキストを非表示にするためにこのミックスインを使用する方法の例を次に示します。

.logo{
    background: url("logo.png");
    height:100px;
    width:200px;
    @include hide-text;
}

ミキシンを追加するには @include を使用する必要があることに注意してください。処理後、以下のCSSが生成されます。

.logo {
  background: url("logo.png");
  height: 100px;
  width: 200px;
  overflow: hidden;
  text-indent: -9000px;
  display: block; }

Mixinは、ベンダープレフィックスにも非常に役立ちます。不透明度値や境界線の半径を追加する場合、Mixinを使用すると多くの時間を節約できます。境界線の半径を追加するためのMixinを追加したこの例を見てください。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}
 
.largebutton { @include border-radius(10px); }
.smallbutton { @include border-radius(5px); }

コンパイル後、以下のCSSが生成されます：

.largebutton {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px; }
 
.smallbutton {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px; }

追加リソース

Sass Lang
Sass流

この記事がWordPressテーマ開発のためのSassについて学ぶのに役立ったことを願っています。多くのWordPressテーマデザイナーがすでにそれを使用しています。将来的にはすべてのCSSがプリプロセスされるようになり、WordPressテーマ開発者はゲームをレベルアップする必要があるとさえ言う人もいます。また、テーマデザイナーのためのWordPress body classのヒントに関するガイドや、最高のドラッグアンドドロップWordPressページビルダーのエキスパートによる厳選リストもご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。