Compassに依存しない! Sass (SCSS) をちゃんと学ぶ その4

脱Compass Sassを学ぶ - その4

引き続きSassのお勉強です。今回はやっとここまで来ました、ミックスインそしてプレースホルダーと継承についてです。
どれもスタイルのセットを定義しておいて、必要に応じて呼び出すといった感じの機能ですが少しづつ振る舞いが違います。

Mixin
  • よく使うスタイルを定義できる
  • 引数を使用できる
  • @include で呼び出す
extend(継承)
  • 定義済みのスタイルを継承する
  • コンパイル時にグループ化される
  • @extend で呼び出す
プレースホルダ
  • よく使うスタイルを定義できる
  • コンパイル時にグループ化される
  • 定義自体は出力されない
  • @extend で呼び出す

それぞれの特徴をざっと書きましたが、1つずつ見て行きましょう。

続きを読む

Compassに依存しない! Sass (SCSS) をちゃんと学ぶ その3

脱Compass Sassを学ぶ - その3

引き続き、Compassに依存しないようにSassの機能をしっかり押さえていきます。
今回は、Sassでのネストルールについて触れていきますが、Sassの書式ではなく、よりCSSの書き方に近いSCSSの書式で解説をしていきます。

SCSSのネストルール

Sassではセレクタをネスト(入れ子)して記述することができます。HTMLのマークアップに沿った形でCSSを把握しやすくなる上に、何度も同じクラス名などを入力するといったCSSの手間の掛かる問題を解決できます。

続きを読む

Compassに依存しない! Sass (SCSS) をちゃんと学ぶ その2

脱Compass Sassを学ぶ - その2

前回に引き続き、Compassに依存しないSassネイティブな機能をおさらいしていきます。こうして学んでいくと、ベンダープレフィックスの自動化以外は結構Compassなしでやっていける印象がありますね。ただし、IE8以前のようなモダンブラウザ以外も対象にするなら圧倒的にCompassを使ったほうがいいと思います。個人的には古いブラウザは容赦なく切り捨てる方が、最終的にはみんなが幸せになる気がしますが。

変数を使用する

Sassを使用する上で最も頻度も高く、便利に感じられるのが変数を使用できることでしょう。変数はドル記号で始まり、数値や文字列、カラーコードなどの値を代入できます。変数の値は何度でも使用でき、上書きしたり計算する事も可能です。
注意すべきは、代入式がPHPやJavascriptのような一般的な言語で使われる =(イコール)ではなく、CSSプロパティと同じ:(コロン)による値の設定をすることです。

Sassで使用できる変数の型は以下の7つです。

続きを読む

Compassに依存しない! Sass (SCSS) をちゃんと学ぶ その1

脱Compass Sassを学ぶ - その1

以前の記事で、Sass(SCSS) + Compass を書いておいてアレですが、Compassの最大の問題点である重いことに耐えられなくなってきたので、脱Compassを見据えてネイティブな SCSS を初めからおさらいしたいと思います。

いっそのこと、コーディングが速く済みそうな Sass にしようかと思いましたが、Bourbon が気になるので SCSS で進めて行きます。

とりあえず本家のサイトがこちら

Sass: Syntactically Awesome Style Sheets

現時点でのバージョンは 3.4.13 です。

続きを読む

PoEdit でカタログを作成するやりかた

PoEdit でカタログ作成

前回で PoEdit のインストールを書いたので、ついでにWordPressテーマを作成した時に行う PoEdit でのカタログ作成で、一部わかりづらい所があるのでメモ。

今回はWordPressテーマの作成として、Twentyシリーズに従って、テーマディレクトリの中にlanguagesフォルダを作成し、その中に.poファイルと.moファイルを置くという前提で解説します。

続きを読む

前のページへ 1 2 3 4