Frontend/Sass(SCSS)
-
SCSS - 데이터 종류Frontend/Sass(SCSS) 2021. 5. 29. 15:16
$number: 1; // .5, 100px, 1em $string: bold; // relative, "./images/a.png" $color: red; // blue, #fff $boolean: true; // false $null: null; $list: orange, royalblue, yellow; $map: ( o: orange, r: royalblue, y: yellow ); 반복문 @each List와 Map 데이터를 반복할 때 사용 for in 문과 유사 $list: orange, royalblue, yellow; $map: ( o: orange, r: royalblue, y: yellow ); // SCSS @each $c in $list { .box { color: $c; } } @..
-
SCSS 문법(3) - 반복문, 함수, 가져오기Frontend/Sass(SCSS) 2021. 5. 29. 14:46
반복문 스타일을 반복적으로 출력 // through: 종료만큼 반복 @for $i from 1 through 3 { .box:nth-child(#{$i}) { width: 100px; } } // to: 종료 직전까지 반복 @for $i from 1 to 3 { .box:nth-child(#{$i}) { width: 100px; } } // SCSS @for $i from 1 through 3 { .box:nth-child(#{$i}) { width: 100px * $i; } } @for $i from 1 to 3 { .box:nth-child(#{$i}) { width: 100px * $i; } } // CSS (Compiled to) .box:nth-child(1) { width: 100px; } ...
-
SCSS 문법(2) - 변수, 연산, 재활용(Mixin)Frontend/Sass(SCSS) 2021. 5. 29. 03:43
변수(Variables) 반복적으로 사용되는 값을 변수로 지정 변수이름 앞에 $추가 ( $변수이름: 속성값; ) 유효범위는 {} 기준 변수가 재할당되면 그 이후에 사용되는 변수는 재할당 된 값으로 사용 (left 속성은 200px이 아닌 300px이 할당됨) // SCSS $globalSize: 100px; //전역변수 .container { $localSize: 200px; //지역변수 positon: fixed; top: $localSize; .item { $localSize: 300px; //재할당 width: $globalSize; height: $globalSize; transform: translateX($localSize); } left: $localSize; } // CSS (Compile..
-
SCSS 문법(1) - 주석, 중첩, 상위선택자 참조, 중첩된 속성Frontend/Sass(SCSS) 2021. 5. 29. 03:01
주석(Comment) // (컴파일되지 않는 주석) /* */ (컴파일 되는 주석) 중첩(Nestring) // SCSS .container { ul { li { font-size: 20px; .name { color: royalblue; } .age { color: orange; } } } } // CSS (Compiled to) .container ul li { font-size: 20px; } .container ul li .name { color: #4169e1; } .container ul li .age { color: orange; } 상위 선택자 참조(&) 중첩 안에서 & 키워드는 상위 선택자를 참조하여 치환 // SCSS .btn { position: absolute; &.active { ..
-
Sass(SCSS) 란?Frontend/Sass(SCSS) 2021. 5. 29. 01:52
CSS 전처리기(CSS Preprocessor) 표준CSS를 완전히 호환하는 CSS의 상위집합(Superset) CSS와 거의 같은 문법으로 Sass 기능을 지원 Sass와의 차이점은 {}(중괄호)와 ;(세미콜론)의 유무 // SCSS $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } // Sass $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color 참고 자료(References) https://sass-lang.co..