.col-5{@include qw(50%);@media (max-width:576px){float: none;};}
.col-33{@include qw(100%/3);@media (max-width:576px){float: none;};}
각각 @media 주면, float: none 이 잘 실행 됩니다. 컴파일도 각각 아래와 같이
.col-5 {
float: left;
width: 50%;
border: 1px solid black;
text-align: center;
}
@media (max-width: 576px) {
.col-5 {
float: none;
}
}
.col-33 {
float: left;
width: 33.3333333333%;
border: 1px solid black;
text-align: center;
}
@media (max-width: 576px) {
.col-33 {
float: none;
}
컴파일 각각 되는 걸 확인 할 수 있습니다. 그런데,
%zx{@media (max-width:576px){float: none;};}
.col-5{@include qw(50%);@extend %zx;}
.col-33{@include qw(33.33%);@extend %zx;} 이러면,
@media (max-width: 576px) {
.col-33, .col-5 {
float: none;
}
}
.col-5 {
float: left;
width: 50%;
border: 1px solid black;
text-align: center;
}
.col-33 {
float: left;
width: 33.33%;
border: 1px solid black;
text-align: center;
} 컴파일 됐고, 문제 없어 보이는데, float: none; 실행이 안 됩니다.
@mixin 변수() 맨 처음 것처럼 각각 컴파일되서 실행이 잘 되는데,
@extend 로 할 때만 컴파일이 같이 되서 그런가 float: none; 실행이 안 됩니다.
도움 부탁드립니다. .. 감사합니다.
