본문 바로가기
반응형

Style Sheets/Sass(SCSS)12

[SCSS] 불러오기는 @use를 사용하도록 하자 (@import vs @use) 불러오기 (@import, @use)SCSS는 스타일시트를 더 효과적으로 관리하고 모듈화 하기 위해 두 가지 주요 지시어를 제공하는데, 그게 바로 @import와 @use 지시어이다.이 두 지시어는 비슷한 목적을 가지고 있지만 @import는 @use와 비교하여 아주 오래전부터 사용되어온 방식이다.물론 @import가 오래된 기술이라고 해서 @import말고 @use를 사용해야 한다는 이유는 아니다.(둘의 차이를 어느정도 알고 싶다면 공식문서를 살펴보거나 내가 작성한 글을 읽어봐도 좋다. @import / @use) 공식문서를 본 사람은 알겠지만 애초에 공식문서에서 @import 대신에 @use를 사용하는 것을 권장한다.⚠️ Heads up!The Sass team discourages the conti.. 2024. 6. 19.
[SCSS] 불러오기 (@use / @forward) 불러오기 (@use)scss에서의 '@use'지시어는 다른 scss파일을 현재 파일로 가져와서 사용할 수 있다./* @use "layout.scss" */@use "layout"; '@use'는 가져온 파일의 모든 내용을 로컬 스코프로 가져오며, 사용할 때 네임스페이스를 통해 접근해야 한다.이를 통해 충돌을 방지하고, 코드의 가독성을 높일 수 있다./* src/_corners.scss */ $radius: 3px;@mixin rounded { border-radius: $radius;}/* style.scss */ @use "src/corners";.button { @include corners.rounded; padding: 5px + corners.$radius;}별칭 (Alias)네임스페이스를.. 2024. 6. 19.
[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.
반응형
TOP

티스토리툴바