第5章現場で使える実践Sassコーディング

5-4 スマホ・マルチデバイスで使える

スマホサイトでよく見る、リストの矢印をミックスインで管理する

$setPrefix: -webkit-, -moz-, -o-, null;

// リンクリスト用の→矢印
@mixin linkIcon($color: #333){
	&:before {
		content: "";
		position: absolute;
		top: 50%;
		right: 15px;
		width: 10px;
		height: 10px;
		margin-top: -7px;
		border-top: 3px solid $color;
		border-right: 3px solid $color;
		@each $prefix in $setPrefix {
			#{$prefix}transform: rotate(45deg);
		}
	}
}

ul.linkList {
	margin: 20px;
	li {
		list-style: none;
		margin: 0 0 1px;
		a {
			position: relative;
			display: block;
			padding: 15px {
				right: 27px;
			}
			background: #eee;
			color: #333;
			text-decoration: none;
			@include linkIcon();
		}
	}
}

ul.linkList {
  margin: 20px;
}
ul.linkList li {
  list-style: none;
  margin: 0 0 1px;
}
ul.linkList li a {
  position: relative;
  display: block;
  padding: 15px;
  padding-right: 27px;
  background: #eee;
  color: #333;
  text-decoration: none;
}
ul.linkList li a:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-top: 3px solid rgba(0, 0, 139, 0.8);
  border-right: 3px solid rgba(0, 0, 139, 0.8);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

Retinaディスプレイなど、高解像度端末の対応を楽にする

// 付与するベンダープレフィックス
$setPrefix: -webkit-, -moz-, -o-, null;

// background-size
@mixin bg_size($w, $h: auto) {
	@each $prefix in $setPrefix {
		#{$prefix}background-size: $w $h;
	}
}

body {
	background: #fff url(../img/bg_logo.png) no-repeat fixed;
	@media screen and (-webkit-min-device-pixel-ratio: 1.5),
	(min-resolution: 2dppx) {
		@include bg_size(690px / 2, auto);
	}
}

body {
  background: white url(../img/bg_logo.png) no-repeat fixed;
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) {
  body {
    -webkit-background-size: 345px auto;
    -moz-background-size: 345px auto;
    -o-background-size: 345px auto;
    background-size: 345px auto;
  }
}

レスポンシブWebデザイン対応で楽をするため、@content を活用する

@media only screen and (min-width : 321px) {
	#main {
		margin: 0;
	}
}
@media all and (orientation:landscape) {
	#main {
		margin: 0;
	}
}

@mixin yoko {
	@media all and (orientation:landscape) {
		@content;
	}
}

@mixin tate {
	@media all and (orientation:portrait) {
		@content;
	}
}

.item {
	width: 50%;
	@include tate {
		width: 100%;
	}
	@include yoko {
		width: 25%;
	}
	.image {
		@include tate {
			width: 150px;
		}
		@include yoko {
			float: left;
		}
	}
}

.item {
  width: 50%;
}
@media all and (orientation: portrait) {
  .item {
    width: 100%;
  }
}
@media all and (orientation: landscape) {
  .item {
    width: 25%;
  }
}
@media all and (orientation: portrait) {
  .item .image {
    width: 150px;
  }
}
@media all and (orientation: landscape) {
  .item .image {
    float: left;
  }
}

// ブレイクポイントを設定
$bp-tablet: 1024px;
$bp-sp: 640px;
$bp-iphone: 320px;

// メディアクエリ用のミックスイン
@mixin media($media-width) {
	@if $media-width == sp {
		@media only screen and (max-width: $bp-sp) {
			@content;
		}
	}
	@else if $media-width == iphone {
		@media only screen and (max-width: $bp-iphone) {
			@content;
		}
	}
	@else if $media-width == tablet {
		@media only screen and (max-width: $bp-tablet) {
			@content;
		}
	}
}

#main {
	float: left;
	width: 610px;
	padding: 15px;
	background: #f1f1f1;
	@include media(tablet) {
		float: none;
		margin: 0 auto;
	}
	@include media(sp) {
		width: auto;
		margin: 0 10px;
	}
	@include media(iphone) {
		width: 100%;
		margin: 0;
	}
}

#main {
  float: left;
  width: 610px;
  padding: 15px;
  background: #f1f1f1;
}
@media only screen and (max-width: 1024px) {
  #main {
    float: none;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 640px) {
  #main {
    width: auto;
    margin: 0 10px;
  }
}
@media only screen and (max-width: 320px) {
  #main {
    width: 100%;
    margin: 0;
  }
}