728x90 반응형 CSS127 [SCSS]반응형 mixin으로 만들어서 쓰기 $mobile: 780px; $tablet-min: 781px; $tablet-max: 1023px; $desktop: 1024px; @mixin mobile{ @media (max-width: $mobile){ @content; } } @mixin tablet{ @media (min-width: $tablet-min) and (max-width: $tablet-max){ @content; } } @mixin desktop{ @media (min-width: $desktop){ @content; } } 2022. 8. 2. [SCSS] flex mixin 만들기 참고 [CSS/CSS 기초] - flex 크로스 브라우징 / 호환성 이슈 해결 / 모든 브라우저 적용 flex 크로스 브라우징 / 호환성 이슈 해결 / 모든 브라우저 적용 https://velog.io/@nemo/css-flex-support [CSS] 최신 flex 호환성 이슈 해결 방법 현재 대부분 브라우저에서 flex가 지원된다. 하지만 아직은 접두사를 사용하여야 지원이 되는 경우도 있고, IE처럼 아직도 완벽 gahyun-web-diary.tistory.com @mixin flex-row($dir ,$align, $justify) { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; @if($dir == ro.. 2022. 8. 2. flex 크로스 브라우징 / 호환성 이슈 해결 / 모든 브라우저 적용 https://velog.io/@nemo/css-flex-support [CSS] 최신 flex 호환성 이슈 해결 방법 현재 대부분 브라우저에서 flex가 지원된다. 하지만 아직은 접두사를 사용하여야 지원이 되는 경우도 있고, IE처럼 아직도 완벽하게 지원되지 않는 경우도 있다. 크로스 브라우징을 위해 flex 호환 velog.io 2022. 8. 2. [SCSS]@mixin / @function/@extend 차이 - @mixin 사용법 @mixin 믹스인이름(매개변수){ 스타일; } @include 믹스인이름(매개변수); //정의된 내용만 사용 또는 @include 믹스인이름(매개변수){ 스타일; }; // 정의된내용 + 추가 스타일 적용 스타일의 묶음을 재사용할때 사용 - function @function 함수이름(매개변수){ 계산식 @return 결과값; } 값을 반환한다 -@extend @extend 선택자 @mixin과 @extend 의 차이 한방에 이해할수 있는 글 https://13akstjq.github.io/sass/2020/02/22/mixin%EA%B3%BC-extend-%EC%95%8C%EB%A7%9E%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0.html .. 2022. 8. 1. 이전 1 2 3 4 5 6 7 8 ··· 32 다음 728x90 반응형