🌈 SCSS 세팅
extension 설치
Live Sass Complier설치
settins.json
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/dist/css"
}
]세팅
⚡ variables
$primary-color: #272727;
$accent-color: #ff65ef;
body {
background-color: $accent-color;
}⚡ Maps
$font-weights: (
'regular': 400,
'bold': 700,
);
body {
font-weight: map-get($font-weights, bold);
}⚡ Nesting
인셉션 규칙: Sass 코드 중첩을 할 때, 4 레벨 보다 깊게 들어가지 말 것!
.main {
width: 80%;
margin: 0 auto;
p {
font-weight: map-get($font-weights, bold);
}
}& 엔퍼센트
.main {
width: 80%;
margin: 0 auto;
&_paragrah {
font-weight: map-get($font-weights, bold);
}
}
//=> .main_paragrah { font-weight: 700; }#{} 문자 보간
#{}를 이용해서 코드의 어디든지 변수 값을 넣을 수 있다.
특정 문자열을 따로 처리하지않고 그대로 출력한다.
.main {
width: 80%;
margin: 0 auto;
#{&}_paragrah {
font-weight: map-get($font-weights, bold);
}
}
//=> .main .main_paragrah { font-weight: 700; }⚡ Partials
모든 파일이 컴파일 시 각각의 ~.css 파일로 나눠서 저장된다면 관리나 성능 차원에서 문제가 될 수 있다. 그래서 Sass는 Partials 기능을 지원한다.
파일 이름 앞에 _를 붙여(_header.scss와 같이) @import로 가져오면 컴파일 시 ~.css 파일로 컴파일하지 않는다.
-
_resets.scss로 생성
-
main.scss에서 import
@import './resets';
⚡ Functions
함수는 보통 연산된(Computed) 특정 값을 **@return 지시어를 통해 반환한다.
mixin은 style markup 을 반환하지만, function 은 @return directive 를 통하여 값 을 반환한다.
**
@function 함수이름($매개변수) {
@return 값
}@function weight($weight-name) {
@return map-get($font-weights, $weight-name);
}
.main {
font-weight: weight(regular);
}꿀 팁: 자주 사용 할 것 같은 함수는 아래와 같이 단축함수를 만들어 사용하세요. 그런다고해서 결과물의 용량이 늘어나지는 않는다.
@function calc-percent($target, $container) {
@return ($target / $container) * 100%;
}
@function cp($target, $container) {
@return calc-percent($target, $container);
}
.my-module {
width: calc-percent(650px, 1000px);
}⚡ Minxins 믹스인
Mixin은 지정한 스타일(Style)을 반환
@mixin 믹스인이름($매개변수) {
스타일;
}예시 1
@mixin flexCenter {
display: flex;
justify-content: center;
align-items: center;
}
.main {
@include flexCenter;
}예시 2
인수를 전달할 수 있다.
@mixin flexCenter($direction) {
display: flex;
justify-content: center;
align-items: center;
flex-direction: $direction;
}
.main {
@include flexCenter(column);
}예시 3 @if
@mixin theme($light-theme: true) {
@if $light-theme {
background: lighten($primary-color, 100%);
color: $accent-color;
}
}
.light {
@include theme($light-theme: true);
}예시 4 @content
선언된 Mixin에 @content이 포함되어 있다면 해당 부분에 원하는 스타일 블록 을 전달할 수 있습니다.
@mixin mobile {
@media (max-width: $mobile) {
@content;
}
}
.main {
@include mobile {
flex-direction: row;
}
}//css 컴파일 결과
@media (max-width: 400px) {
.main {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
}⚡ Extend
특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우가 종종 있다.
이럴 경우 선택자의 확장 기능을 사용할 수 있다.
.btn {
padding: 10px;
margin: 10px;
background: blue;
}
.btn-danger {
@extend .btn;
background: red;
}Placehoder 선택자 %
%를 사용하면 상속은 할 수 있지만, 해당선택자는 컴파일되지 않는다.
- SCSS
%box {
padding: 0.5em;
}
.success-box {
@extend %box;
color: green;
}
.error-box {
@extend %box;
color: red;
}-CSS
.success-box, .error-box {
padding: 0.5em;
}
.success-box {
color: green;
}
.error-box {
color: red;
}⚡ 숫자 연산
div {
width: 20px + 20px; // 더하기
height: 40px - 10px; // 빼기
font-size: 10px * 2; // 곱하기
margin: (30px / 2); // 나누기
}/를 나누기 연산 기능으로 사용하려면 다음과 같은 조건을 충족해야 한다.
- 값 또는 그 일부가 변수에 저장되거나 함수에 의해 반환되는 경우
- 값이 ()로 묶여있는 경우
- 값이 다른 산술 표현식의 일부로 사용되는 경우
div {
$x: 100px;
width: $x / 2; // 변수에 저장된 값을 나누기
height: (100px / 2); // 괄호로 묶어서 나누기
font-size: 10px + 12px / 3; // 더하기 연산과 같이 사용
}⚡ Built-in Functions (내장함수)
darken()
특정 색깔과, 얼마나 어둡게 할지 인수로 던져주면 자동으로 색상을 계산해서 나타내준다.
$buttonColor: #2ecc71;
$buttonDark: darken($buttonColor, 10%);
$buttonDarker: darken($buttonDark, 10%);lighten()
background: lighten($blue, 10%); // 색상 10% 밝게⚡ 참고
