[DAY-32] CSS 심화 (4)

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
아니아니 잠시만 JavaScript 기본 문법을 다시 배우는 느낌이에요.
SCSS 뭐야 .. 스타일게의 혁명인데요?
이걸 저만 몰랐다구요???? 저만 중첩문 안쓰고 일일히 다 작성하고 있었어요??!!???!!!??
더 열심히 공부하겠습니다..

[1] Sass(SCSS)

Sass(SCSS)는 CSS Preprocessor입니다.

Sass와 SCSS는 약간의 차이가 존재합니다.

하단과 같이 SCSS는 중괄호로 범위를 지정해주는 기능, 세미콜론 사용이 포함되어 있으며

Sass는 중괄호와 세미콜론을 사용하지 않고, 들여쓰기 개념이 중요합니다.

/* SCSS Syntex */
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

/* Sass Syntex */
nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

[1-1] 주석, 중첩

SCSS는 기존의 CSS와 주석 형태가 약간 다릅니다.

// 형태의 주석을 하나 더 제공하며, 해당 주석은 컴파일 된 결과에 포함되지 않습니다.

[1] 주석

Sass의 경우, 여러 줄 주석을 사용할 때 들여쓰기가 상당히 중요합니다.

[2] 중첩

SCSS를 사용하면 상위 요소의 반복적인 작성을, 중첩으로 간단하게 작성할 수 있습니다.

이때 &는 상위 선택자의 의미입니다.

&부분에 상위 요소가 기입됨을 확인할 수 있습니다.

또한 변수를 사용할 수 있습니다. 변수는 앞에 $기호가 붙습니다.

단 변수의 스코프를 고려해야 합니다.

스코프 내의 변수를 활용하는 요소에 상위 선택자가 붙는 것을 방지하기 위해 @at-root 라는 규칙을 사용할 수 있습니다.

변수를 사용할 수 있듯, 속성의 이름이 겹칠 경우에도 들여쓰기 형식으로 작성할 수 있습니다.

들여쓰기와 상위 속성이 합쳐져 하나의 완성된 속성들을 작성할 수 있습니다.

여러 선택자를 한번에 작성할 수 있습니다.

자동으로 ul의 하위 요소들, ol의 하위 요소들로 묶어주는 것을 확인할 수 있습니다.

[1-2] 변수, 데이터, 연산자

[1] 변수

위에서도 간단히 살펴봤듯이, $로 시작하는 변수를 사용할 수 있습니다.

변수는 재할당이 가능합니다.

.box-a {
  $h: 200px; // 변수의 범위는 자신이 선언된 블록 안에서만 유효합니다.
  width: $w;
  height: $h;
  margin: $w;
}

• !global

!global을 사용하면 변수의 유효 범위를 전역으로 만들 수 있습니다.

만약 재할당 변수를 !global으로 지정할 경우, 하위 부분에서는 전부 해당 값으로 덮여씌워지게 됩니다.

.box-a {
  $h: 200px !global;
  width: $w;
  height: $h;
  margin: $w;
}
.box-b {
  height: $h;
}

.box-a {
  width: 100px;
  height: 200px;
  margin: 100px;
}

.box-b {
  height: 200px; /* 변수가 선언된 요소 밖의 다른 요소에서도 $h를 사용할 수 있습니다. */
}

• !default

재할당 시, 해당 전역 값을 유지시키기 위해서 !default를 사용할 수 있습니다.

$primary: blue;

.box {
  $primary: orange !default; // 만약 default값이 없으면 orange가 할당됩니다.
  background-color: $primary;
}

.box {
  background-color: blue;
}

• 보간

보간은 변수 할당과 비슷하며 #{변수명}으로 사용할 수 있습니다.

또한 요소 이름 즉 일반적인 모든 문자열에 넣어 사용할 수 있습니다.

[2] 데이터

SCSS에서 사용할 수 있는 데이터(변수)에는 여러 형식이 있습니다.

// Numbers
$number1: 1;
$number2: 0.82;
$number3: 20px;
$number4: 2fr;

// Strings
$string1: bold;
$string2: absolute;
$string3: "assets/images/";

// Colors
$color1: blue;
$color2: yellowgreen;
$color3: rgba(255, 0, 0, 0.5);
$color4: #ffff00;

// Booleans
$boolean1: true;
$boolean2: false;

// Null
$null: null;

// Lists
$list1: (10px, 20px, 30px);
$list2: 10px, 20px, 30px;
$list3: 10px 20px 30px;
$list4: apple banana cherry;

// Maps
$map1: (
  key: value,
);
$map2: (
  a: apple,
  b: banana,
  c: cherry,
);

[3] 연산자

• 산술 연산자

SCSS에서는 산술 연산자(+, -, *, /, %)를 사용할 수 있습니다.

단 /연산자를 사용할 때 주의해야 합니다.

보통 CSS에서는 background, font와 같이 두 개 이상의 속성 값을 한번에 작성할 수 있는 속성이 존재합니다.

/* background-position: 100px 100px;
background-size: 200px 200px; */
background: 100px 100px / 200px 200px;
/* font-size: 10px;
line-height: 32px; */
font: 16px / 32px serif;

