SCSS

아 ㅋㅋ 이거 그냥 자바스크립트 아니냐?

컴파일 방법

SASS(SCSS)는 웹에서 직접 동작할 수 없음 전처리기로 작성 후 css로 컴파일 해야됨

• sassmeister.com 으로 웹에서 컴파일 페이지에서 sass, scss로 코딩하면 실시간으로 css로 변환해줌

• Parcel 번들러로 컴파일 노드가 깔려있어야함

1. Parcel 설치

   $npm install -g parcel-bundler
   

2. 프로젝트에 scss 컴파일러 설치 vscode기준 원하는 폴더에서 터미널 켜고
   1. 터미널 창에 npm init -y 입력
   2. package.json 파일이 생성되고
   3. 터미널 창에 $npm install --save-dev node-sass 입력
   4. package.json에 parcel-bundler가 생성됨

3. html에 scss파일 연결

    <link rel='stylesheet' href='scss/main.scss' />
   

4. parcel 모듈 실행
   1. 터미널 창에 npx parcel index.html 입력
   2. 번들이 실행되면서 로컬호스트 주소가 생성
   3. 로컬호스트로 들어가면 scss가 컴파일된 것을 볼 수 있음

주석(comment)

// 컴파일되지 않는 주석
/* 컴파일되는 주석 */

데이터 종류

• 데이터종류표

• 특이사항

  • Numbers: 숫자에 단위가 있거나 없음
  • String: 문자에 따옴표가 있거나 없음
  • Nulls: 속성값으로 null이 사용되면 컴파일하지 않음
  • Lists: ()를 붙이거나 붙이지 않음
  • Maps: ()를 꼭 붙여야함

중첩(Nesting)

자손선택자까지 포함해서 작성하는 것

// 예시
.section {
    width: 100%;
    .list {
        padding: 20px;
        li {
            float: left;
        }
    }
}

상위 선택자 참조(&)

중첩 안에서 & 키워드는 상위 선택자 자기자신을 표현함. this랑 비슷한 개념

.btn {
    position: absolute;
    &.active {
        background-color: purple;
    }
}

.list {
    li {
        &:last-child {
            margin-bottom: 6px;
        }
    }
}

중첩 벗어나기(@at-root)

중첩 안에서 생성하지만 중첩 밖에서 사용해야 할 경우 사용 예시로 값만 공유하고 싶은 다른 선택자를 만들때 유용함

.list {
    $w: 100px;
    $h: 50px;
    li {
        width: $w;
        height: $h;
    }
    @at-root .box {
        width: $w;
        height: $h;
    }
}

중첩된 속성

font-, margin- 등과 같이 동일한 네임 스페이스를 가지는 속성들을 사용할 수 있음

변수

변수 사용이 가능함 너무 신기

$변수이름: 변수값;

변수 유효범위(Variable Scope)

변수는 선언된 블록{} 안에서만 유효범위를 가짐

변수 재할당(Variable Reassignment)

$red: #FF0000;
$blue: #0000FF;

$color-primary: $blue;  // 재할당
$color-danger: $red;    // 재할당

.box {
    color: $color-primary;  // 재할당한거 또 재할당
    background: $color-dagner;  // 재할당한거 또 재할당
}

전역 설정(!global)

변수의 유효범위를 전역으로 설정할 수 있음

.box {
    $color: #111 !global;  // #111의 범위를 전역으로 바꿈
    background: $color;     // #111
}

.box1 {
    background: $color;     // #111
}

초기값 설정(!default)

할당되지 않은 변수의 초기값을 설정

$color-box: red; // 전역변수

.box {
    $color-box: blue !default;  // 초기값 설정
    background: $color-box; // red;
}

초기값을 블루로 설정했지만 전역변수가 red로 잡혀있어서 red가 나오게됨

