SCSS 컴파일과 문법, 함수

 

Sass

Syntactically Awesome Style Sheets

CSS를 쉽게 사용하기 위한 도구, CSS 전처리기

 

Sass-lang

Sass: Syntactically Awesome Style Sheets

 

Sass와 SCSS의 차이점

---

• Sass는 Sass와 SCSS 두 가지 문법을 지원하고, SCSS는 기존의 Sass의 단점을 보완해 만들어졌다.
• Sass는 표준css와 호환이 잘 되지 않고, 브레이스나 세미콜론을 사용하지 않는 차이가 있다.
• 유일하게 Mixins에서 @, =, + 등 사용하는 기호의 차이가 있다.

 

SCSS의 특징

---

• 상속되는 선택자를 계층적으로 명시하여 불필요한 반복적 사용을 줄일 수 있다.
• typescript와 마찬가지로 컴파일, 즉 CSS전처리기를 통해 SCSS의 문법을 CSS로 변환해준다.
• 전처리기로 sass이외에 less와 stylus도 있다.

 

 

컴파일

---

parcel bundler 패키지에서 자동으로 scss를 체크하여 컴파일

$color: blue;

.container {
	h1 {
    	color: $color;
    }
}

 

 

 

 

🌲 SCSS 문법

---

참고 사이트

1. Codepen에서 SCSS사용법

1-1. codepen에서 SCSS 사용하기

CSS Preprocessor 전처리기에서 SCSS로 설정

1-2. codepen에서 SCSS 컴파일 미리보기

 

2. Sassmeister

Sassmeister : SCSS와 변환된 CSS를 동시에 확인할 수 있는 사이트

 

SassMeister | The Sass Playground!

 

 

SCSS에서의 주석

---

2가지 방법으로 사용할 수 있으나 //는 컴파일 시 CSS에서 내용이 삭제됨을 주의

.container {
  h1 {
    color: blue;
    // font-size: 12px;
    /* background-color: yellow; */
  }
}

 

 

✅ 자식 선택자 >

---

.container {
  > h1 {
      color: blue;
  }
}

 

 

✅ 상위 선택자 참조 &

---

상위선택자로 치환(참조)한다는 의미다.

예제 1

.btn {
	position: absolute;
	&.active {
		color: red;
	}
}

.btn { position: absolute; }
.btn.active { color: red; }

예제 2

.fs {
    &-small { font-size: 12px; }
    &-medium { font-size: 14px; }
    &-large { font-size: 16px; }
}

.fs-small { font-size: 12px; }
.fs-medium { font-size: 14px; }
.fs-large { font-size: 16px; }

 

 

✅ 중첩된 속성

---

네임스페이스가 동일한 속성은 다음과 같이 표현할 수 있다. 콜론과 세미콜론을 활용한다.

*namespace: 이름을 통해 구분 가능한 범위를 만들어내는 것, 일종의 유효범위를 지정하는 방법

.box {
    font: {
    	size: 10px;
        weight: bold;
    }
    margin: {
    	top: 10px;
        bottom: 12px;
    }
}

.box {
    font-size: 10px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 12px;
}

 

 

✅ 변수 Variables

---

• 반복되는 동일한 내용을 변수로 만들면 수정 시 용이하다.
• 변수에는 유효범위가 있다.

$size: 100px; // 전역에서 사용 가능한 변수

.container {
  $size: 100px; // 선언된 중괄호 범위 내에서만 사용 가능
  position: fixed;
  top: $size; // 100
  .item {
    $size: 200px; // 변수 변경
    width: $size; // 200
    height: $size; // 200
    transform: translateX($size); // 200
  }
  .it {
      width: $size; 200
  }
  left: $size; // ★200
}

 

 

✅ 산술연산자

---

1. SCSS에서도 연산자(-, +, /, *, %)를 사용 가능하다.

2. 나누기의 슬래시 기호는 단축속성으로 인식될 수 있기 때문에 그대로 사용하지 않는다.

  ㄴ괄호 안에 넣어서 사용한다. (20/4)

  ㄴ변수에 값을 할당해 사용해야 한다. $size: 20

  ㄴ다른 산술연산자와 같이 사용할 경우에도 제대로 작동한다. (3 + 9) / 2

3. calc함수를 사용하면 서로 다른 단위도 계산 가능하다 calc(100% - 200px)

 

 

 

💻 Mixins 재활용

변수와 다르게 여러 속성을 담아 사용

---

mixin 사용법

@mixin 이름에 넣은 후 @include 이름 으로 가져온다.

