sass×compassでコーディング効率化!意外と知らなかった?関数いろいろ※cssコンパイル後ソースあり

2015.5.11 CSS

前回の記事でsassで作業を効率化するために、関数について触れました。

今回は若干深堀りして、compassの関数でコーディング効率化のためにPreprosユーザーの僕が比較的使っている、かんたんに導入できるものをメモしていきます。

はじめに、compassをインストールすることと、コード上に

@import "compass";

の記述をしておいてくださいー!(Preprosの場合はcompassインストールは不要ですので上記の記述を.scssファイルに直接しちゃってください!)

sass×compassでコーディング効率化!意外と知らなかった?関数いろいろ※cssコンパイル後ソースあり

Utilitiesモジュール(ジャンルレスで汎用的なもの)

子要素を横並びにする

Sass(コンパイル前)

.inline-list{
	@include inline-list;
}
.inline-block-list{
	@include inline-block-list;
}

.inline-block-single{
	@include inline-block;
}

Css(コンパイル後)

.inline-list {
  list-style-type: none;
}
.inline-list, .inline-list li {
  margin: 0;
  padding: 0;
  display: inline;
}

.inline-block-list {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  *zoom: 1;
}
.inline-block-list li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  white-space: nowrap;
}

.inline-block-single {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}

inline-listinline-block-listは結構たくさん記述が生成されてしまいますね。

僕は一番最後のinline-blockを単体でよく使います。

Typographyモジュール(テキスト装飾関連)

 リンクテキストの:visited , :hover , :active , :focus 一括指定

Sass(コンパイル前)

