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

5-2 ブラウザ対応で使える

Sassで使えるCSSハックと使えないCSSハック

html > /**/ body p {
	margin: 100px;
}

p {
	/margin: 100px;
}

// IE6 用のハック
* html #main { background: blue; }
#main { _background: blue; }

// IE7 用のハック
*:first-child + html #main { background: blue; }

// IE6, 7 用のハック
#main { *background: blue; }

// IE7, 8, 9 用のハック
#main { background: blue\9; }

// IE9 用のハック
:root #main { background: blue\9; }

// Firefox 用のハック
#main, x:-moz-any-link { background: red; }
@-moz-document url-prefix( ) {
	#main { background: red; }
}

// Chrome、Safari 用のハック
@media screen and (-webkit-min-device-pixel-ratio : 0 ) {
	#main { background: green; }
}

Sassの意外な罠！？
セレクタが4,095個を超えるとIE6～9で認識されない

table { ... }
p.note,
#main .att { ... }
#wrap #main article p { ... }

#test { background-color: red; }
#test { background-color: red; }
#test { background-color: red; }
#test { background-color: red; }

...（略）...

#test { background-color: blue; }
#test { background-color: blue; }
#test { background-color: blue; }
#test { background-color: white; }

@import url('example-blessed3.css?z=0000000000000');
@import url('example-blessed2.css?z=0000000000000');
@import url('example-blessed1.css?z=0000000000000');

#test { background-color: white; }

@each を使ってベンダープレフィックスを自動で付与する

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

a {
	@each $prefix in $prefixList {
		#{$prefix}transition: all 0.3s linear;
	}
}

a {
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

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

a {
	@each $prefix in $prefixList {
		#{$prefix}transition: all 0.3s linear;
	}
}

#main {
	padding: 20px;
	background: #efefef;
	@each $prefix in $prefixList {
		#{$prefix}border-radius: 5px;
		#{$prefix}box-shadow: 1px 1px 5px rgba(black, .3);
	}
}

a {
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

#main {
  padding: 20px;
  background: #efefef;
  -webkit-border-radius: 5px;
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  -moz-border-radius: 5px;
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}

// mixin

@mixin transition($value) {
	@each $prefix in $prefixList {
		#{$prefix}transition: $value;
	}
}

@mixin border_radius($value: 3px) {
	@each $prefix in $prefixList {
		#{$prefix}border-radius: $value;
	}
}

@mixin box_shadow($value...) {
	@each $prefix in $prefixList {
		#{$prefix}box-shadow: $value;
	}
}

@mixin text_shadow($value...) {
	@each $prefix in $prefixList {
		#{$prefix}text-shadow: $value;
	}
}

a {
	@include transition(all 0.5s linear);
}

#main {
	padding: 20px;
	background: #efefef;
	@include box_shadow(1px 1px 5px rgba(black, .3));
	@include border_radius();

	h2 {
		font-size: 160%;
		@include text_shadow(0 1px 0 #fff, 0 -1px 0 #fff);
	}
}

面倒なCSS3のアニメーション指定をカンタンにする

@mixin keyframes($animaName) {
	@-webkit-keyframes $animaName {
		@content;
	}
	@-moz-keyframes $animaName {
		@content;
	}
	@-o-keyframes $animaName {
		@content;
	}
	@-ms-keyframes $animaName {
		@content;
	}
	@keyframes $animaName {
		@content;
	}
}

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

body:after {
	content: "";
	width: 100px;
	height: 50px;
	position: absolute;
	top: 25px;
	right: 10%;
	z-index: 0;
	background: url(../img/neko.png) no-repeat;
	@each $prefix in $prefixList {
		#{$prefix}animation-duration: 3.5s;
		#{$prefix}animation-timing-function: linear;
		#{$prefix}animation-iteration-count: 1;
		#{$prefix}animation-name: headerBGAnima;
	}
}

@include keyframes(headerBGAnima) {
	0% {
		opacity: 0;
		top: 350px;
		right: 78%;
	}
	50% {
		opacity: 1;
		top: 25px;
		right: 10%;
	}
	100% {
		top: 25px;
		right: 10%;
	}
}

body:after {
  content: "";
  width: 100px;
  height: 50px;
  position: absolute;
  top: 25px;
  right: 10%;
  z-index: 0;
  background: url(../img/neko.png) no-repeat;
  animation-duration: 3.5s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-name: headerBGAnima;
  background: url(../img/neko.png) no-repeat;
}

