SCSS - [ 기본 사용법 ]

https://www.sassmeister.com/

SassMeister | The Sass Playground!

SCSS -> CSS 변환 코드 바로 확인 가능

 

 

 

---

1. 주석

/* */    ->   CSS 로 변환 된 후에도 남아있음
//         -> SCSS에서만 제공하는 문법. CSS로 변환 된 후에 안 남아있음

 

 

 

---

2. 중첩

SCSS 중첩  ->  CSS

 

 

 

---

3. 상위(부모) 선택자 참조

- & : 상위 선택자 참조 

& 기호를 통해 상위 선택자 호출 가능

 

 

 

 

---

4. 중첩된 속성

반복되어 사용되는 특정한 속성명을 scss에서는 중첩된 속성을 통해 사용 가능

속성 뒤에  : 기호 필요 and 중괄호 뒤에 ; 기호 필요

 

font-size, font-weight 처럼 font- 가 붙은 것을 네임스페이스가 동일하다고 함

 

 

 

 

---

5. 변수

$변수명: 값;

 

* 선언된 범위에서 유효 범위를 가짐

   아래의 $size 는 전역에서 사용 가능

* 재할당 가능

 

 

 

---

6. 산술 연산

+, -, *, % 는 잘 동작하지면 / 는 제대로 동작하지 않음 (/ 는 단축 속성에 사용되는 기호이므로)

- 해결 방법

1. ( ) 로 묶어주기

2. 변수 사용해서 / 적용

3. 다른 연산자와 함께 사용하기

 

 

기본적으로 산술 연산할 때에는 단위가 동일해야함. but calc 함수를 사용하면 단위가 다를 때에도 연산 가능

 

 

 

---

7. 재활용(Mixins)

@mixin 키워드를 사용하면 @include 키워드를 이용해 코드의 모음을 하나의 이름으로 재활용할 수 있음

 

 

인수를 받아와서 값을 활용 가능

 

 

인수에 기본 값 할당 가능

 

 

키워드 인수를 이용해 특정 인수에만 값 전달 가능

 

 

---

8. 반복문

nth-child에는 $i 를 바로 사용할 수 없고 문자를 보간하는 방식을 사용해야 함

값을 쓸 때는 그냥 바로 사용 가능

 

 

 

---

9. 함수

함수를 사용해 값을 연산해서 반환된 결과를 이용할 수 있음

 

 

 

---

10. 색상 내장 함수

- mix(royalblue, red) : 두 인수를 섞어서 새로운 색상을 반환

- lighten(royalblue, 10%) : 첫 번째 인수의 색상을 두 번째 인수만큼 색상을 밝혀줌 

- darken(royalblue, 10%) : 첫 번째 인수의 색상을 두 번째 인수만큼 색상을 어둡게 해 줌

- saturate(royalblue, 40%) : 첫 번째 인수의 색상을 두 번째 인수만큼 채도를 높여 줌

- desaturate(royalblue, 40%) : 첫 번째 인수의 색상을 두 번째 인수만큼 채도를 낮춰 줌

- grayscale(royalblue) : 주어진 색상을 회색으로 만들어 줌

- invert(royalblue) : 주어진 색상을 반전시킴

- rgba(royalblue, 0.5) : 주어진 색상을 두 번째 인수만큼 투명하게 해 줌 (두 개의 인수만 주면 됨)

 

버튼에 마우스 올렸을 때 색상 10% 어둡게 하기 등 의 상황에 유용하게 사용 가능

 

 

 

---

11. 가져오기

@import 를 이용해 다른 scss 파일 삽입 가능

* 확장자 생략 가능

* 여러 파일 가져오기 가능

 

 

 

 

 

---

12. 데이터 종류

 

 

 

---

13. 반복문 @each

list나 map 다룰 때 @each 사용 가능

 

 

---

14. 재활용 @content

* @mixin 사용 시 -> @include 뒤 중괄호 사이의 내용을 @minxin 안의 @content에 추가해줌

 

 

 

---

참조

https://fastcampus.co.kr/courses/203720/clips/

패스트캠퍼스 온라인 강의 - 초격차 패키지 : 한 번에 끝내는 프론트엔드 개발