이때도 구분자로 /를 사용하기 때문에, 나누기 연산자를 사용하기 위해선 따로 처리를 해줘야합니다.

/* 1. 소괄호로 감싸기 (권장) */
top: (20px / 2);

/* 2. 변수 사용 */
$a: 20px;
top: $a / 2;

/* 3. 다른 연산자와 혼합하여 사용 */
top: 20px / 2 + 0px;

• calc()

단위가 다른 값들의 연산자 이용을 위해서 사용하는 함수입니다.

left: calc(
  100% - 50px
); // 100%에 해당하는 값에서 50px 뺀 값이 left에 적용됩니다.

• 비교 연산자

SCSS에서 비교 연산자(==, ≠, <, >, ≤, ≥)를 사용할 수 있습니다.

물론 조건문과 함께 사용됩니다.

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

• 논리 연산자

SCSS에서 논리 연산자(and, or, not)를 사용할 수 있습니다.

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

[1-3] @mixin

@mixin과 @include를 사용하여 재활용 할 코드를 작성할 수 있습니다.

large-text안의 모든 스타일이 box-a에 적용된 것을 볼 수 있습니다.

또한 마치 JS의 함수처럼, 매개변수를 지정할 수 있습니다.

box-a의 폰트 사이즈는 매개변수로 전달된 20px, box-b는 40px임을 확인할 수 있습니다.

이때 기본값을 지정할 수 있습니다.

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

.box-a {
  width: 100px;
  height: 100px;
  @include large-text; // 매개변수가 없으므로 $size의 기본값인 30px가 지정
}

@mixin으로 작성된 재활용 코드는 중첩이 가능합니다.

@mixin reset-margin {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@mixin section {
  font-size: 20px;
  line-height: 1.4;
  color: blue;
  h1 {
    font-size: 40px;
    font-weight: bold;
    @include reset-margin;
    // mixin으로 작성된 재활용 코드 안에서, 다른 재활용 코드를 불러올 수 있습니다.
    &::after {
      content: "!!";
    }
  }
}

[1] 가변 인수

매개변수로 들어올 값의 갯수를 예측하지 못할 때, 가변 인수를 사용할 수 있습니다.

@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/b.png") repeat x,
    url("/images/c.png") repeat-y center / contain
  );
}

또한 JS의 구조 분해 할당의 개념처럼, 해당 가변 인수의 값들을 하나씩 할당받아 사용할 수 있습니다.

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

.box {
  $m: 10px 20px 30px 40px;
  @include spread($m...); // ...문법을 사용합니다.
}

따라서 JS의 전개 연산자처럼 ...을 사용할 수 있습니다.

[2] 키워드 인수

mixin를 사용하고 싶을 때, 순서에 상관없이 특정 매개변수에만 값을 전달하고 싶으면 키워드 인수를 사용할 수 있습니다.

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

.absolute {
  width: 100px;
  height: 100px;
  @include pos(absolute, $t: 100px, $l: 50px);
}

[3] @content

mixin을 사용할 때, 뒤쪽에 적은 중괄호 사이의 추가적인 스타일들을 @content를 사용해서 특정 위치에 삽입할 수 있습니다.

@mixin icon($url) {
  &::after {
    content: url($url);
    @content; // 이곳에 삽입
  }
}

.box {
  @include icon("/images/icon.png") {
    // 추가적인 스타일 명시
    position: absolute;
    top: 0;
    left: 50px;
  }
}

반대로 값을 꺼내올 수도 있습니다.

... @media all and (max-width: map.get($breakpoints, $name)) {
  @content (777); // 777을 전달해줍니다.
}
...

// using 키워드를 사용해서 $c에 해당 @content에서 전달된 변수를 담을 수 있습니다.
@include media(lg) using($c) {
  width: 300px;
  height: 300px;
  _debug: $c;
}

• “sass:map” module

다음 시간에 더 자세히 알아볼 부분이지만, 간략하게 map으로 작성된 SCSS map들의 각 value를 조회할 수 있게 해줍니다.

map.get(map 객체, 키값)과 같은 형태로 사용할 수 있습니다.

@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(lg) {
    width: 300px;
    height: 300px;
  }
  @include media(md) {
    width: 200px;
    height: 200px;
  }
  @include media(sm) {
    width: 100px;
    height: 100px;
  }
}

.box {
  width: 400px;
  height: 400px;
}
@media all and (max-width: 1400px) {
  .box {
    width: 300px;
    height: 300px;
  }
}
@media all and (max-width: 992px) {
  .box {
    width: 200px;
    height: 200px;
  }
}
@media all and (max-width: 576px) {
  .box {
    width: 100px;
    height: 100px;
  }
}

@media all and (max-width: 992px) {
  .section {
    width: 450px;
  }
}

각 요소 안에 추가로 입력한 스타일 블록이 잘 적용된 것을 확인할 수 있습니다.

[1-4] Sass @include, @mixin

Sass에서의 @include는 +기호이며 @mixin은 =기호를 사용합니다.

@mixin icon($url) {
  &::after {
    content: url($url);
  }
}

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

=icon($url)
  &::after
    content: url($url)

.box
  +icon("/images/icon.png")

---

출처

프로그래머스

sass-lang document