프로그래머스 데브코스 TIL - Day 32

 

✅ 오늘의 학습

📌 CSS 심화 (3)

 

- SCSS 변수, 데이터, 연산자

- mixin을 사용한 재활용

 

 

---

변수

파일 상단에 전역 변수를 사용할 수 있고
선택자에서 사용 시 지역적으로 선언되어 유효범위를 가진다.
*재할당 가능

 

 

!global

 

지역변수에 $h:200px !global;
global 플래그를 사용하여 전역화 가능

 

 

!defualt

지역변수를 지정할 때 이미 동일한 변수가 있을 경우
기본 값을 사용하겠다 라는 뜻

$primary: blue;

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

 

문자 보간 

#{}를 사용하여 변수값을 넣을 수 있다.

$name: "jay";
$path: "assets/images";

.box {
    background-image: url("#{$path}/#{$name}.png");
    /* background-image: url("assets/images/jay.png"); */
}

.box-#{$name} {
  width: 100px;
}

 

데이터

SCSS에서 변수로 사용할 수 있는 데이터에는
Number, String, Color 외에도 Boolean, Null, List, Map이 있다.

 

/* Boolean */
$boolean: true;

/* Lists [0, 1, 2, 3] */
$list1: (10px, 20px, 30px);
$list2: 10px, 20px, 30px;
$list3: 10px 20px 30px;
$list4: apple, banana, cherry;

/* Null */
$null : null;

/* Map { key: value } */
$map1: ( key: value );
$map2: ( a: apple, b: banana, c: cherry );

 

 

산술 연산자

+, -, *, /, %의 산술 연산자를 사용하여 계산된 값을 사용할 수 있다.

 

📌 주의해야 할 점

단축 속성 시 어떤 값인지 구분할 수 없기 때문에 " / " 를 사용하는데

이 부분 때문에 나누기 연산(/)이 의도하지 않게 처리될 수 있다.

background: 100px 100px / 200px 200px;
font: 16px / 32px / serif;

 

➗ 나누기 연산 처리 방법

$a : 20px;
width: (20px / 2) // 괄호 사용
width: ($a / 2) // 변수에 담아 사용
width: 20px / 2 + 1px // 다른 연산자와 함께 사용

* 단위가 다른 경우 연산이 되지 않기 때문에 CSS의 calc() 사용하기

 

비교 연산자

==, !=, <, >, <=, >=를 사용하여 비교 연산을 할 수 있다.

.box {
    $w: 100px;
    @if ($w != 100px){
        width: $w;
    } @else {
        width: 200px;
    }
}

 

논리 연산자

and, or, not을 사용하여 논리 연산이 가능하다.

.box {
    $w: 100px;
    $h: 200px;
    @if ($w != 100px and $h > 200px){
        width: 100px;
        height: 200px;
    } 
}

 

 

@mixin

반복적으로 사용할 스타일을 미리 만들어 놓고 재활용을 할 수 있다.

@include를 사용하여 불러올 수 있다.

매개변수를 사용할 수 있고 매개변수의 기본 값을 설정해 둘 수 있다.

@mixin large-text($size: 30px) {
    font-size: $size;
    font-weight: bold;
    font-family: sans-serif;
    color: red;
}

.box1 {
    sidth: 100px;
    height: 200px;
    @include large-text;
}

.box2 {
    sidth: 100px;
    height: 200px;
    @include large-text(40px);
}

 

가변 인수

몇개의 인수가 들어올 지 모르는 상태에서 ...을 사용하여 한 번에 인수를 받아서 사용할 수 있다.

@mixin bg($w, $h, $b...) {
	width: $w;
    height: $h;
    background: $b;
}

.box {
	@include bg(
    100px,
    200px,
    url("/images/a.png") no-repeat center,
    url("/images/a.png") repeat-x,
    url("/images/a.png") repeat-y center / contain,
    )
}

 

전달하는 인수로도 ...을 사용할 수 있다.

@mixin spread($p, $t, $r, $b, $l) {
    ${p}:{
        top: $t;
        right: $r;
        bottom: $b;
        left: $l;
    }
}

.box {
    $m: 10px 20px 30px 40px;
    @include spread(margin, $m...);
    @include spread(padding, 10px 20px 30px 40px...);
}

 

 

키워드 인수

키워드 인수를 사용하여 매개변수의 위치를 생각하지 않고 전달할 수 있다.

@mixin spread($p, $t:null, $r:null, $b:null, $l:null) {
    ${p}:{
        top: $t;
        right: $r;
        bottom: $b;
        left: $l;
    }
}

.box {
    @include spread(margin, $t: 20px, $b: 30px);
}

 

@content

mixin을 사용하고 특정한 스타일 블럭을 작성하고 @content를 통해 추가할 수 있다

@mixin icon($p, $t:null, $r:null, $b:null, $l:null) {
    &::afetr {
    	content: url($url);
        @content;
    }
}

.box {
    @include icon("/images/icon.png"){
    	position: absolute;
    };
}

 

중첩을 사용한 @media

@use "sass:map";

@mixin media($name) {
    $breakpoints: (
        sm: 576px,
        md: 992px,
        lg: 1400px
    );
    @media all and (max-width: map.get($breakpoints, $name)){
        @content;
    }
}

.box {
    width: 400px;
    height: 400px;
    @include media(sm) {
        width: 100px;
    };
    @include media(md) {
        width: 200px;
    };
    @include media(lg) {
        width: 300px;
    };
}

 

 

 

using으로 @content의 인수 받기

using키워드를 사용하여 @content에서 전달한 인수를 넣어줄 수 있다.

@use "sass:map";

@mixin media($name) {
    $breakpoints: (
        sm: 576px,
        md: 992px,
        lg: 1400px
    );
    @media all and (max-width: map.get($breakpoints, $name)){
        @content(map.get($breakpoints, $name));
    }
}

.box {
    width: 400px;
    height: 400px;
    @include media(sm) using ($size){
        width: 100px;
        _debug: $size;
    };
}

 

삼항연산자

괄호에 ,로 구분하여 삼항연산자를 사용할 수 있다.

/* condition ? true : false */
if( condition, true, false )

 

---

✍ 느낀 점

 

scss를 꽤 자주 사용했었는데 완전한 겉핥기 식으로 알고 사용했다 라는 생각이 들었다.

연산을 할 수 있다는 점은 알고 있었으나 다양한 예시 사례들을 알고 나니

좀 더 활용해 볼 수 있을 것 같다.

개인적으로 라이브러리를 사용하는 스타일보다는 직접 조작하는 것이 편하다 보니

이번 SCSS강의는 너무나도 유익했다.