TIL 27 SCSS(5) Mixins PLUS

Awesome Mixins and Conclusions

mixins에는 @content 라는 것이 있다.

○ @content

1. _Awesome Mixins.scss

@mixin responsive {
  @content;
}

2. style.scss

button {
  @extend %button;
    border: none;
}
위와 같이 작성하였을때 

button {
  @extend %button;
  @include responsive {
    border: none;
  }
}
이와 같이 변경하게되면

@mixin responsive {
  @content;
}
안에 있는  @content => border: none;  되게된다.

@mixin responsive {
	border : none;
}

Example

1. _Awesome Mixins.scss

$minIphone: 500px;
$maxIphone: 690px;
$minTablet: $minIphone + 1;
$maxTablet: 1120px;


@mixin responsive($device) {
  @if $device== "iphone" {
    @media screen and (min-width: $minIphone) and (max-width: $maxIphone) {
      @content;
    }
  } @else if $device== "tablet" {
    @media screen and (min-width: $minTablet) and (max-width: $maxTablet) {
      @content;
    }
  } @else if $device== "iphone-l" {
    @media screen and (min-width: $minIphone) and (max-width: $maxIphone) {
      @content;
    }
  } @else if $device== "ipad-l" {
    @media screen and (min-width: $minTable) and (orientation: landscape) {
      @content;
    }
  }
}

2. style.css

p {
	color:blue;
	@include responsive("iphone") {
	color:yellow;
   }
	@include responsive("tablet") {
	color:red;
   }	
	@include responsive("iphone-l") {
	color:green;
   }
	@include responsive("ipad-l") {
	color:black;
   }
}

위 코드 처럼 디바이스의 종류에따라 해당 color 색깔이 변하게 끔 만들 수 있게 되는 것이다.