サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
www.culture27.com
今回は@mixinについてです。 Mixinはスタイル(規則集合や宣言)を定義し、それを再利用することができます。 定義したMixinは@includeでインクルードして使用します。また、Mixinには引数を渡すことができます。 Mixinの利用例 clearfix用のMixinを例に説明します。 まずはMixinを定義します。 Scss @mixin clearfix { *zoom: 1; // &:after { content: ""; display: block; clear: both; } }
culture27.com 2023 著作権. 不許複製 プライバシーポリシー
先日、『Sass入門 〜より効率的なCSSコーディング』(※電子書籍のみです)にSass 3.2の内容を追加したので、記念にメディアクエリ用のミックスインを作りました。 @mediaルールを都度記述するのは面倒ですし、同じ要素やモジュールのスタイルを各@mediaルールに分けて書くことも面倒です。今回作ったミックスインを使えば、これらの問題を解決することができます。 出力したいCSSの例 要素やモジュール単位で書く方法 メディア特性ごとにスタイルを書く方法 2つの方法を一緒に使う 2つの任意のメディア特性に同じスタイルを適用したい場合 メディア特性ごとにCSSファイル自体を分ける場合 ミックスインと設定用の変数 出力したいCSSの例 例えば次のようなCSSを出力したい場合があるとします。 CSS /* 全てに適用 */ h1 { width: 100%; } p { line-height
今回の検証環境 Parallels上のWin7: IE6-8(IE6,7はIETester), Chrome15, Firefox8, Safari5, Opera11 Mac OS X 10.6.8: Chrome15, Firefox8, Safari5, Opera11 文字コード: UTF-8 font-familyの指定なし ブラウザで設定しているデフォルトフォントが適用される (上のデモはiframeを使っているのでこのページのスタイルは影響しません)。 font-family: sans-serif; を指定 てきすとテキストText IiLlgj@M 012345 てきすとテキストText IiLlgj@M 012345 MacのFxはデフォルトフォント、Chrome/Safari/Operaはヒラギノ角ゴ Pro W3が適用される (ただ、アルファベット表記でヒラギノ角ゴ
今回は変数についてです。 $ から始めて、値はCSSと同じようにして設定します。 こんな感じ。 Scss $margin: 2em 0; // $margin に "2em 0" をいれて定義する。 h1 { margin: $margin; } CSS h1 { margin: 2em 0; } 変数はそれが記述された{}内でのみ有効になります。 どのCSSルールセットやmixinにも含まれない場合、どこでも使えるグローバルな変数になります。 こんな感じ。 Scss h1 { $margin: 2em 0; // ここで$marginを定義する。 margin: $margin; } p { margin: $margin; // ここでは使えない!コンパイル時にエラーになります。 } インターポレーション 変数はプロパティの値だけでなく、セレクター名やプロパティ名にも使うことができます
今回は@extendについてです。 別のセレクタの全てのスタイルを継承することができます。 Scss .borderRed { border: 1px solid red; } .selectorA { @extend .borderRed; // ここで.borderRedを継承指定 padding: 2px; } 出力結果のCSS .borderRed, .selectorA { /* ここに .selectorA が追加されます */ border: 1px solid red; } .selectorA { padding: 2px; } @extendに使用できるセレクタ 1つの要素のみに関連するセレクタであればほとんど使用できます。 要素セレクタやid/classセレクタや擬似クラス、属性セレクタなども使用できますし、各セレクタを連結させたもの(div#selectorA.se
余計な改行や空白は削除されます。 例外として、セレクタの結合子(+ や >)の前後には空白が挿入されます。 最後のプロパティのセミコロン(;)や余分なセミコロンが削除されます。 カラーコードは6桁のまま出力されます。3桁にはなりません。 ただし、Mixinを通したものはどの出力形式でも条件によって出力される値が変わります。 rgbは可能なものはカラーコードに変換されます。 0pxは0にはならず、そのまま0pxで出力されます。 noneは0にならず、そのままnoneで出力されます。 0.5emは.5emにはならず、そのまま0.5emで出力されます。 空の宣言ブロックは出力されません。 CSS/Sassコメント Scss selector-1 { margin: 0; } /* * 複数行CSSコメント * 複数行CSSコメント */ selector-2 { /* 1行CSSコメント */
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック','MS PGothic',sans-serif; 同じフォントを日本語表記とアルファベット表記の両方で指定しているのは、各ブラウザの解釈や挙動が異なるなどの理由からです。ただ、最近のブラウザはどうなんだろうかとちょっと気になったので調べました。 結果としては下記の表になりました。詳細はデモページを見てください。 Parallels上のWin7: IE6-8(IE6,7はIETester), Chrome15, Firefox8, Safari5, Opera11 Mac OS X 10.6.8: Chrome15, Firefox8, Safari5, Opera11 文字コード: UTF-8 指定方法 IE Chrome Saf
.borderRed, .selectorA { /* ここに .selectorA が追加されます */ border: 1px solid red; } .selectorA { padding: 2px; } @extendに使用できるセレクタ 1つの要素のみに関連するセレクタであればほとんど使用できます。 要素セレクタやid/classセレクタや擬似クラス、属性セレクタなども使用できますし、各セレクタを連結させたもの(div#selectorA.selectorBやdiv.selectorA:first-childなど)も使用できます。 ただ、いまのところ(Sassバージョン3.1.1)は子孫/子/兄弟セレクタ(E F、E > F、E ~ F)と隣接セレクタ(E + F)は使用できません。 全称セレクタ(*)も使用できますが、使う場面はなさそうですね。 あと、@extend .se
今回は@ifについてです。 @if、@else if、@elseが使えます。 こんな感じ。 Scss $var1: aaa; @if $var1 == 'bbb' { /* A:$var1 が bbb の場合に出力される */ } @else if $var1 == 'ccc' { /* B:最初の条件を満たさず、$var1 が ccc の場合に出力される */ } @else if $var1 == 'aaa' { /* C:2つの条件を満たさず、$var1 が aaa の場合に出力される */ } @else { /* D:それ以外の場合に出力される */ }
今回は変数についてです。 $ から始めて、値はCSSと同じようにして設定します。 こんな感じ。 Scss $margin: 2em 0; // $margin に "2em 0" をいれて定義する。 h1 { margin: $margin; }
つい最近、IE6ってz-indexのバグがあったよな...って思ったけど、ぼんやりとしか思い出せなかったので今さらですが検証してみました。。 結論としてはIE6だけじゃなくてIE7にも同じバグがありました。 2つのdivの親要素が別々でz-indexは指定しない場合、IE6とIE7以外のブラウザは子要素のz-indexの値が優先されるが、IE6とIE7は親要素の出現順が影響します。後から出現した親と子要素が手前になります。 デモページをみる Google ChromeやFirefoxなどの場合
結論:バグがあるのはDemo-4の場合です。 Demo-1: 2つのdivの親要素が同じ場合、 単純にz-indexの値が大きい方が前面に表示されます。 すべてのブラウザで同じ結果になります。
Cmd+qではなくCmd+Ctrl+qで閉じるようにします。 システム環境設定からキーボード設定画面を開きます。キーボードショートカットの画面で、「アプリケーション」を選択し、「+」ボタンを押してキーを追加します。 キーボード設定画面のスクリーンショット ダイアログが表示されるので、それぞれの項目を設定します。 アプリケーションは今回はGoogle Chromeにします。 メニューのタイトルにはメニューの文字列を正確に入力します。なので、「Google Chrome を終了」となります。 キーボードショートカットはCmd+Ctrl+qにします。 各項目の設定のあと「追加」ボタンを押すと、ショートカットが追加されます。 メニューの項目を見るとショートカットのところが変更されてますね。 FirefoxやVim、Photoshopなども設定しておくといいかもしれません。
Cmd+qではなくCmd+Ctrl+qで閉じるようにします。 システム環境設定からキーボード設定画面を開きます。キーボードショートカットの画面で、「アプリケーション」を選択し、「+」ボタンを押してキーを追加します。 キーボード設定画面のスクリーンショット ダイアログが表示されるので、それぞれの項目を設定します。 アプリケーションは今回はGoogle Chromeにします。 メニューのタイトルにはメニューの文字列を正確に入力します。なので、「Google Chrome を終了」となります。 キーボードショートカットはCmd+Ctrl+qにします。
このページを最初にブックマークしてみませんか?
『http://www.culture27.com/』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く