본문 바로가기
728x90
반응형

CSS/SASS17

[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.
[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.
[SCSS] 작성법 14 - SCSS 작성시 사용가능한 내장함수 [CSS/SASS] - [SCSS] 작성법 13 - 연산하는 값 사용하기 - 색상함수 mix(색1, 색2) : 색1과 색2를 섞은 색으로 나타납니다. lighten(색, %) : 색1을 %만큼 밝게 만들어줍니다. darken(색, %) : 색을 %만큼 어둡게 만들어줍니다. saturate(색, %) : 색상의 채도를 % 만큼 올립니다. desaturate(색, %) : 색상의 채도를 % 만큼 올립니다. grayscale(색) : 색상의 회색으로 변환합니다 invert(색) : 색을 반전시킵니다. rgba(색, 알파값) : 알파값(0-1) 투명도 지정 opacify(색,%) , fade-in(색,%) : 색상을 더 불투명하게 만듭니다. transparentize(색,%), fade-out(색,%) : 색상.. 2019. 6. 17.
728x90
반응형

티스토리툴바