li a{
    //color , :hover , :active , : visited , :focus
    @include link-colors(#ccc , #fcc , #a99 , #44a , #900);
}

Css(コンパイル後)

li a {
  color: #ccc;
}
li a:visited {
  color: #44a;
}
li a:focus {
  color: #900;
}
li a:hover {
  color: #fcc;
}
li a:active {
  color: #a99;
}

:focusまで行けちゃうのは便利ですね。

ただ、「解りやすいソースコード」という意味では普通に書いていったほうがいいと思います。

フォントの大きさや行の高さのベースを基軸として段落幅を調節する

Sass(コンパイル前)

$base-font-size: 20px;
$base-line-height : 1.414em;

//$base-font-size $base-line-height を基準に。
@include establish-baseline;

//adjust-font-size-to(フォントサイズ , ラインヘイト , 基準サイズ(省略時は$base-font-sizeが基準?) ) $base-line-heightが無いと機能しない
.adjust-font-size-to{
    @include adjust-font-size-to(5px , 2 , 20px);
}

.leader{
    @include leader(); //margin-top
    @include padding-leader(); //padding-top
}

.trailer{
    @include trailer(); //margin-top
    @include padding-trailer(); //padding-top
}

Css(コンパイル後)

html {
  font-size: 125%;
  line-height: 1.414em;
}

.adjust-font-size-to {
  font-size: 0.25em;
  line-height: 2.828em;
}

.leader {
  margin-top: 1.414em;
  padding-top: 1.414em;
}

.trailer {
  margin-bottom: 1.414em;
  padding-bottom: 1.414em;
}

establish-baselineをインクルードするとhtmlへの指定まで記述されます。

$base-font-size$base-line-heightは定義しなくてもデフォルトで値があるので省略はできます。

leader()とpadding-leader()が段落の上に作用する幅で、ソレに対してtrailer()padding-trailer()が段落の下に作用する幅ですね。
これらは$base-line-heightを基準に設定されます。

コンテンツ幅からはみ出た文章を折り返さずに「…」とする

Sass(コンパイル前)

.ellipsis {
    width: 300px;
    
    @include ellipsis(true);
}

Css(コンパイル後)

.ellipsis {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

CSS3モジュール(CSS新要素関連)

要素の透過度を調節する

Sass(コンパイル前)

.img{
    @include opacity(0.5);
}

Css(コンパイル後)

.img {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}

IE用にfilterプロパティも生成してくれます!

マウスオーバー時などに簡易的なCSSアニメーションを実装する

Sass(コンパイル前)

img{
    @include opacity(.5);
    //プロパティ , かかる時間 , アニメーションの種類 , アニメーション開始までの遅延時間
    @include transition(opacity , 1s , ease-in-out , .5s);
    
    &:hover ,
    &:active ,
    &:visited ,
    &:focus{
        @include opacity(1);
    }    
}

Css(コンパイル後)

img {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
  -moz-transition: opacity, 1s, ease-in-out, 0.5s;
  -o-transition: opacity, 1s, ease-in-out, 0.5s;
  -webkit-transition: opacity, 1s, ease-in-out, 0.5s;
  transition: opacity, 1s, ease-in-out, 0.5s;
}
img:hover, img:active, img:visited, img:focus {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}

transitionの引数には、順に「プロパティ , かかる時間 , アニメーションの種類 , アニメーション開始までの遅延時間」を書きます。通常の指定の仕方と同じですね。

意外とIE8と9に対応していない。

テキスト、ブロックレベル要素にシャドウをつける

Sass(コンパイル前)

a{
    *{ 
        @include text-shadow(0 -1px 1px #000 );
    }

    &:hover{
        @include box-shadow( 0 0 5px rgba(#000 , .4) );
    }
}

Css(コンパイル後)

a * {
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4);
}
a:hover {
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

text-shadowは使い方によっては文字を縁ったような表現もできますし、用途に応じてミックスインを作るのに使っています。

box-shadowは微妙~な影を出したいときにrgba()と組み合わせてうっすらと使います。

方向や形を指定して背景色をグラデーションにする

Sass(コンパイル前)

.radial-g{
    @include background-image(radial-gradient(100px 100px , #eeffee , #12aa12));
}

.linear-g{
    @include background-image(linear-gradient(to bottom  right , #eeffee , #12aa12));
}

.v-g{
    @include background-image(linear-gradient(#00ff00 , #eeffee , #12aa12));
}

.h-g{
    @include background-image(linear-gradient(to right , #00ff00 10%, #eeffee 20% , #12aa12 90% ));
}

Css(コンパイル後)

.radial-g {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjEwMHB4IiBjeT0iMTAwcHgiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlZWZmZWUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMmFhMTIiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -moz-radial-gradient(100px 100px, #eeffee, #12aa12);
  background-image: -webkit-radial-gradient(100px 100px, #eeffee, #12aa12);
  background-image: radial-gradient(100px 100px, #eeffee, #12aa12);
}

.linear-g {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZmZlZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzEyYWExMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #eeffee), color-stop(100%, #12aa12));
  background-image: -moz-linear-gradient(top, #eeffee, #12aa12);
  background-image: -webkit-linear-gradient(top, #eeffee, #12aa12);
  background-image: linear-gradient(to bottom right, #eeffee, #12aa12);
}

.v-g {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwZmYwMCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZWVmZmVlIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMTJhYTEyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00ff00), color-stop(50%, #eeffee), color-stop(100%, #12aa12));
  background-image: -moz-linear-gradient(#00ff00, #eeffee, #12aa12);
  background-image: -webkit-linear-gradient(#00ff00, #eeffee, #12aa12);
  background-image: linear-gradient(#00ff00, #eeffee, #12aa12);
}

.h-g {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiMwMGZmMDAiLz48c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2VlZmZlZSIvPjxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjMTJhYTEyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(10%, #00ff00), color-stop(20%, #eeffee), color-stop(90%, #12aa12));
  background-image: -moz-linear-gradient(left, #00ff00 10%, #eeffee 20%, #12aa12 90%);
  background-image: -webkit-linear-gradient(left, #00ff00 10%, #eeffee 20%, #12aa12 90%);
  background-image: linear-gradient(to right, #00ff00 10%, #eeffee 20%, #12aa12 90%);
}

通常の一直線方向のグラデーションはlinear-gradient()で、円形の場合はradial-gradient()で実装します。

radial-gradientの場合は引数に([円形の大きさ] , [中心の色] , [端の色])と書くのが基本形。

linear-gradientの場合は([方向] , [開始点の色] , [終点の色])と書くのが基本形で、例では「.linear-g」に指定してあるものです。
ほか「.v-g」に([開始点の色] , [中間点の色] , [終点の色])と指定してあり、この場合は0%~50%~100%と均等にグラデーションカラーが生成されます。
.h-g」の場合は、([方向] , [10%地点での色] , [20%地点での色] , [90%地点での色])と書くことで水平にグラデーションを生成しています!

borderやpadding幅をwidrhに含める

Sass(コンパイル前)

.img{
    border: solid 10px;
    //content-box , border-box , padding-box
    @include box-sizing(border-box);
}

Css(コンパイル後)

 img {
  border: solid 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

引数を省略してもborder-boxになります。
border-boxは、paddingやborder幅をwidthに含める状態となる指定です。

widthを指定して、折り返したテキストを段組にする

Sass(コンパイル前)

.column
{
    width:500px;
    
    p{margin-top: 0;}
}

.two-columns{
    @include column-count(2);
}

.three-columns{
    @include column-count(3);
}

.withRule{
    @include column-rule(1px, dashed, #a00)
}

Css(コンパイル後)

 .column {
  width: 500px;
}
.column p {
  margin-top: 0;
}

.two-columns {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

.three-columns {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}

.withRule {
  -moz-column-rule: 1px dashed #a00;
  -webkit-column-rule: 1px dashed #a00;
  column-rule: 1px dashed #a00;
}

column-countは、決められた幅の中で、指定した数の分だけカラムを生成します。
例の場合は500pxの中でカラムを2つ、3つ生成しています。

IE10、Android OS 4.0~の対応で、他のモダンブラウザに関しては最新であれば問題なく使えます。

加えて、column-ruleをインクルードすることで、カラム間のボーダーの色やスタイルを指定できます。

背景画像の大きさを調節する

Sass(コンパイル前)

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

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

.half{
    @include background-size(50% 50%);
}

Css(コンパイル後)

.contain {
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
}

.cover {
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
}

.half {
  -moz-background-size: 50% 50%;
  -o-background-size: 50% 50%;
  -webkit-background-size: 50% 50%;
  background-size: 50% 50%;
}

containcover、数値でも細かく指定できます。引数を省略すると100% autoの指定になります。

要素を変形させる

Sass(コンパイル前)

//transform-origin
.apply-origin img{
    @include apply-origin(right bottom , 3D-only);
}

//transform-origin
.transform-origin img{
    @include transform-origin();
}

//transform:perspective()
.perspective{
    @include perspective(10em);
}

// transform : rotate()
.rotate img{
    @include rotate(5deg)
}
.rotate3d img{
    @include rotate3d(10 , 10 , 100);
}

// transform : translate()
.translate img{
    @include translate();//default 1em
}
.translateZ img{
    @include translateZ(10px);
}
.translate3d img{
    @include translate3d(50px , 50px , 100px);
}

// transform : skew()
.skew img{
    @include skew(); //default 5deg
}
.skewX img{
    @include skewX(10deg);
}
.skewY img{
    @include skewY(25deg);
}

Css(コンパイル後)

.apply-origin img {
  -moz-transform-origin: right bottom;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

.transform-origin img {
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.perspective {
  -moz-perspective: 10em;
  -webkit-perspective: 10em;
  perspective: 10em;
}

.rotate img {
  -moz-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

.rotate3d img {
  -moz-transform: rotate3d(10, 10, 100, 45deg);
  -webkit-transform: rotate3d(10, 10, 100, 45deg);
  transform: rotate3d(10, 10, 100, 45deg);
}

.translate img {
  -moz-transform: translate(1em, 1em);
  -ms-transform: translate(1em, 1em);
  -webkit-transform: translate(1em, 1em);
  transform: translate(1em, 1em);
}

.translateZ img {
  -moz-transform: translateZ(10px);
  -webkit-transform: translateZ(10px);
  transform: translateZ(10px);
}

.translate3d img {
  -moz-transform: translate3d(50px, 50px, 100px);
  -webkit-transform: translate3d(50px, 50px, 100px);
  transform: translate3d(50px, 50px, 100px);
}

.skew img {
  -moz-transform: skew(5deg, 5deg);
  -ms-transform: skew(5deg, 5deg);
  -webkit-transform: skew(5deg, 5deg);
  transform: skew(5deg, 5deg);
}

.skewX img {
  -moz-transform: skewX(10deg);
  -ms-transform: skewX(10deg);
  -webkit-transform: skewX(10deg);
  transform: skewX(10deg);
}

.skewY img {
  -moz-transform: skewY(25deg);
  -ms-transform: skewY(25deg);
  -webkit-transform: skewY(25deg);
  transform: skewY(25deg);
}

おなじみtransformプロパティですが、compassの手にかかればいとも簡単にベンダープレフィックス付きで指定できます。

 

いかがでしょう?

ほかにもありますが、比較的すぐに導入できて実践的なのは今回挙げたものが代表的かなー、といったところです。

ちなみに、compassドキュメントと「Sassの教科書」を参考にさせていただきました!

前回の記事もそうですが、僕はPreprosユーザーなので、コマンドラインやターミナルでSassをインストールしていない方でも差し支えなく使えるものばかり挙げています!

コマンドラインやターミナル(もしくはコンパイラの種類による?)を使えば、子要素まで書きだされてしまうcompass関数でも、デフォルトの子要素を自由に変更できたりします。
是非試してみてくださいー!

Sassについての記事、次回は、僕がよく使う自作ミックスインでも紹介しようかと思います。そんなに役に立ちませんが、乞うご期待!

 

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。(ポートフォリオ)Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。コーヒー友達募集中。