【Sassで効率よくコーディングするために】よく使うCompassのミックスインまとめ

【Sassで効率よくコーディングするために】よく使うCompassのミックスインまとめ

cssを記述していく際にベンダープレフィックスを毎回書いていくのは面倒だし、そもそも全部覚えきれません。
Sassで記述していく際にCompassで用意されているMixinを使うことで記述が随分楽になります。

基本的なCompassの使い方についてはこちらのサイトが詳しいので参考にしてみてください。
CSSの常識が変わる!「Compass」、基礎から応用まで!

Compassを使う

まずは記述するscssファイルの冒頭に以下の記述をします。

style.scss
@import "compass";

これでCompassのメインモジュールをインポートすることが出来ます。

Compassで書く

例えばこんな風に記述

p.sample{
	@include border-radius(5px);
}

するとコンパイル後はこのように出力されます。

p.sample {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

便利ですね。
compassの記述方法もたくさんあるのでよく使うものはリストで持っていた方がいいと思います。

よく使ういくつかのMixinを紹介します。

flex系

style.scss
p.sample{
@include display-flex;
@include flex(1);
@include align-items(center);
@include justify-content(space-between);
@include justify-content(center);
@include justify-content(flex-end);
@include flex-wrap(wrap);
@include flexbox((align-self: flex-end));
@include flex-direction(column);
@include flex-direction(column-reverse);
}
コンパイル後のcss
p.sample {
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 1;
    flex: 1;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-self: flex-end;
    align-self: flex-end;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

transition系

style.scss
p.sample{
@include transition(ease-in-out , 0.3s);
@include transition(.3s);
@include scale(1.2);
}
コンパイル後のcss
p.sample {
    -moz-transition: ease-in-out, 0.3s;
    -o-transition: ease-in-out, 0.3s;
    -webkit-transition: ease-in-out, 0.3s;
    transition: ease-in-out, 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -moz-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
}

box-shadow系

style.scss
p.sample{
@include box-shadow(0px 6px 0px 0px rgba(0,0,0,0.2));
@include box-shadow(rgba(0, 0, 0, 0.1) 5px 5px 8px 3px inset);
@include box-shadow(5px 0 0 #fff);
@include box-shadow(0px 9px 3px -3px rgba(0,0,0,0.8));
}
コンパイル後のcss
p.sample {
    -moz-box-shadow: 0px 6px 0px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 6px 0px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 6px 0px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 8px 3px inset;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 8px 3px inset;
    box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 8px 3px inset;
    -moz-box-shadow: 5px 0 0 #fff;
    -webkit-box-shadow: 5px 0 0 #fff;
    box-shadow: 5px 0 0 #fff;
    -moz-box-shadow: 0px 9px 3px -3px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0px 9px 3px -3px rgba(0, 0, 0, 0.8);
    box-shadow: 0px 9px 3px -3px rgba(0, 0, 0, 0.8);
}

transform系

style.scss
p.sample{
@include rotate(15deg);
@include transform-origin(left, center);
@include transform(translateY(60px));
}
コンパイル後のcss
p.sample {
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -moz-transform: translateY(60px);
    -ms-transform: translateY(60px);
    -webkit-transform: translateY(60px);
    transform: translateY(60px);
}

もちろんもっと出来ることはたくさんあります。

ただ、Compassを使って書いている際に、この書き方どうだったっけ。。と悩むこともあるのでよく使うのを簡単にまとめてみました。

SPONSORED LINK

CONTACT

ご意見やご感想、お仕事のご依頼など
お気軽にご連絡ください。

CONTACT FORM