第6章 Sassを更に便利にする Compass

6-3 Compassのミックスインを使う

CSS3モジュール

角丸

初期値

.boxA {
	@include border-radius;
}

.boxA {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

値を入れた場合

.boxB {
	@include border-radius(10px 5px);
}

.boxB {
  -webkit-border-radius: 10px 5px;
  -moz-border-radius: 10px 5px;
  -ms-border-radius: 10px 5px;
  -o-border-radius: 10px 5px;
  border-radius: 10px 5px;
}

値を入れた場合（カンマ区切り）

.boxC {
	@include border-radius(10px, 5px);
}

.boxC {
  -webkit-border-radius: 10px 5px;
  -moz-border-radius: 10px / 5px;
  border-radius: 10px / 5px;
}

box-shadow

初期値

.boxA {
	@include box-shadow;
}

.boxA {
  -webkit-box-shadow: 0px 0px 5px #333333;
  -moz-box-shadow: 0px 0px 5px #333333;
  box-shadow: 0px 0px 5px #333333;
}

値を入れた場合

.boxB {
	@include box-shadow(1px 2px 3px #444);
}

.boxB {
  -webkit-box-shadow: 1px 2px 3px #444444;
  -moz-box-shadow: 1px 2px 3px #444444;
  box-shadow: 1px 2px 3px #444444;
}

text-shadow

.boxA {
	@include text-shadow;
}
.boxB {
	@include text-shadow(4px 5px 6px #777);
}

.boxA {
  text-shadow: 0px 0px 1px #aaaaaa;
}
.boxB {
  text-shadow: 4px 5px 6px #777777;
}

background-size

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

.boxA {
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: 100% auto;
}
.boxB {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

background-clip

.boxA {
	@include background-clip;	
}
.boxB {
	@include background-clip(border-box);	
}

.boxA {
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
.boxB {
  -webkit-background-clip: border;
  -moz-background-clip: border;
  background-clip: border-box;
}

Ellipses

.boxA {
	@include ellipsis;
}

.boxA {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.boxB {
	@include ellipsis(false);
}

.boxB {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

Transition

.boxA {
	@include transition(width 2s linear 0.5s);
}

.boxA {
  -webkit-transition: width 2s linear;
  -webkit-transition-delay: 0.5s;
  -moz-transition: width 2s linear 0.5s;
  -o-transition: width 2s linear 0.5s;
  transition: width 2s linear 0.5s;
}

.boxB {
	@include transition-property(width);
	@include transition-duration(2s);
	@include transition-timing-function(linear);
	@include transition-delay(0.5s);
}

.boxB {
  -webkit-transition-property: width;
  -moz-transition-property: width;
  -o-transition-property: width;
  transition-property: width;
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-timing-function: linear;
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-delay: 0.5s;
  -moz-transition-delay: 0.5s;
  -o-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

グラデーション

.boxA {
	@include background(linear-gradient(white, #a00));
}
.boxB {
	@include background(radial-gradient(white, #b00)); 
}

.boxA {
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #aa0000));
  background: -webkit-linear-gradient(#ffffff, #aa0000);
  background: -moz-linear-gradient(#ffffff, #aa0000);
  background: -o-linear-gradient(#ffffff, #aa0000);
  background: linear-gradient(#ffffff, #aa0000);
}
.boxB {
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #ffffff), color-stop(100%, #bb0000));
  background: -webkit-radial-gradient(#ffffff, #bb0000);
  background: -moz-radial-gradient(#ffffff, #bb0000);
  background: -o-radial-gradient(#ffffff, #bb0000);
  background: radial-gradient(#ffffff, #bb0000);
}

.boxC {
	@include background(linear-gradient(left, white, #c00)); 
}
.boxD {
	@include background(linear-gradient(white, green, #d00));
}

.boxC {
  background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ffffff), color-stop(100%, #cc0000));
  background: -webkit-linear-gradient(left, #ffffff, #cc0000);
  background: -moz-linear-gradient(left, #ffffff, #cc0000);
  background: -o-linear-gradient(left, #ffffff, #cc0000);
  background: linear-gradient(left, #ffffff, #cc0000);
}
.boxD {
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(50%, #008000), color-stop(100%, #dd0000));
  background: -webkit-linear-gradient(#ffffff, #008000, #dd0000);
  background: -moz-linear-gradient(#ffffff, #008000, #dd0000);
  background: -o-linear-gradient(#ffffff, #008000, #dd0000);
  background: linear-gradient(#ffffff, #008000, #dd0000);
}

.boxE {
	@include background(linear-gradient(white, green, #e00));
}
.boxF {
	@include background(linear-gradient(white, green 40%, blue 60%, #f00));
}

.boxE {
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(50%, #008000), color-stop(100%, #ee0000));
  background: -webkit-linear-gradient(#ffffff, #008000, #ee0000);
  background: -moz-linear-gradient(#ffffff, #008000, #ee0000);
  background: -o-linear-gradient(#ffffff, #008000, #ee0000);
  background: linear-gradient(#ffffff, #008000, #ee0000);
}
.boxF {
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(40%, #008000), color-stop(60%, #0000ff), color-stop(100%, #ff0000));
  background: -webkit-linear-gradient(#ffffff, #008000 40%, #0000ff 60%, #ff0000);
  background: -moz-linear-gradient(#ffffff, #008000 40%, #0000ff 60%, #ff0000);
  background: -o-linear-gradient(#ffffff, #008000 40%, #0000ff 60%, #ff0000);
  background: linear-gradient(#ffffff, #008000 40%, #0000ff 60%, #ff0000);
}

.boxF-svg {
	$experimental-support-for-svg: true;
	@include background(linear-gradient(left, white, green 40%, blue 60%, #f00));
}

.boxF-svg {
  background: url('data:image/svgI3Agb2Zmc2V0PSI2M 〜省略〜 QpIiAvPjwvc3ZnPiA=');
  background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ffffff), color-stop(40%, #008000), color-stop(60%, #0000ff), color-stop(100%, #ff0000));
  background: -webkit-linear-gradient(left, #ffffff, #008000 40%, #0000ff 60%, #ff0000);
  background: -moz-linear-gradient(left, #ffffff, #008000 40%, #0000ff 60%, #ff0000);
  background: -o-linear-gradient(left, #ffffff, #008000 40%, #0000ff 60%, #ff0000);
  background: linear-gradient(left, #ffffff, #008000 40%, #0000ff 60%, #ff0000);
}

.boxG {
	@include filter-gradient(#FFFFFF, #bb0000, horizontal);
}

#boxG {
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFFFFFF', endColorstr='#FFBB0000');
}

opacity

.boxA {
	 @include opacity(0.8);
}

.boxA {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}

inline-block

.boxA {
	@include inline-block;
}

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

Webフォント

.boxA {
	@include font-face("Source Code Pro", font-files("sourcecodepro.ttf", "sourcecodepro.otf", "sourcecodepro.eot"));
}

.boxA {
  @font-face {
    font-family: "Source Code Pro";
    src: url('/css/fonts/sourcecodepro.ttf') format('truetype'), url('/css/fonts/sourcecodepro.otf') format('opentype'), url('/css/fonts/sourcecodepro.eot') format('embedded-opentype');
}
}

Utilitiesモジュール

リンクカラー

.boxA {
	@include link-colors(#111, #222, #333, #444, #555);
}

.boxA {
  color: #111111;
}
.boxB:visited {
  color: #444444;
}
.boxB:focus {
  color: #555555;
}
.boxB:hover {
  color: #222222;
}
.boxB:active {
  color: #333333;
}

Clearfix

.boxA {
	@include clearfix;
}

.boxA {
  overflow: hidden;
  *zoom: 1;
}

インラインリスト

line-list

.listA {
	@include inline-list;
}

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

line-block-list

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

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

inline-horizontal-list

.listC {
	@include horizontal-list;
}

/* @include inline-horizontal-list */
.listC {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  *zoom: 1;
}
.listC li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  white-space: nowrap;
  display: inline;
  float: left;
  padding-left: 4px;
  padding-right: 4px;
}
.listC li:first-child, .listC li.first {
  padding-left: 0;
}
.listC li:last-child {
  padding-right: 0;
}
.listC li.last {
  padding-right: 0;
}

リストアイコン

.listA {
	@include pretty-bullets("arrow.png");
}

.listA {
  margin-left: 0;
}
.listA li {
  padding-left: 14px;
  background: url('../img/arrow.png') no-repeat 2px 4px;	(※1)
  list-style-type: none;
}

min-width / min-height

.boxA {
	@include min-width(100px);
}
.boxB {
	@include min-height(200px);	
}

.boxA {
  min-width: 100px;
  width: auto !important;
  width: 100px;
}

.boxB {
  min-height: 200px;
  height: auto !important;
  height: 200px;
}

色の対比

.boxA {
	@include contrasted(#ccc);
}
.boxB {
	@include contrasted(#333);
}

.boxA {
  background-color: #cccccc;
  color: black;
}
.boxB {
  background-color: #333333;
  color: white;
}

.boxA {
	@include contrasted(hsl(0, 0, 30%));
}
.boxB {
	@include contrasted(hsl(0, 0, 29%));
}

.boxA {
  background-color: #4d4d4d;
  color: black;
}
.boxB {
  background-color: #4a4a4a;
  color: white;
}

Typographyモジュール

Vertical Rhythm

$base-font-size : 16px;
$base-line-height : 24px;

ベースフォントサイズ12px、ベースライン18pxで設定した場合

$base-font-size : 12px;
$base-line-height : 18px;

@include establish-baseline;

* html {
  font-size: 75%;
}

html {
  font-size: 12px;
  line-height: 1.5em;
}

見出しのフォントサイズを設定

第一引数のみ指定した場合

h1 {
	@include adjust-font-size-to(36px);
}

h1 {
  font-size: 3em;
  line-height: 1.5em;
}

第二引数まで指定した場合

h1 {
	@include adjust-font-size-to(36px, 2);
}

h1 {
  font-size: 3em;
  line-height: 1em;
}

文字の上のスペースを設定

laderミックスイン

h2 {
	@include leader;
}

h2 {
  margin-top: 1.5em;
}

h2 {
	@include leader(2);
}

h2 {
  margin-top: 3em;
}

padding-leaderミックスイン

h3 {
	@include padding-leader(2);
}

h3 {
	@include padding-leader(2);
}

文字の下のスペースを設定

trailerミックスイン

h4 {
	@include trailer(-0.5);
}

h4 {
  margin-bottom: -0.75em;
}

padding-trailerミックスイン

h5 {
	@include padding-trailer(3);
}

h5 {
  padding-bottom: 4.5em;
}

上下のスペースを設定

h6 {
	@include rhythm(0, 1, 2, 3);	
}

h6 {
  margin-top: 0em;
  padding-top: 1.5em;
  padding-bottom: 3em;
  margin-bottom: 4.5em;
}

画像置換

replace-textミックスイン

.boxA {
	@include replace-text("text.png", 5px, 10px);
}

.boxA {
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  background-image: url('../img/replace.png');	(※1)
  background-repeat: no-repeat;
  background-position: 5px 10px;
}

replace-text-with-dimensionsミックスイン

.boxB {
	@include replace-text-with-dimensions("sass.gif", left, 10px);
}

.boxB {
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  background-image: url('../img/replace.png');
  background-repeat: no-repeat;
  background-position: left 10px;
  width: 100px;
  height: 300px;
}

hide-textミックスイン、squish-textミックスイン

.boxC {
	@include hide-text;
}
.boxD {
	@include squish-text;
}

.boxC {
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
}
.boxD {
  font: 0/0 serif;
  text-shadow: none;
  color: transparent;
}