반응형
mobile, tablet, web, desktop...
모바일 태블랫 이런식으로 변수명을 정하는것 보다
모바일과 태블랫의 크기가 다양한 사이즈로 나오기때문에 사이즈로 알아볼수 있게 변수명을 정하는것이 좋다.
참고url : https://sass-guidelin.es/ko/#section-56
1 2 3 4 5 | $breakpoints: ( 'small': (min-width: 800px), 'medium': (min-width: 1000px), 'large': (min-width: 1200px), ); | cs |
참고 url : https://paulund.co.uk/media-query-sass-mixin
https://www.sitepoint.com/managing-responsive-breakpoints-sass/
브레이크포인트
@mixin respond-to($breakpoint) {
@if $breakpoint == "small" {
@media (min-width: 767px) {
@content;
}
}
@else if $breakpoint == "medium" {
@media (min-width: 992px) {
@content;
}
}
@else if $breakpoint == "large" {
@media (min-width: 1200px) {
@content;
}
}
}
768이하 xs
768이상 small
992이상 medium
1200이상 large
======================================================
http://howtohp.com/2012/07/20/sass-responsive-web-design/
부스스트랩에서 쓰는 방식
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // Defining values $screen-sm-min: 768px; $screen-xs-max: ($screen-sm-min - 1); $screen-md-min: 992px; $screen-sm-max: ($screen-md-min - 1); $screen-lg-min: 1200px; $screen-md-max: ($screen-lg-min - 1); // Usage @media (max-width: $screen-xs-max) { ... } @media (min-width: $screen-sm-min) { ... } @media (max-width: $screen-sm-max) { ... } @media (min-width: $screen-md-min) { ... } @media (max-width: $screen-md-max) { ... } @media (min-width: $screen-lg-min) { ... } | cs |
반응형
광고
광고
'sass' 카테고리의 다른 글
| @include rfs($btn-font-size, --#{$prefix}btn-font-size); (0) | 2024.11.01 |
|---|---|
| 사스 변수 오버라이드 (0) | 2024.10.17 |
| 부트스트랩 공통색상 변경 (2) | 2024.10.16 |
| bourbon (사스 믹스인 버번) (0) | 2016.12.05 |
| 스프라이트이미지 사스(반응형일때) (0) | 2016.10.12 |