본문 바로가기
반응형

Style Sheets/Sass(SCSS)10

[SCSS] Sass Variable in calc() function Error SCSS문법을 사용하여 스타일을 주던 중 calc() 함수에 SCSS변수를 넣어 계산을 하려고 하였더니 빌드 오류가 발생하였다. 이렇게 사용하면 안 되는 건가? 싶어 레퍼런스 조사를 해보았더니 SCSS변수를 calc() 함수에 넣어서 사용하려면 "보간 문법"을 사용해야 한다고 한다. 이렇게 까지 귀찮을 일인가? 고작 변수를 가져다 계산에 사용하려는 건데 보간문법(#{})까지 써야 한다니 여간 불편한 게 아닌가 싶었다. 그리고 몇 가지 의문들이 해결이 안되었다. 참고한 레퍼런스의 sass버전을 알 수 없었다. 이게 버전 문제가 아닌가라는 의문도 들었고, 우리랑 같은 환경이 아닌 이상 언제든지 상황은 바뀔 수 있다고 생각된다. sass 개발진들이 이렇게 귀찮은 것들을 그대로 방치했을까? 말 그대로다. 빠르.. 2024. 3. 19.
[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.
반응형
TOP