SCSS Mixin(믹스인); 활용

 

: 브라우저마다 지원하기 위해 활용

---

| border-radius

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

 

| box-shadow

@mixin shadows($x, $y, $blur, $color) {
    -webkit-box-shadow: $x, $y, $blur, $color;
    -moz-box-shadow: $x, $y, $blur, $color;
    box-shadow: $x, $y, $blur, $color;
}

 

| linear-gradientx

@mixin linear-gradient($from, $to) {

    //하위 브라우저 
    background-color: $to;

    //Mozilla Firefox
    background-image: -moz-linear-gradient($from, $to);

    //Opera
    background-image: -o-linear-gradient($from, $to);

    //WebKit (Safari 4+, Chrom 1+)
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, $from), color-stop(1, $to));

    //Webkit (Chrome 11+)
    background-image: -webkit-linear-gradient($from, $to);

    // IE10
    background-image: -ms-linear-gradient($from, $to);

    //W3C
    background-color: linear-gradient($from, $to);
}

---