Contenu connexe
Similaire à 実践Sass 後編 (20)
実践Sass 後編
- 13. sass
@mixin
_setting.scss @function
_utility.scss
style.scss
- 14. sass
@mixin
_setting.scss @function
_utility.scss
style.scss @import
- 15. sass
@mixin
_setting.scss @function
_utility.scss
style.scss @import
style2.scss
他のファイルも同様にして、どこでも使えるように。
- 33. ほか、設定用の変数
// HTML5の要素の使用
$use-html5: true !default;
// IE8-10, Firefox, WebKit, Opera
$support-ie8 : true !default;
$support-ie9 : true !default;
$support-ie10 : true !default;
$support-mozilla: true !default;
$support-webkit : true !default;
$support-opera : true !default;
これらを使ってコードの出し分けをします。
- 35. 変数でコードを出し分ける
// _setting.scss
$support-ie6: false !default;
$support-ie7: false !default;
// _utility.scss
@mixin inline-block {
display: inline-block;
@if $support-ie6 or $support-ie7 {
*display: inline;
*zoom: 1;
}
}
IE6/7対応が必要になったら、trueにしてコンパイルするだけ。
- 39. 下線 あり→なし パターン
.link {
! ! &:link,
! ! &:visited {
text-decoration: underline; }
! ! &:hover,
! ! &:active,
! ! &:focus {
text-decoration: none; }
}
- 42. ミックスインのコード
@mixin link-underline($type) {
@if $type == line-to-none { // 1.あり→なし
&:link, &:visited {text-decoration: underline;}
&:hover, &:active, &:focus {
text-decoration: none;}
} @else if $type == line { // 2.あり→あり
&:link, ..., &:focus {
text-decoration: underline; }
} @else if $type == none-to-line {..} // 3.なし→あり
} @else if $type == none {..} // 4.なし→なし
}
- 46. font-familyのコード
font-family:
'Hiragino Kaku Gothic Pro', Meiryo,
'MS PGothic', sans-serif;
font-family:
Verdana, Arial, Helvetica, sans-serif;
組み合わせは他にも沢山。
- 49. ミックスインのコード
@mixin font-family($type, $important: null) {
@if ($important == 'important') or $important {
$important: ' !important';
}
@if $type == sans-serif {
font-family: sans-serif#{$important};
@if $support-ie6 {
_font-family: 'MS PGothic', sans-serif#{$important};
}
} @else if $type == serif {
font-family: serif#{$important};
@if $support-ie6 {
_font-family: 'MS Mincho', serif#{$important};
}
} @else if $type == meiryo {
font-family: Meiryo, 'MS PGothic', sans-serif#{$important};
} @else if $type == monospace {
font-family: monospace, serif#{$important};
@if $support-ie6 {
_font-family: 'MS Gothic', monospace#{$important};
}
} @else if $type == hiragino {
font-family: 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif#{$important};
} @else if $type == verdana {
font-family: Verdana, Arial, Helvetica, sans-serif#{$important};
} @else if $type == tahoma {
font-family: Tahoma, Arial, Helvetica, sans-serif#{$important};
}
}
- 50. ミックスインのコード
@mixin font-family($type, $important: null) {
@if ($important == 'important') or $important {
$important: ' !important';
}
:
} @else if $type == monospace {
font-family: monospace, serif#{$important};
_font-family: 'MS Gothic', monospace#{$important};
} @else if $type == hiragino {
font-family: 'Hiragino Kaku Gothic Pro', Meiryo,
'MS PGothic', sans-serif#{$important};
:
}
- 53. ミックスインのコード
@mixin font-family($type, $important: false) {
@if $important == 'important' or $important == true {
$important: ' !important';
} @else {
$important: '';
}
@if $type == sans-serif {
font-family: sans-serif#{$important};
ちょっと
@if $support-ie6 {
_font-family: 'MS PGothic', sans-serif#{$important};
}
} @else if $type == serif {
font-family: serif#{$important};
@if $support-ie6 {
_font-family: 'MS Gothic', serif#{$important};
失敗でした
}
} @else if $type == meiryo {
font-family: Meiryo, 'MS PGothic', sans-serif#{$important};
} @else if $type == monospace {
font-family: monospace#{$important};
@if $support-ie6 {
_font-family: 'MS Gothic', monospace#{$important};
}
} @else if $type == hiragino {
font-family: 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif#{$important};
} @else if $type == verdana {
font-family: Verdana, Arial, Helvetica, sans-serif#{$important};
} @else if $type == tahoma {
font-family: Tahoma, Arial, Helvetica, sans-serif#{$important};
}
}
- 57. 素直なコード
$ff-hiragino:
'Hiragino Kaku Gothic Pro', Meiryo,
'MS PGothic', sans-serif !default;
.sample {
font-family: $ff-hiragino;
}
- 59. Font-family用の変数
// # English
$ff-arial: Arial, Helvetica, sans-serif !default;
:
// # Japanese
$ff-meiryo : Meiryo, 'MS PGothic',
sans-serif !default;
$ff-hiragino: 'Hiragino Kaku Gothic Pro', Meiryo,
'MS PGothic', sans-serif !default;
:
// # Korean
$font-dotum-escape: B3CBC6C0; // 돋움(dotum)
$ff-dotum: #{$font-dotum-escape}, dotum,
Arial, sans-serif !default;
- 62. placeholderのコード
2 colons
::-webkit-input-placeholder { color: red; }
:-moz-placeholder { color: red; }
1 colon
地味に違いがある。今後はIE10用にさらに1行追加…?
- 66. ミックスインのコード
@mixin placeholder-color(
$color,
$selector: null
) {
#{$selector}::-webkit-input-placeholder {
color: #{$color}; }
#{$selector}:-moz-placeholder {
color: #{$color}; }
}
- 67. セレクタを指定する
input {
@include placeholder-color(**, "&");
}
// コンパイル後のCSS
input::-webkit-input-placeholder {..}
input:-moz-placeholder {..}
親セレクタの参照の「&」を使う。
- 68. セレクタを指定する
<input type="text" required placeholder="**">
// SCSS
input {
@include placeholder-color(**, "&:required");
}
// コンパイル後のCSS
input:required::-webkit-input-placeholder {..}
input:required:-moz-placeholder {..}
- 69. セレクタを指定する
input {
@include placeholder-color(#333, "&");
@include placeholder-color(blue, "&:required");
}
// コンパイル後のCSS
input::-webkit-input-placeholder {..}
input::-moz-placeholder {..}
input:required::-webkit-input-placeholder {..}
input:required::-moz-placeholder {..}
- 72. @contentを使う
@mixin placeholder-color($color, $selector: null) {
#{$selector}::-webkit-input-placeholder {
color: #{$color};
@content;
}
#{$selector}:-moz-placeholder { color: #{$color}; }
}
input {
@include placeholder-color(red) {
background-color: blue;
font-style: italic;
}
}
{}を使ってコードブロックを記述して、@mixinに渡す。
- 73. @contentを使う
@mixin placeholder-color($color, $selector: null) {
#{$selector}::-webkit-input-placeholder {
color: #{$color};
@content;
}
#{$selector}:-moz-placeholder { color: #{$color}; }
}
input {
@include placeholder-color(red) {
background-color: blue;
font-style: italic;
}
}
コードブロックを入れたい場所に@contentを書く。
- 88. ローカル変数のスコープ
.sampleA {
$foo: 5px; $fooのスコープ
margin: $foo; (使える範囲)
}
.sampleB {
margin: $foo; // スコープ外 → エラー
}
- 91. グローバル変数と同名のローカル変数
.sampleA {
$foo: 10px;
margin: $foo; // -> 10px
}
$foo: 5px; // -> ここから先はグローバル変数?
.sampleB {
margin: $foo; // -> 5px
}