분기점은 변수로 만들고, @content로 내용이 비워져있는 믹스인을 작성
// Break Point $tablet: 768px; $laptop: 1020px; $desktop: 1400px; // Mixins @mixin tablet { @media (min-width: #{$tablet}) { @content; } } @mixin laptop { @media (min-width: #{$laptop}) { @content; } } @mixin desktop { @media (min-width: #{$desktop}) { @content; } }
.logo { width: 20px; @include desktop { width: 40px; } }