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

新しい WordPress テーマデザイナーとして、CSS ファイルを整理、スケーラブル、読みやすく保ちながら、長い CSS ファイルの管理の課題をすぐに学びます。

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

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

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

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

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

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

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

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

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

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

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

stylesheets フォルダに、Notepad のような テキストエディタ を使用して 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リクエストをもう1つ行うことです。これは、プロジェクトにとって良くないページの読み込み時間に影響します。

一方、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はベンダープレフィックスにも非常に役立ちます。不透明度の値やborder半径を追加する場合、mixinを使用すると多くの時間を節約できます。ここでは、border半径を追加するために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
The Sass Way

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

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。