문자 보관( #{} )

저장해둔 변수 값을 사용할 수 있음

$name: unquote("kaen");     // unquote()는 따옴표를 제거하는 scss 내장함수
@import name('my name is {#name}');     // my name is kaen

문법

가져오기(import)

@import 현재 파일에 다른 파일을 불러오는 속성

연산(Operations)

• 산술연산자 |종류|설명|주의사항 |+|더하기| |-|빼기| |*|곱하기|하나 이상의 값이 반드시 숫자 |/|나누기|오른쪽 값이 반드시 숫자 |%|나머지|

• 비교연산자 |종류|설명 |==|동등 |!=|부등 |<|~보다 작은 |>|~보다 큰 |<=|~보다 작거나 같은 |>=|~보다 크거나 같은

• 논리연산자 |종류|설명 |and|그리고 |or|또는 |not|부정

숫자(Numbers)

• 상대적 단위 연산 상대적 단위(%, em, vw 등)의 연산의 경우 CSS calc()로 연산해야 오류가 나지 않음

  width: calc(50% - 20px); // 연산 쌉가능
  

• 나누기 연산의 주의사항 / 는 나누기 연산으로 사용되지 경우가 있다 그래서 ()로 묶어주는 것이 좋다

  height: (100px / 2);
  

문자(Strings)

첫번째 피연산자에 따옴표가 붙어있다면 결과를 따옴표로 묶고 첫번째 피연산자에 따옴표가 없다면 결과를 따옴표로 묶지 않음

content: "Hello " + World; // "Hello World"
display: flex + "inline"; // flexinline

색상

color: #123456 + #345678    // #468ace
background: rgba(50, 100, 150, .5) + rgba(10, 20, 30, .5)   // rgba(60, 120, 180, .5)

rgba에서 a(Alpha)값은 연산되지 않으며 서로 동일해야 다른 값의 연산이 가능함

논리

|종류|설명 |and|그리고 |or|또는 |not|부정

재활용

자바스크립트의 함수명 같은 역할

@mixin (선언)

// scss
@mixin 믹스인이름 {
    스타일;
}

// sass
=믹스인이름
    스타일

@include (사용)

// scss
@include 믹스인이름;

// sass
+믹스인이름

인수(Arguments)

자바스크립트의 매개변수와 인수와 같음

// scss
@mixin 믹스인이름($매개변수) {
    스타일;
}
@include 믹스인이름(인수);

// sass
=믹스인이름($매개변수)
    스타일

+믹스인이름(인수)

• 인수의 기본값

  @mixin 믹스인이름($매개변수: 기본값) {
    스타일;
  }
  

• 키워드 인수 매개변수 여러개 주는 걸 말하는 것 같음 ``` scss @mixin 믹스인이름($매개변수A: 기본값, $매개변수B: 기본값) { 스타일; }

@include 믹스인이름($매개변수B: 인수);

- 가변 인수 (...)
입력할 인수의 개수가 불확실할 때 사용
매개변수 뒤에 `...`을 붙여줌
``` scss
@mixin 믹스인이름($매개변수...) {
    스타일;
}

@include 믹스인이름(인수A, 인수B, 인수C);

@content

해당 부분에 원하는 스타일 블록을 전달

@mixin 믹스인이름() {
    스타일;
    @content;
}

@include 믹스인이름() {
    // 스타일블록
    스타일;
}

확장(Extend)

특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우

@extend 선택자;

함수(Funcitons)

함수는 보통 연산된 특정 값을 @return을 통해 반환함

// Mixins
@mixin 믹스인이름($매개변수) {
    스타일;
}

// Functions
@function 함수이름($매개변수) {
    @return 값
}

• 사용법 ``` scss // Mixin @include 믹스인이름(인수);

// Functions 함수이름(인수)

## 조건과 반복(Control Directives / Expressions)

### if(함수)
삼항 연산자와 같은 방식
조건이 true면 표현식1 실행, false면 표현식2 실행

``` scss
if(조건, 표현식1, 표현식2)

@if (지시어)

if문과 같은 방식

@if (조건) {
    // 어때요
} @else if () {
    // 자바스크립트랑
} @else {
    // 겁나게 비슷하죠?
}

당연히 and, or, not도 가능

@for

for문과 같은 방식 스타일을 반복적으로 출력

변수는 관례상 $i로 사용

• through 종료 만큼 반복

  @for $변수 from 시작 through 종료 {
    // 반복 내용
  }
  

• to 종료 직전까지 반복

  @for $변수 from 시작 to 종료 {
    // 반복 내용
  }
  

@each

List와 Map 데이터를 반복할 때 사용 for in과 같은 방식

@each $변수 in 데이터 {
    // 반복 내용
}

@while

while문과 같은 방식 조건이 false가 될 때까지 반복 사용을 권장하지않음

@while 조건 {
    // 반복 내용
}

내장함수

출처: HEROPY TECH