sass mixin @include

 

linear-gradient

@mixin gradient($base_color, $color1, $color2, $color3) {
  background-color: $base_color;
  background-image: linear-gradient(top, $base_color, $color1 50%, $color2 51%, $color3);
  background-image: -o-linear-gradient(top, $base_color, $color1 50%, $color2 51%, $color3);
  background-image: -ms-linear-gradient(top, $base_color, $color1 50%, $color2 51%, $color3);
  background-image: -webkit-linear-gradient(top, $base_color, $color1 50%, $color2 51%, $color3);
  background-image: -moz-linear-gradient(top, $base_color, $color1 50%, $color2 51%, $color3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($base_color), color-stop(0.50, $color1), color-stop(0.51, $color2), to($color3));
}

 

@include gradient( #ffb76b, #ffa73d, #ff7c00, #ff7f04);

 

 

radius

@mixin rounded($radius) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

@include rounded(8px);

 

 

radius : 미리 값지정

@mixin rounded($radius:10px) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

 

 

@include rounded;

mixin을 사용할 때 미리 값을 지정해 놓고 사용할 수도 있다. 그럼 불러올 때 이름만 include 시켜주면 된다.

text-shadow

@mixin text-shadow($horizOffset, $vertOffset, $blur, $color) {
    -webkit-text-shadow: $horizOffset $vertOffset $blur $color;  /* Saf3.0+, Chrome */
    -moz-text-shadow: $horizOffset $vertOffset $blur $color;  /* FF3.5+ */
    -ms-text-shadow: $horizOffset $vertOffset $blur $color; /* IE 10+ */
    -o-text-shadow: $horizOffset $vertOffset $blur $color;  /* Opera 10.5, IE9 */
    text-shadow: $horizOffset $vertOffset $blur $color;
 }