SCSS3 [SCSS] SCSS 데이터 종류, 반복문(@each), 재활용(@content) 데이터 종류 반복문 @each // List Data $fruits: (apple, orange, banana, mango); .fruits { @each $fruit in $fruits { li.#{$fruit} { background: url("/images/#{$fruit}.png"); } } } .fruits li.apple { background: url("/images/apple.png"); } .fruits li.orange { background: url("/images/orange.png"); } .fruits li.banana { background: url("/images/banana.png"); } .fruits li.mango { background: url("/images/man.. 2023. 2. 8. [SCSS] SCSS 재활용(Mixins), 반복문(@for), 함수, 가져오기(@import) 재활용 선언하기 @mixin @mixin large-text { font-size: 22px; font-weight: bold; font-family: sans-serif; color: orange; } 포함하기 @include h1 { @include large-text; } 인수 사용 @mixin dash-line($width: 1px, $color: black) { border: $width dashed $color; } .box1 { @include dash-line; } .box2 { @include dash-line(4px); } .box1 { border: 1px dashed black; } .box2 { border: 4px dashed black; } 키워드 인수 @mixin 믹스인이름(.. 2023. 2. 8. [SCSS] SCSS 개요, 주석, 중첩, 변수 SCSS CSS 전(예비)처리기 https://heropy.blog/2018/01/31/sass/ Sass(SCSS) 완전 정복! Style(CSS) 작업 시 필수가 되어버린 CSS Preprocessor(전처리기) Sass(SCSS)에 대해서 이해하고, CSS로 컴파일하는 방법부터 자세한 SCSS 문법까지 살펴봅니다. heropy.blog 주석 // 컴파일되지 않는 주석 /* 컴파일되는 주석 */ 중첩 .section { width: 100%; .list { padding: 20px; li { float: left; } } } 상위 선택자 참조 .fs { &-small { font-size: 12px; } } .fs-small { font-size: 12px; } 중첩된 속성 .box { font: {.. 2023. 2. 8. 이전 1 다음