@mixin center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    @include center;
    .item {
        @include center;
    }
}

 

mixin에서 인수를 활용해 값을 쉽게 변경하는 방법

1. @mixin 이름($인수명: 기본값) : 기본값을 설정해 인수를 적지않아도 기본값으로 출력 가능

2. @mixin 이름($인수명: 기본값, $인수명: 기본값) : 콤마를 이용해 인수를 여러 개 지정 가능 

3. mixin의 인수는 기본적으로 순서대로 인덱싱되기 때문에 두번째 인수만 변경하기 위해서는 키워드인수 문법을 이용해야 한다. $color: green

@mixin box($size: 100px, $color: blue) {
    width: $size;
    height: $size;
    background-color: $color;
}
.container {
    @include box(200px, orange);
    .item {
        @include box($color: green); // 키워드인수
    } 
}

 

 

💻 함수

---

mixin은 단순히 속성들의 모임이지만 함수는 새로운 연산을 반환해 사용

-> 화면 비율을 16:9로 계산하도록 함수 ratio를 만들어 적용

@mixin center {
    display: flex;
    justify-content: center;
    align-items: center;
}

@function ratio($size, $ratio) {
    @return $size * $ratio
}

.box {
    $width:100px;
    width: $width;
    height: ratio($width, 9/16);
    @include center;
}

.box {
  width: 100px;
  height: 56.25px; // 함수로 생성된 값
  display: flex;
  justify-content: center;
  align-items: center;
}

 

 

💻 반복문

---

for문에서는 문자 보간 방법을 사용 #{ }

 

SCSS

// for (let i = 0; i < 10; i += 1) {
//     console.log(`loop-${i}`)
// }


@for $i from 1 through 4 {
    .box:nth-child(#{$i}) { // 보간
        width: 100px * $i;
    }
}

CSS

.box:nth-child(1) {
  width: 100px;
}

.box:nth-child(2) {
  width: 200px;
}

.box:nth-child(3) {
  width: 300px;
}

.box:nth-child(4) {
  width: 400px;
}

 

 

💻 SCSS 내장함수

컬러 관련 (별도의 선언없이 사용할 수 있는) SCSS 내장함수

---

mix($color, yellow) 

두 가지 컬러를 혼합

 

lighten

lighten($color, 10%)

 

darken

darken($color, 10%) : hover할 때 약간의 색변화를 주는 용도로 활용 가능

hover

 

saturate, desaturate

saturate($color, 40%)

desaturate($color, 40%)

 

grayscale, invert

grayscale($color) 현재 색을 그레이톤으로

invert($color) 현재 색을 인버트

 

rgba

rgba($color, .5) 

 

 

✅ SCSS파일 불러오기

---

1. url함수 이용 @import url("./sub.scss");

2. url함수 없이 경로만 @import "./sub.scss";

3. scss 확장자 생략 가능 @import "./sub";

4. 여러 개의 경로 불러오기 @import "./sub", "./sub2";

 

 

 

 

---

⛔

많이 사용하진 않지만 알아두면 유용한

---

⛔데이터 종류

데이터	예시	설명
number	.5, 100px, 1em	숫자
string	bold, relative, "../images/a.png"	문자
color	red, #000, rgba(0,0,0, .5)	색상
boolean	true, flase	논리
null	null	아무것도 없음, 속성값이 null이면 컴파일되지 않음
list	red, orange, yellow;	공백 또는 쉼표로 구분된 값의 목록
map	( r: red, o: orange, y: yellow );	key:value형태의 묶음

 

 

⛔ 반복문 @each

반복문 @each로 list와 map 활용하기 

---

@each $A in $B : B변수 내 해당 데이터를 반복적으로 A변수에 넣어 처리

 

SCSS

$list: red, orange, yellow;
$map: ( r: red, o: orange, y: yellow );

@each $c in $list {
    .box {
        color: $c;
    }
}

@each $k, $v in $map {
    .box-#{$k} {
        color: $v;
    }
}

CSS

.box {
  color: red;
}

.box {
  color: orange;
}

.box {
  color: yellow;
}

.box-r {
  color: red;
}

.box-o {
  color: orange;
}

.box-y {
  color: yellow;
}

 

 

⛔ 재활용 @content

---

@content가 삽입된 자리에 코드 추가

 

SCSS

@mixin left-top {
    position: absolute;
    top: 0;
    left: 0;
    @content;
}

.box {
    @include left-top {
        bottom: 0;
    }
}

CSS

.box {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}