SCSS Partials
SCCSファイルでインポートして使用する端切れ(partial)を放り込むリポジトリです。
INSTALLATION
Three options are available:
- Download package
- Clone with Git:
$ git clone https://github.com/hail2u/scss-partials.git - Install with Bower:
$ bower install --save-dev hail2u-scss-partials
USAGE
@importを使ってSCSSファイルでインポートします。
@import "reset";
@import "clearfix";
拡張子とファイル名の先頭の_は不要です。
_clearfix.scss
clearfixを適用することができます。
header {
@include clearfix;
}
IE6等のサポートが必要ないなら、生成されるコードがシンプルなminiclearfixを使用することもできます。
article {
@include miniclearfix;
}
_emboss.scss
文字にtext-shadowによる軽いエンボスをかけることができます。
h1 { @include black-emboss(); }
_meyerweb-reset.scss
meyerwebで公開されているReset CSSをインポートすることができます。
_natural.scss
結局どうすればいいの？ - Dive Into HTML5などで使われているシンプルなスタイルをインポートすることができます。文字や背景、リンクなどの色やフォントサイズ等の設定を変更することも可能です。
$link: green;
$font-size: 12px;
@import "natural";
_reset.scss
hail2u.netで使用していたリセットCSSをインポートすることができます。
_speech-bubble.scss
吹き出しを作ることができます。
.speech-bubble {
@include speech-bubble(#9cf, 6px, 12px, $24px);
}
枠線付きを作ることもできます。
.bordered-speech-bubble {
@include bordered-speech-bubble(#9cf, #369, 4px, 8px, 16px, $24px);
}
引数
$bgcolor: 背景及び吹き出しの尻尾の色$round-size: 吹き出しの四隅の丸さ$tail-size: 吹き出しのサイズ$tail-position: 吹き出しの位置
_vanilla.scss
Vanilla CSS Un-Resetをインポートすることができます。
_vendor-extension.scss
ベンダー拡張プロパティとCSS3でのプロパティを一括指定することができます。
- box-sizing
- transform
- transform-origin
- transform-style
- perspective
- perspective-origin
- backface-visibility
- transition
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
値の指定はCSS3の仕様に従います。
_yui-base-min.scss
YUI 3のCSS Baseをインポートすることができます。
_yui-fonts-min.scss
YUI 3のCSS Fontsをインポートすることができます。インポートしたドキュメントでは変数を使ってフォントサイズの変更が行えます。
h1 {
font-size: $yui-24px;
}
$yui-10pxから$yui-26pxまで定義されています。
_yui-reset-min.scss
YUI 3のCSS Resetをインポートすることができます。
_fake-aa.scss
CSS Transformのrotate(360deg)で軽くぼかしがかかることを利用して、Google Chromeでフォントがギザギザに見えることがある問題への対処を行います。
.fake-aa {
@include fake-aa;
font-family: "MS PMincho", serif;
}
_grid-overlay.scss
ページ全体にグリッドのオーバーレイ画像をCSSグラデーションを利用して表示します。CSSグラデーションを利用しているためInternet Explorer 9以下やOpera 10以下では表示されません。
body {
@include grid-overlay(60px, 20px);
}
引数
$column: カラムの幅$gutter: 溝(カラムとカラムの間)の幅
_normalize.scss
normalize.cssをインポートすることができます。
_context-reset.scss
全てのプロパティーをその初期値にリセットすることができます。
_elegant-button.scss
少しグラデーションのかかったきれいなボタンを作ることができます。
.elegant-button {
@include elegant-button(#39c, #fff);
}
引数
$bg: ボタンの背景色$fg: ボタンの前景色(文字色)
_image-replacement.scss
画像置換を行うためのテキストを隠すためのスタイルを導入できます。置換する画像の指定やサイズの決定は行えません。text-indentプロパティーを使ったものとfont-sizeプロパティーを使ったもの、擬似要素を使ったものの3種類があります。
_black-prints.scss
印刷向けに文字色や背景色をモノクロにリセットするためのスタイルを導入できます。印刷向けスタイルシートをインラインで埋め込む時に役に立ちます。
_corpolate-colors.scss
様々な企業のコーポレートカラーを手軽に参照できます。
_selection.scss
選択した時のスタイルをまとめて指定できます。
::-moz-selection {
@include selection(#fff, #369);
}
::selection {
@include selection(#fff, #369);
}
_lego-colors.scss
レゴブロックのカラースキームを手軽に参照できます。
_centering.scss
縦方向または横方向、及び両方向に中央揃えすることができます。
.centered-hv {
@include centering-known();
width: 80px;
height: 80px;
}
widthとheightプロパティーは必須です。ウィンドウではなく親要素のサイズを基準に中央揃えしたい場合は、親要素にposition: relativeが必要になります。
centering-unknownというミックスインもありますが実験段階で、上手く動かないかもしれません。
引数
$horizontal: 横方向に中央揃えするかどうか$vertical: 縦方向に中央揃えするかどうか
LICENSE
SCSSファイルにライセンス条項が明記されていない限りすべてパブリック・ドメインとして提供されています。