공부한다/sass
-
@import와 @use, @forward공부한다/sass 2021. 4. 9. 22:27
@import와 @use @import와 @use는 여러 페이지에서 공통으로 사용할 mixin, function, variable 등을 다른 scss 파일에서 끌어올 때 사용한다. @import는 앞에서 말한 모든 것들을 전역으로 가져오기 때문에, css 파일이 꼬였을 경우에 어디서 잘못되었는지 알기 어렵다. @use는 이 단점을 개선하고자 나온 문법이다. @import와 @use는 어떻게 다른가? @import와 마찬가지로 @use는 스타일시트 내에서 좀더 세분화하여 세분화하여 끌어올 수 있다. _mixin.scss 파일을 @import와 @use를 사용하여 불러온다고 가정해보자. (vscode의 live sass compiler를 사용하여 컴파일 하였는데, 업데이트 되지 않아 @use의 결과는 확인할..
-
@each공부한다/sass 2020. 12. 29. 19:17
코드를 여러줄 작성할 필요 없이 변수값을 받아서 스타일을 꾸밀 수 있다. 엄청 간단하고만요😀 @each ABCDEFG ABCDEFG ABCDEFG $sizes: 13px, 20px, 50px; @each $size in $sizes { .font-#{$size} { font-size: $size; } } 변수값과 클래스명의 일부를 같게 지정해줘야해서 보기에 좋지 않다고 생각했는데... key,value를 이용해서 사용하는 방법이 있다! 두두둥😗 그것은 아래의 map활용을 봅시다 map을 활용한 @each 이전 예제의 코드를 이런식으로 변경 가능! ABCDEFG ABCDEFG ABCDEFG $sizes: (13:13px, 20:20px, 50:50px); @each $key, $size in $sizes ..