[DAY 32] CSS 심화(4)

SCSS - 재활용

1. @mixin 과 @include 

: CSS 스타일 시트에서 재사용할 CSS스타일 그룹 선언을 정의하는 기능

 

1) 기본 형태 

- @mixin 으로 스타일 정의하고, @include를 이용하여 불러옴

* sass에서는 @mixin이 =, @include는 + 형태이다.

@mixin <이름> { ... }

@mixin 이름(<매개변수...>) { ... }

@include <이름>(<매개변수...>)

 

ex) 매개변수 없는 형태

 

ex) 매개변수 있는 형태

- 매개변수가 있는 형태면 include로 불러올 때 매개변수 있어야 한다.

- mixin 선언 시 매개변수에 기본 값 지정 가능하다.

 

2) 응용 형태

① 가변 인수를 사용하는 형태 

- 가변 인수 : ... (전개)연산자 이용

@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-x center / contain
    );
}

 

 

ex) 보간과 전개 연산자를 이용한 마진 패딩 주기

 

ex) null값을 이용한 매개 변수 미리 지정

 

② @content 이용

- 중괄호에 들어간 내용이 @content로 들어간다.

- @content 규칙 using 키워드로 받아와서 사용 가능 ( 매개변수가 있다면 include에 항상 using 이 있어야함)

@content(arg);

@include media(lg) using ($c) {
    width: 400px;
    height: $c; // arg
}

 

 

③ 미디어 쿼리와 함께쓰기

- mixin 안에 media 쿼리를 넣으면 알아서 지정한 선택자의 미디어 쿼리가 된다.

 

2. @extend

 : 선택자를 가져와서 그 선택자의 스타일을 가져올 수 있다.

* 부작용 : 선택자 폭발

중첩문법으로 @extend를 많이 사용하게 되면 원하지 않는 선택자에 스타일이 적용될 수 있다.

 

+ placeholder 선택자(%) : sass에서만 사용가능하며 extend를 위해 있는 선택자

 

✔ 유의 사항

- media 선택자 안 스타일에 extend를 가져올 수 없다.

- 되도록 mixin을 사용하는게 더 좋음

 

SCSS - 함수

1. 기본 형태

@function 함수이름() {
    @return 리턴값;  /* 없어도 됨 */
}

 

ex) 예외 상황에 대해 에러를 호출하는 함수

$columns-width: 1200px;
@function grid($col: 1, $total: 12, $rest...) {
    @if($col > $total) {
        @error "$col must be less than $total.";
    }
    /* list써도 되고 안써도됨 */
    @if(list.length($rest) > 0){
        @error "Unnecessary arguments include.";
    }
    @return $columns-width * $col / $total;
}

* 함수 이름은 자신만의 커스텀 이름이 좋다. (중복 문제)

 

 

SCSS - 조건과 반복

1. if - else 문 / else if 문

1) 기본 형태

@if (조건문1) {
	/* 조건문1이 참일 때 */
} @else if (조건문2){
	/* 조건문2가 참일 때 */
} @else {
	/* 그 외 */
}

ex) mixin과 조건문을 활용한 예시

@mixin theme-colors($light-theme: true) {
  @if $light-theme {
    background-color: $light-background;
    color: $light-text;
  } @else {
    background-color: $dark-background;
    color: $dark-text;
  }
}

 

 

2. @each문 (forEach와 유사)

1) 기본 형태 

@each ele in list이름 {
  /* ele는 list의 각 요소들이 반환 */
}

 

ex) each문을 이용하여 size 설정

 

3. @for 구문 : 반복문

1) 기본 형태

 for $i from "시작인덱스" through "끝 인덱스(포함)" {
 	/* i는 1씩 증가한다. */
 }

 

ex) background-color 지정하는 예시

 

$base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

 

 

4. @while문

@use "sass:math";

@function scale-below($value, $base, $ratio: 1.618) {
  @while $value > $base {
    $value: math.div($value, $ratio);
  }
  @return $value;
}

$normal-font-size: 16px;
sup {
  font-size: scale-below(20px, 16px);
}

 

 

SCSS - 가져오기, 모듈

1. @import (전체 가져오기)

 

1) 사용 방법

① 가져올 scss 파일 생성

// _variables.scss
$primary: orange;
$error: red;
$success: green;

* 파일 이름 앞에 _(언더바)가 있으면 scss에서 가져올 파일이라 인식해서 컴파일 안됨

 

② 가져올 파일을 쓸 파일 생성

