[패스트캠퍼스 수강후기] 프론트엔드 강의 17회차 미션

오늘은 21. SASS에서 28번째 클립까지 수강했다

 

 

*

CSS는 화면에 바로 보이고 간단하지만, 작업이 고도화 될수록 불편해짐

하지만 웹에서는 표준 CSS만 동작할 수 있음

CSS 전처리, CSS preprocessor

CSS가 동작하기 전에 사용하는 기능, 확장 같은 것

Less, Sass, Stylus 등이 있는데 이중에 sass 를 css와 완전히 호환하게 만든 것이 scss

Sass, scss는 웹에서 바로 동작할 수는 없음

전처리기, 컴파일러를 이용해서 CSS로 컴파일

SassMeister : 페이지 접속 후 sass나 SCSS로 코딩하면 CSS로 실시간 변환

Parcel : vscode에서 설치할 수 있다

 

*

Sass / scss 주석처리는

// 컴파일 되지 않는 주석

/* …. */ 컴파일 되는 주석

 

Sass는 컴파일되는 여러 줄 주석을 사용할 때 각 줄 앞에 *를 붙여야 하고

*라인도 맞춰야함

/* …

 *

 *     */

 

Scss는 각 줄에 *이 없어도 됨, 기존 CSS와 호환이 쉬움

 

 

*

데이터종류

Numbers : 숫자 <단위가 있거나 없다>

Strings : 문자 <따옴표가 있거나 없다>

Colors : 색상 표현

Booleans : 논리 (true, false)

Nulls : 아무것도 없음 <속성값으로 null포함시 컴파일 하지 않음>

Lists : 공백이나 ,로 구분된 값의 목록 (apple, orange, banana), apple orange

<()를 붙이거나 붙이지 않아도 된다>

Maps : Lists와 유사하나 값이 Key: Value 형태 (apple: a, orange: o, banana: b),

<()붙여야 한다>

 

 

*

중첩(Nesting)

상위 선택자의 반복을 피함

(예시)

SCSS:

.section {

  width: 100%;

  .list {

    padding: 20px;

    li {

      float: left;

    }

  }

}

Compiled to:

.section {

  width: 100%;

}

.section .list {

  padding: 20px;

}

.section .list li {

  float: left;

}

 

*

Ampersand (상위 선택자 참조)

중첩 안에서 & 키워드는 부모선택자를 참조

 

*

@at-root  : 중첩 벗어나기

중첩 안에서 생성하되 중첩 밖에서 사용해야

SCSS:

.list {

  $w: 100px;

  $h: 50px;

  li {

    width: $w;

    height: $h;

  }

  @at-root .box {

    width: $w;

    height: $h;

  }

}

Compiled to:

.list li {

  width: 100px;

  height: 50px;

}

.box {

  width: 100px;

  height: 50px;

}

 

*

중첩된 속성

font-, margin- 등과 같이 동일한 네임 스페이스를 가지는 속성들

SCSS:

.box {

  font: {

    weight: bold;

    size: 10px;

    family: sans-serif;

  };

  margin: {

    top: 10px;

    left: 20px;

  };

  padding: {

    bottom: 40px;

    right: 30px;

  };

}

Compiled to:

.box {

  font-weight: bold;

  font-size: 10px;

  font-family: sans-serif;

  margin-top: 10px;

  margin-left: 20px;

  padding-bottom: 40px;

  padding-right: 30px;

}

 

*

변수(Variables) : 반복적으로 사용되는 값을 변수로 지정.

변수 이름 앞에는 항상 $.

(예시)

$변수이름: 속성값;

 

*

변수 유효범위(Variable Scope)

선언된 블록{} 내에서만 유효

 

*

변수 재 할당(Variable Reassignment)

(예시)

SCSS:

$red: #FF0000;

$blue: #0000FF;

 

$color-primary: $blue;

$color-danger: $red;

 

.box {

  color: $color-primary;

  background: $color-danger;

}

Compiled to:

.box {

  color: #0000FF;

  background: #FF0000;

}

 

 

*

!global : 전역 설정

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

 

*

!default : 초깃값 설정

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

할당되어있는 변수가 있다면 기존 할당 값을 사용

‘변수와 값을 설정하겠지만, 혹시 기존 변수가 있을 경우

 현재 설정하는 변수의 값은 사용하지 않겠다’

SCSS:

$color-primary: red;

 

.box {

  $color-primary: blue !default;

  background: $color-primary;

}

