新規: WordPressテーマデザイナーのためのSass入門

新規WordPressテーマデザイナーになると、長いCSSファイルを整理し、拡張性と可読性を維持しながら管理することの難しさをすぐに知ることになります。

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

この投稿は、新規WordPressテーマ・デザイナーのためのSass入門です。CSSプリプロセッサとは何か、なぜ必要なのか、そしてどのようにインストールしてすぐに使い始めることができるのかをお伝えします。

Sass（Syntactically Awesome Stylesheet）とは？

私たちが使っているCSSは、使いやすいスタイルシート言語として設計されました。しかし、ウェブは進化しているため、デザイナーはより少ない労力と時間でより多くのことができるスタイルシート言語を持つ必要があります。SassのようなCSSプリプロセッサ言語は、変数、基本的な数学演算子、入れ子、ミキシンなど、現在のCSSでは使用する権限がありません。

サーバー上でスクリプトを実行し、HTML出力を生成するプリプロセッサ言語であるPHPによく似ています。同様に、Sassは.scssファイルをプリプロセスし、ブラウザーで使用できるCSSファイルを生成します。

バージョン3.8以降、WordPressの管理エリアのスタイルがSassを利用して開発できるように移植されました。すでに多くのWordPressテーマ・ショップや開発者が、開発のスピードアップのためにSassを活用しています。

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

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

まず最初にSassをインストールする必要があります。Sassはコマンドラインツールとしても使えるが、GUIアプリもいくつか用意されている。Mac、Windows、Linuxで利用可能な無料のオープンソース・アプリであるKoalaを使うことをお勧めします。

この投稿では、空白のテーマを作成する必要があります。wp-content/themes/に新しいフォルダーを作成します。名前は「mytheme」でも何でも構いません。空白のテーマフォルダーの中に別のフォルダーを作成し、stylesheetsと名付けます。

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

Koalaを開き、プラスアイコンをクリックして新規プロジェクトを追加してください。次に、テーマ・ディレクトリを探し、プロジェクトとして追加します。Koalaが自動的にスタイルシート・ディレクトリにあるSassファイルを見つけ、表示することに気づくでしょう。

Sassファイルを右クリックし、出力パスの設定オプションを選択します。テーマディレクトリのルート、例えば/wp-content/themes/mytheme/を選択し、エンターキーを押します。KoalaはテーマディレクトリにCSS出力ファイルを生成します。これをテストするには、Sassファイルstyle.scssをメモ帳のようなテキストエディターで開き、次のコードを追加する必要があります：

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

変更を保存し、Koalaに戻る必要があります。Sassファイルを右クリックすると、サイドバーが右側にスライドします。Sassファイルをコンパイルするには、「コンパイル」ボタンをクリックします。テーマのディレクトリにあるstyle.cssファイルを開くと、このように処理されたCSSが表示されます：

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

Sassファイルで変数$fontsを定義したことに注目してください。これで、フォント・ファミリーを追加する必要があるときはいつでも、すべてのフォントの名前をもう一度入力する必要がなくなりました。単に$fontsを使えばいいのです。

SassがCSSにもたらす他のスーパーパワーとは？

Sassは信じられないほど強力で、後方互換性があり、学ぶのがとても簡単です。変数、ネスト、ミックスイン、インポート、パーシャル、数学演算子、論理演算子などを作成できることは前述しました。これからいくつかの例を紹介しますので、あなたのWordPressテーマで試してみてください。

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

WordPressテーマデザイナーとして直面する一般的な問題の一つは、多くのセクションを持つ大きなスタイルシートです。テーマに取り組んでいる間、修正するために何度も上下にスクロールすることになるでしょう。Sassを使えば、複数のファイルをメインのスタイルシートにインポートし、テーマ用の個別CSSファイルを出力することができます。

CSSの@importは？

CSSファイルに@importを使用することの問題点は、@importを追加するたびに、CSSファイルがサーバーに別のHTTPリクエストを行うことです。これはページのロード時間に影響し、プロジェクトにとって良いことではありません。一方、Sassで@importを使用すると、Sassファイル内のファイルがインクルードされ、ブラウザーに個別CSSファイルとしてすべて提供されます。

Sassの@importの使い方を学ぶには、まずテーマのスタイルシート・ディレクトリに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のテーマ・デザイナーとして、これによって異なるセクションで作業し、各要素を簡単にスタイリングすることができます。nestinの動作を見るには、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でnestinを使うことで、同じクラス、セレクタ、識別子を何度も書く必要がなくなり、うまく構造化されます。

Sassでミキシンを使う

スタイル・ルールが同じであっても、異なるセレクタやクラスで使用するため、プロジェクト全体でCSSを再利用する必要がある場合があります。そこで便利なのがmixinです。style.scssファイルにmixinを追加してみましょう：

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

このミキシンは基本的にテキストを非表示にします。このミキシンを使ってロゴのテキストを非表示にする例を示します：

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

mixinを追加するには@includeを使う必要があることに注意。処理後、以下のようなCSSが生成される：

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

ミキシンはベンダープレフィックスにも非常に役立ちます。不透明度の値や枠線の半径を追加するときに、ミキシンを使うと時間を大幅に節約できます。この例を見てください。枠線の半径を追加するために 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; }

その他のリソース

サス・ラング
サス・ウェイ

この投稿がWordPressテーマ開発のためのSassについて知っていただく一助となれば幸いです。すでに多くのWordPressテーマデザイナーがSassを使っています。将来的には、すべてのCSSがプリプロセスされるようになり、WordPressテーマ開発者はゲームをアップグレードする必要があると言う人もいます。また、テーマデザイナーのためのWordPressのボディクラスのヒントや、ドラッグ＆ドロップでWordPressのページビルダーを作成できる専門家のおすすめもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.