@-webkit-keyframes headerBGAnima {
  0% {
    opacity: 0;
    top: 350px;
    right: 78%;
  }
  50% {
    opacity: 1;
    top: 25px;
    right: 10%;
  }
  100% {
    top: 25px;
    right: 10%;
  }
}

@-moz-keyframes headerBGAnima {
  0% {
    opacity: 0;
    top: 350px;
    right: 78%;
  }
  50% {
    opacity: 1;
    top: 25px;
    right: 10%;
  }
  100% {
    top: 25px;
    right: 10%;
  }
}

@-o-keyframes headerBGAnima {
  0% {
    opacity: 0;
    top: 350px;
    right: 78%;
  }
  50% {
    opacity: 1;
    top: 25px;
    right: 10%;
  }
  100% {
    top: 25px;
    right: 10%;
  }
}

@-ms-keyframes headerBGAnima {
  0% {
    opacity: 0;
    top: 350px;
    right: 78%;
  }
  50% {
    opacity: 1;
    top: 25px;
    right: 10%;
  }
  100% {
    top: 25px;
    right: 10%;
  }
}

@keyframes headerBGAnima {
  0% {
    opacity: 0;
    top: 350px;
    right: 78%;
  }
  50% {
    opacity: 1;
    top: 25px;
    right: 10%;
  }
  100% {
    top: 25px;
    right: 10%;
  }
}

IEの対応をしつつ「rem」を使ってフォントサイズを指定する

body {
	font-size: 12px;
	font-size: 0.75rem;
}

@mixin fz($size) {
	font-size: $size + px;
	font-size: ($size / 10) * 1rem;
}

html {
	font-size: 62.5%;
}

.item {
	@include fz(18);
}
.box {
	@include fz(26);
}

html {
  font-size: 62.5%;
}
.item {
  font-size: 18px;
  font-size: 1.8rem;
}
.box {
  font-size: 26px;
  font-size: 2.6rem;
}

@for $i from 8 through 40 {
	%fz#{$i} {
		font-size: $i + px;
		font-size: ($i / 10) * 1rem;
	}
}

html {
	font-size: 62.5%;
}
aside {
	@extend %fz18;
}
.item {
	@extend %fz18;
}
.box {
	@extend %fz26;
}

html {
  font-size: 62.5%;
}
aside, .item {
  font-size: 18px;
  font-size: 1.8rem;
}
.box {
  font-size: 26px;
  font-size: 2.6rem;
}

ブラウザのインスペクタでSCSSの位置（行数）を知る

sass --line-comments --watch sass

/* line 2, test.scss */
#main {
  width: 600px;
}
/* line 5, test.scss */
#main p {
  margin: 0 0 2em;
}
/* line 7, test.scss */
#main p em {
  color: #f00;
}
/* line 11, test.scss */
#main small {
  font-size: small;
}

sass --debug-info --watch sass

@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/impress\/sass\/test\.scss}line{font-family:\000032}}
#main {
  width: 600px;
}
@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/impress\/sass\/test\.scss}line{font-family:\000035}}
#main p {
  margin: 0 0 2em;
}
@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/impress\/sass\/test\.scss}line{font-family:\000037}}
#main p em {
  color: #f00;
}
@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/impress\/sass\/test\.scss}line{font-family:\0000311}}
#main small {
  font-size: small;
}

sass --sourcemap  --watch sass

#main {
  width: 600px;
}
#main p {
  margin: 0 0 10em;
}
#main p em {
  color: #f00;
}
#main small {
  font-size: small;
}

/*@ sourceMappingURL=test.css.map */

#main{width:600px}#main p{margin:0 0 10em}#main p em{color:#f00}#main small{font-size:small}
/*@ sourceMappingURL=test.css.map */

5-2 ブラウザ対応で使える

Sassで使えるCSSハックと使えないCSSハック

Sassの意外な罠！？セレクタが4,095個を超えるとIE6～9で認識されない

@each を使ってベンダープレフィックスを自動で付与する

面倒なCSS3のアニメーション指定をカンタンにする

IEの対応をしつつ「rem」を使ってフォントサイズを指定する

ブラウザのインスペクタでSCSSの位置（行数）を知る

Sassの意外な罠！？
セレクタが4,095個を超えるとIE6～9で認識されない