- import 구문으로 가져온다. (확장자 생략 가능)

@import "./variables.scss";
or @import url("./variables.scss"); (컴파일된 css파일에 표기됨)

.main {
  background-color: $primary;
  border: 4px solid $success;
}

 

📌 컴파일 방법 :  sass scss:css (scss파일을 css파일로 컴파일 한다)

* css 파일로 컴파일 될때 아래 형식은 css파일에 표기된다

@import url("./variables.scss"); 

@import "~~~.css" (확장자가 css) 

@import "http://~~" 

 

 

2. @use (부분 가져오기)

- 모듈 처럼 가져오는 방식

@use "./variables.scss" as var; /* as 안쓰면 variables로 사용  */

.main {
  background-color: var.$primary;
  border: 4px solid var.$success;
}

 

3. @forward

- 가져온 파일을 외부에서도 사용할 수 있게 해줌(받아서 다시 전달)

@use "./variables.scss" as var;
@forward  "./variables" as var*; /* as var* 생략가능(이름 충돌때문에 사용) */
 
/* 위 파일을 쓰는 파일에서 사용 방법 */
.body {
  border : 4px solid var.$varprimary
}

/* 위 방식이 가독성이 안좋아서 하이픈을 붙임 */
@forward  "./variables" as var-*;

 

SCSS - 내장 모듈

1. 사용 방식

: @use sass:모듈이름

* 전역 모듈도 있다. 전역 모듈은 안 불러와도됨 ex) hsl, hsla, if, rgba

 

2. 모듈 종류

 

1) sass:color

Sass: sass:color (sass-lang.com)

Sass: sass:color

ⓐ lighten, darken : amount 만큼 어둡게/밝게 만듬

darken($color, $amount) //=> color 

lighten($color, $amount) //=> color 

 

- color.adjust로 위 메서드를 구현할 수 있음

color.adjust($color,
  $red: null, $green: null, $blue: null,
  $hue: null, $saturation: null, $lightness: null,
  $whiteness: null, $blackness: null,
  $alpha: null)

 

 

2) sass:list

Sass: sass:list (sass-lang.com)

Sass: sass:list

ⓐ list.append: list에 추가

list.append($list, $val, $separator: auto)

@debug list.append(10px, 20px, $separator: comma); // 10px, 20px

 

ⓑ list.join: 리스트들을 합쳐서 새로운 list를 만듬

list.join($list1, $list2, $separator: auto, $bracketed: auto)

debug list.join(10px 20px, 30px 40px); // 10px 20px 30px 40px
@debug list.join(10px, 20px, $separator: comma); // 10px, 20px
@debug list.join(10px, 20px, $bracketed: true); // [10px 20px]

 

ⓒ list.length

list.length($list)

ⓓ list.nth : 리스트 인덱싱

list.nth($list, $n)

@debug list.nth(10px 12px 16px, 2); // 12px

 

 

3) sass:map

Sass: sass:map (sass-lang.com)

Sass: sass:map

ⓐ map.get / map.set

map.get($map, $key, $keys...)

map.set($map, $key, $value)

ⓑ map.has-key : key 값을 가지고 있나 ?

map.has-key($map, $key, $keys...)

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.has-key($font-weights, "regular"); // true
@debug map.has-key($font-weights, "bolder"); // false

ⓒ map.keys / map.values : 키값들, values들을 반환(리스트)

map.keys($map)

map.values($map)

ⓓ map.merge: 병합하기

$light-weights: ("lightest": 100, "light": 300);
$heavy-weights: ("medium": 500, "bold": 700);

@debug map.merge($light-weights, $heavy-weights);
// ("lightest": 100, "light": 300, "medium": 500, "bold": 700)

- 중복된 게 있으면 더 뒤에 있는 인자가 앞에 인자를 덮어쓴다.

 

 

4) sass:math

Sass: sass:math (sass-lang.com)

Sass: sass:math

 

 

5) sass:meta

ⓐ meta.call

meta.call($function, $args...)

@use 'sass:meta';

meta.call($callback, 인수); /*콜백함수에 인수를 넣어 실행*/
meta.type-of(값) /*타입 체크*/

 

6) sass:string

Sass: sass:string (sass-lang.com)

Sass: sass:string

- quote, unquote : 따옴표 처리

 

 

SCSS - 디버그

1. 종류

@debug "~~" // console.log()
@warn "~~"  // console.warn()
@error "~~" // console.error() throw error랑 비슷함