SCSS/SASS mixin으로 간편하게 CSS 스타일링을!@

 

SCSS/SASS mixin

SCSS/SASS mixin은 CSS3 스타일링을 간편하게 할 수 있도록 쓰이는데. 

@import 명령구를 이용해서 스타일시트를 꾸밀 수 있음.

아래는 scss/sass에서 사용되는 mixin 방법들~!

/*****
SCSS CSS 3 Property Maxin v 0.1
 
by Dele O
*******/
 
@mixin rounded($radius: 10px) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}
 
 
@mixin roundedSides($topLeft, $topRight, $bottomRight, $bottomLeft) {
	-moz-border-radius-topleft: $topLeft;
	-moz-border-radius-topright: $topRight;
	-moz-border-radius-bottomright: $bottomRight;
	-moz-border-radius-bottomleft: $bottomLeft;
	border-top-left-radius:$topLeft;
	border-top-right-radius: $topRight;
	border-bottom-right-radius: $bottomRight;
	border-bottom-left-radius: $bottomLeft; 
}
 
 
@mixin shadow( $off-y, $off-x, $blur, $color){
	  -moz-box-shadow: $off-y $off-x $blur $color; /* FF3.5+ */
  -webkit-box-shadow:  $off-y $off-x $blur $color; /* Saf3.0+, Chrome */
          box-shadow:  $off-y $off-x $blur $color; /* Opera 10.5, IE9 */
}
 
 
 
@mixin gradient($baseColor, $toColor){
  background-color:$baseColor;
  background-image: -moz-linear-gradient(top, $baseColor, $toColor); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, $baseColor),color-stop(1, $toColor));  /* Saf4+, Chrome */
  background-image: linear-gradient(top,$baseColor, $toColor);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='$baseColor', EndColorStr='$toColor');   /* IE6�IE9 */
}
 
 
@mixin trasition($property, $duration:0.3s, $function: ease-out){
	 -moz-transition: $property $durations $function;  /* FF3.7+ */
	 -o-transition: $property $durations $function;  /* Opera 10.5 */
  	-webkit-transition: $property $durations $function;  /* Saf3.2+, Chrome */
	transition: $property $durations $function; 
}
 
 
@mixin transform($scale, $rotate, $trans-x, $trans-y, $skew-x, $skew-y){	
	-moz-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
	-webkit-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
	-o-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
	-ms-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
	transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
 
}

http://snipplr.com/view/48401/