はしくれエンジニアもどきのメモ

情報・Web系技術・Englishの勉強メモ・備忘録です。

Compass(Reset CSS、compassモジュール、CSS3モジュール)

Compassメモ(Reset CSScompassモジュール、CSS3モジュール)

Compass では、Reset CSSやベンダープリフィックスを補完してくれるような便利なmixin が使える。

Reset CSS

Compass では、Reset CSS を用意されている。

screen.scss ファイルが中で、reset.css を呼んでいる。 screen.scssの中を見ると以下のようになっている。

          

@import compass/reset

@import compass/reset

実際にコンパイルされたscreen.css を見ると、それぞれのHTML要素がリセットされている。 compass で作られるReset CSS

compassモジュール

新しいSassファイルを作成して、Compass を使う場合、下記のように、compass モジュールを @imoortする。

        

@impoort compass

@impoort compass すると、以下のモジュールが使える。

  • CSS3:全てのブラウザで使えるようにベンダープリフィクなどを追加してくれるmixin を提供。
  • Typography:共通なタイポグラフィパターンを提供。
  • Utilities:共通のスタイルパターンを提供。

以下に詳細が書いてある。
Compass Core Framework | Compass Documentation compassモジュール詳細

CSS3モジュール

CSS3モジュールのサンプルを以下に示す。

Animation

Animation

Sass

.widthup {
 @include animation(kf-widthup 1s ease infinite);
}
@include keyframes(kf-widthup){
 from {
  width: 100px;
 }
 to {
  width: 150px;
 }
}

CSS

Compass Animation

Appearance

外観を(ボタン)などに変更できる。 Appearance

Sass

          

.ap-btn {
 @include appearance(button);
}

CSS

Compass Appearance

Background Clip

背景の適用範囲を指定する。 background-clip

Sass

          

.bg-clip {
 @include background-clip();
}

CSS

Compass Background Clip

Background Origin

背景の基準位置を指定する。 background-origin

Sass


.bg-origin {
 @include background-origin();
}

CSS

Compass Background Origin

Background Size

background-size

Sass


.bg-size {
 @include background-size();
}

CSS

Compass Background Size

Border Radius

border-radius

Sass


.border-r {
 @include border-radius();
}

CSS

Compass Border Radius

Box Shadow

box-shadow

Sass


.box-shadow {
 @include box-shadow();
}

CSS

Compass Box Shadow

Box Sizing

box-sizing

Sass


.box-sizing {
 @include box-sizing();
}

CSS

Compass Box Sizing

CSS3 PIE

バージョンの古いIE で動作しない border-radius などのCSS3プロパティを動作できるようにする。 別途インストールが必要だったりするので、 今回は省略。

参考リンク:
Compass CSS3PIE を動かす8個のステップ(border-radius編) | ASP.NET CShrap Sitecore – WEBYA.IN

Columns

マルチカラムレイアウトの指定。 Columns

Sass

.two-col{
 @include columns(20em 2);
}

CSS

Compass Columns

Filter

filter

Sass


.filter-brigt-bl {
 @include filter(brightness(.3) blur(4px));
}

CSS

Compass Filter

Flexbox

flexbox

Sass


.row {
 @include display-flex;
 @include flex-direction(row);
}

CSS

Compass Flexbox

Font Face

全てのブラウザでWebフォントの指定ができる。 font-face

Sass

@include font-face("Blooming Grove", font-files("examples/bgrove.ttf", "examples/bgrove.otf"));

.example {
 font-family: "Blooming Grove";
 font-size: 1.2em;
}

CSS

Compass Font Face

Hyphenation

テキストの折り返しを指定。 hyphenation

Sass


.wordBreak {
 @include word-break(break-all);
}
.hyphens {
 @include hyphens(auto);
}
.hyphenation {
 @include hyphenation;
}

CSS

Compass Hyphenation

Images

gradient など背景画像の指定。 Images

Sass

.with-compass {
 @include background(
  image-url("foo.png"),
  linear-gradient(to bottom right, #333, #0c0),
  radial-gradient(#c00, #fff 100px));
 }

CSS

Compass Images

Inline Block

IE6, 7でもinline-block も使える。 inline-block

Sass

li {
 @include inline-block;
}

CSS

Compass InlineBlock

Opacity

IE8 でもopacity が使える。 opacity

Sass

.opacity {
 @include opacity(.5);
}

CSS

Compass Opacity

CSS Regions

Adobe が提案しているレイアウトである [参考 ]。
CSS Regions
CSS Regions のデモ↓

CSS Regions | Compass Documentation

Sass

#source {
 @include flow-into(main-thread);
}
.region {
 @include flow-from(main-thread);
 background: #C5DFF0;
}

CSS

CSS Regions

Text Shadow

compass-style.org/reference/compass/css3/text-shadow/

Sass

.shadow {
 @include text-shadow();
}

CSS

Compass Text Shadow

Transform

transform

Sass

.scaleup {
 @include transform(scale(1.5));
}

CSS

Compass Transform

Transition

transition

Sass

.anime-scaleup {
 @include transition(all, 1s, infinite);
}
.anime-scaleup:hover {
 @include transform(scale(1.5));
}

CSS

Compass Transition

User Interface

placeholder などのスタイルを変更を指定できる。

Sass

input[type="text"] {
 @include input-placeholder {
  color: #bfbfbf;
  font-style: italic;
 }
}

CSS

Compass UI

広告を非表示にする