Compiled to:

.box {

  background: red;

}

 

*

#{} :문자 보간, 변수 값을 넣을 수 있음

unquote()는 문자에서 따옴표를 제거

(예시)

$family: unquote("Droid+Sans");

@import url("http://fonts.googleapis.com/css?family=#{$family}");

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

 

*

가져오기(Import)

@import : 외부에서 가져온 Sass 파일은 모두 단일 CSS 파일로 병합

Sass @import는 기본적으로 Sass 파일을 가져오는데,

CSS @import 규칙으로 컴파일되는 상황

(1)파일 확장자가 .css일 때

(2)파일 이름이 http://로 시작하는 경우

(3)url()이 붙었을 경우

(4)미디어쿼리가 있는 경우

 

*

여러 파일 가져오기

하나의 @import로, 파일 이름은 ,로 구분

 

*

파일 분할(Partials)

Sass는 파일 이름 앞에 _를 붙여(_header.scss) @import로 가져오면

컴파일 시 ~.css 파일로 컴파일하지 않는다

 

*

연산

<산술연산자>

+ : 더하기

-

* : 곱하기, 하나 이상의 값이 반드시 숫자

/ : 나누기, 오른쪽 값이 반드시 숫자

% : 나머지

<비교연산자>

== : 동등

!= : 부등

< : 대소 / 보다 작은

> :대소 / 보다 큰

<= : 대소 및 동등 / 보다 작거나 같은

>= : 대소 및 동등 / 보다 크거나 같은

<논리(불린, Boolean) 연산자>

And : 그리고

Or : 또는

Not : 부정

 

*

숫자

<상대적 단위 연산>

일반적으론 절댓값을 나타내는 px 단위로

상대적 단위(%, em, vw 등)의 연산의 경우 CSS calc()로 연산해야

(예)

width: calc(50% - 20px); 

<나누기 연산의 주의사항>

CSS는 속성 값의 숫자를 분리하는 방법으로 /를 허용

/를 나누기 연산 기능으로 사용하려면

(1)값 또는 그 일부가 변수에 저장되거나 함수에 의해 반환되는 경우

(2)값이 ()로 묶여있는 경우

(3)값이 다른 산술 표현식의 일부로 사용되는 경우

(예)

  $x: 100px;

  width: $x / 2;  // 변수에 저장된 값을 나누기

  height: (100px / 2);  // 괄호로 묶어서 나누기

  font-size: 10px + 12px / 3;  // 더하기 연산과 같이 사용

 

*

문자(Strings)

+ 사용

첫 번째 피연산자를 기준으로

따옴표가 붙어있다면 연산 결과를 따옴표로 묶기

따옴표가 붙어있지 않다면 연산 결과도 따옴표를 처리하지 않음

 

*

색상

RGBA에서 Alpha 값은 연산되지 않음, 서로 동일해야 다른 값의 연산이 가능

 

*

재활용(Mixins)

선언하기(@mixin)

포함하기(@include)

mixin, include 예시

 

*

인수(Arguments)

Mixin은 함수처럼 인수를 가질 수 있음

(예시)

// SCSS

@mixin 믹스인이름($매개변수) {

  스타일;

}

@include 믹스인이름(인수);

 

// Sass

=믹스인이름($매개변수)

  스타일

+믹스인이름(인수)

*

인수의 기본값 설정

인수(argument)는 기본값(default value)을 가질 수 있습니다.

@include 포함 단계에서 별도의 인수가 전달되지 않으면 기본값이 사용됩니다.

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

  스타일;

}

 

 

*

키워드 인수(Keyword Arguments)

(예)

@mixin 믹스인이름($매개변수A: 기본값, $매개변수B: 기본값) {

  스타일;

}

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

 

*

가변 인수(Variable Arguments)

때때로 입력할 인수의 개수가 불확실한 경우, 매개변수 뒤에 ...

(예)

@mixin 믹스인이름($매개변수...) {

  스타일;

}

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

 

*

@content

선언된 Mixin에 @content이 포함되어 있다면 해당 부분에 원하는 스타일 블록을 전달할 수 있음

기존 Mixin이 가지고 있는 기능에 선택자나 속성 등을 추가

(예)

@mixin 믹스인이름() {

  스타일;

  @content;

}

@include 믹스인이름() {

  // 스타일 블록

  스타일;

}

@content

 

 

https://bit.ly/3g7RJpi

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스