반응형 Style Sheets/Sass(SCSS)9 [SCSS] 반복문 (@for / @each / @while) @for @for는 through를 사용하는 방법과 to를 사용하는 방법으로 나뉜다. through 방식은 마지막 종료 숫자를 포함하며, to의 경우에는 마지막 종료 숫자를 포함하지 않는다. $base-color: #036; @for $i from 1 through 3 { ul:nth-child(3n + #{$i}) { background-color: lighten($base-color, $i * 5%); } } @for $i from 1 to 3 { li:nth-child(3n + #{$i}) { background-color: lighten($base-color, $i * 5%); } } to css /* use through */ ul:nth-child(3n + 1) { background-colo.. 2022. 11. 3. [SCSS] 조건문 (@if / @else if / @else) @if 흔히 알고 있는 if문으로 true일 경우 실행된다. @mixin avatar($size, $circle: false) { width: $size; height: $size; @if $circle { border-radius: $size / 2; } } .square-av { @include avatar(100px, $circle: false); } .circle-av { @include avatar(100px, $circle: true); } to css .square-av { width: 100px; height: 100px; } .circle-av { width: 100px; height: 100px; border-radius: 50px; } 그리고 추가적으로 삼항 연산자 역시 사용할 수 있.. 2022. 6. 25. [SCSS] 함수 (@function ~ @return) @function @function은 @mixin과 마찬가지로 재사용을 위해 사용된다. 하지만 @mixin과의 차이점은 @mixin은 style markup을 반환하지만, @function은 @return을 통하여 값을 반환한다. $max-width: 980px; @function columns($number: 1, $columns: 12) { @return $max-width * ($number / $columns) } .box_group { width: $max-width; .box1 { width: columns(); // 1 } .box2 { width: columns(8); } .box3 { width: columns(3); } } to css .box_group { /* 총 너비 */ widt.. 2022. 6. 24. [SCSS] @mixin 과 @include @mixin and @include @mixin은 스타일 시트 전체에서 재사용할 css 선언 그룹을 정의하는 아주 훌륭한 기능이다. @mixin을 사용하여 선언 하고 @include를 통해 사용한다. @mixin reset-list { margin: 0; padding: 0; list-style: none; } @mixin horizontal-list { @include reset-list; li { display: inline-block; margin: { left: -2px; right: 2em; } } } nav ul { @include horizontal-list; } to css nav ul { margin: 0; padding: 0; list-style: none; } nav ul li { d.. 2022. 6. 24. [SCSS] 불러오기 (@import) 불러오기 (@import) scss에서의 import는 css의 @import규칙을 확장하여 mixin, functions 및 변수에 대한 액세스를 제공하고 여러 스타일시트의 css를 함께 결합한다. 사용방법은 다음과 같이 @import를 사용하여 특정.scss 파일을 불러와 사용할 수 있다. /* @import "layout.scss" */ @import "layout"; 확장자를 붙이지 않아도 상관 없기 때문에 보통 생략해서 사용한다. scss에서 @import는 기본적으로 scss 파일을 가져오는데, css @import 규칙으로 컴파일되는 몇 가지 상황이 있다. 파일 확장자가 .css일 때 파일 이름이 http:// 또는 https://로 시작하는 경우 url()이 붙어있는 경우 미디어쿼리가 있는.. 2022. 6. 23. [SCSS] 스타일 규칙 - 중첩(Nesting) 중첩 (Nesting) 기본적인 스타일 규칙은 CSS와 동일한 방식으로 작동하지만, SCSS에서는 중첩 (Nesting) 기능을 사용해 상위 선택자의 반복을 피하고 좀 더 편리하게 구조를 작성할 수 있다. nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } to css nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12p.. 2022. 6. 22. [SCSS] 변수(Variables)와 데이터 타입(Data Types) (ft. 주석) 주석 (Comment) CSS에서의 주석은 /* ... */ 로 해야 하는 반면에, Sass(SCSS)에서는 JavaScript처럼 두 가지 스타일의 주석을 사용한다. // 컴파일되지 않는 주석 /* 컴파일되는 주석 */ 여기서 또 Sass 와 SCSS에 다른 특징이 나오는데, 아무래도 SCSS가 CSS와 호환이 쉽게 나왔기 때문에 비슷한 측면이 있다. // Sass /* 컴파일되는 * 여러 줄 * 주석 */ // SCSS /* 컴파일되는 여러 줄 주석 */ Sass의 경우 여러 줄 주석을 사용할 때 각 줄 앞에 *을 붙여야 하고 더 나아가 라인까지 맞춰줘야 하는 반면에, SCSS의 경우에는 CSS처럼 사용하면 된다. 데이터 타입 (Data Types) 데이터 설명 예시 Numbers 숫자를 의미하며 단.. 2022. 6. 14. [SCSS] SCSS 사용할 때 유용한 확장 프로그램 (ft. VSCode) VSCode 카테고리에 유용한 확장 프로그램 추천 게시글이 있으나 SCSS만 따로 정리하고자 새로 작성한다. (마지막 수정 일자 : 2022.06.13) 1. SCSS IntelliSense https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss SCSS IntelliSense - Visual Studio Marketplace Extension for Visual Studio Code - Advanced autocompletion and refactoring support for SCSS marketplace.visualstudio.com 꼭 필요하다 생각하는 확장 프로그램인데, 바로 "자동완성"을 도와주는 역할을 한다. 여기서 말하.. 2022. 6. 13. [SCSS] 7-1 Architecture (7-1 패턴 / 폴더 구조) sass 프로젝트를 구성하는 인기가 많고 효과적인 모듈식 방법 중 하나가 7-1 패턴이다. 실제로 sass 가이드라인에서도 이 7-1 패턴을 다루고 있다. 7-1이 의미하는 게 뭐냐면 7개의 폴더와 하나의 파일을 의미한다. 즉, 7개의 폴더에 속한 파일들을 단 하나의 파일을 통해서 사용한다고 생각하면 된다. 그래도 역시 무슨 말인지 모르겠으니, 7-1 패턴의 구조를 알아보자. Project Structured in 7-1 Architecture pattern sass/ | |– abstracts/ | |– _variables.scss # Sass Variables | |– _mixins.scss # Sass Mixins | |– vendors/ | |– _bootstrap.scss # Bootstrap .. 2022. 6. 13. 이전 1 다음 반응형
