[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 40회차 미션

패스트캠프 프론트앤드 인강 40일차 지난시간에 이어 scss 의 다양한 문법을 알아보았다.

중첩된 속성

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

변수

반복적으로 사용되는 값을 변수로 지정할수 있다.

변수이름 앞에는 항상 $를 붙인다

$변수이름: 속성값;

컴파일결과 width, height는 200px, background는 #e96900 url("/assets/images/bg.jpg");로 출력된다.

 

변수의 유효범위(Variable Scope)

변수는 사용가능한 유효범위가 있다. 선언된 {}내에서만 유효범위를 가진다.

 

변수 재할당(Variable Reassignment)

다음과 같이 또다른 변수에 변수를 할당 할 수 있다.

 

$red:#ff0000;
$blue:#0000ff;

$color-primary:$blue;
$color-danger:$red;

.box{
    color:$color-primary;
    background:$color-danger;   
}

 

!global(전역설정)

!global 플래그를 사용하면 변수의 유효범위를 전역(Global)로 설정할 수 있다.

/* 전역설정*/
.box1{
    $color:#111 !global;
    background:$color;
}
.box2{
    background:$color;
}

변수이기때문에 덮어써지기도하는데

변수가 적용되는곳을 기준으로 가장가까운 곳에서 선언된 값이 들어간다.

/*전역설정에 따른 변수변화*/
$color:#000;
.test1{
    $color:#111 !global; //000->111 
    background:$color;
}
.test2{
    background:$color; //111
}
.test3{
    $color:222;
    background:$color; //222
}

 

!default(초기값 설정)

!default 플래그는 할당되지 않은 변수의 초깃값을 설정한다. 즉

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

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

.box{
	$color-primary: blue !default; //red
    background:$color-primary; //red
}

default의 사용법

변수와 값을 설정하겠지만, 혹시 기존변수가 있을 경우는 현재 설정하는 변수의 값을 사용하지않겠다는 의미로 쓸수있다. 예를들어

Bootstrap같은 외부 Sass(Scss)라이브러리를 연결했더니 변수 이름이 같이 내가 작성한 코드의 변수들이 overwrite된다면 문제가 있다. 반대로 내가만든 라이브러리가 사용자의 코드를 overwrite한다면, 사용자는 당황하게된다.

이럴때 !default플래그를 사용하면 기존코드(원본)을 overwrite하지 않고 사용할수 있다.

 

https://bit.ly/31Cf1hp

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