SCSS Sass 마지막!! [패스트캠퍼스 챌린지 21일차]

함수

mixin과 function의 차이

→ 구별해서 사용하자

• mixin css 코드의 모음 정도. css 스타일을 다루는 용도
• function은 반환된 결과를 사용하기 위해 만듦

SCSS

@mixin center {
    display: flex;
    justify-content: center;
    align-items: center;
}

@function ratio($size, $ratio) {
    @return $size*$ratio
}

.box {
    $width: 100px;
    width: $width;
    height: ratio($width, 1/2); //호출
    @include center;
}

CSS

.box {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

16:9 비율 (유튜브 동영상)

SCSS

@mixin center {
    display: flex;
    justify-content: center;
    align-items: center;
}

@function ratio($size, $ratio) {
    @return $size*$ratio
}

.box {
    $width: 100px;
    width: $width;
    height: ratio($width, 9/16); 
    @include center;
}

CSS

.box {
  width: 100px;
    height: 56.25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

데이터 종류

$number: 1; // .5, 100px, 1em
$string: bold; // relative, "../images/a.png"
$color: red; //blue, #FFFF00, rgba(0,0,0,.1)
$boolean: true; // false
$null: null;
$list: orange, royalblue, yellow; // 배열데이터과 유사
$map: ( // 객체데이터와 유사. 키밸류
    o: orange,
    r: royalblue,
    y: yellow,
);

.box {
    width: 100px; // 숫자데이터
    color: red; // 색상데이터
    position: relative; // 문자데이터
}

반복문@each

실무에서 많이 사용하지는 않아서 중요도는 낮지만,
뒤에 부트스트랩 파트에서 데이터구조를 알고 있어야 이해를 할 수 있는 부분이 있으니 알아두자

list데이터

해석

@each 키워드를 통해 $list라는 변수에 있는 해당 데이터들을
반복적으로 $c라는 변수에 담아서 중괄호 {} 사이에서 처리하겠다라는 의미

@each $c in $list{
    .box {
        color: $c;
    }
}

컴파일 후

.box {
  color: orange;
}

.box {
  color: royalblue;
}

.box {
  color: yellow;
}

map데이터

key value 형태

@each 키워드. 쉼표를 이용해 key와 value 형태로 내부에서 사용 가능

@each $k, $v in $map{
    .box-#{$k} {
        color: $v;
    }
}

컴파일 후

.box-o {
  color: orange;
}

.box-r {
  color: royalblue;
}

.box-y {
  color: yellow;
}

재활용 @content

일반적인 경우에는 실무에서 유용하게 사용하진 않지만

뒤에 나올 외부 패키지 해석하기 위해 이해해놓기

중괄호 부분의 내용을 @content로 삽입하는 역할

@mixin left-top {
    position: absolute;
    top: 0;
    left: 0;
    @content;
}
.container {
    width: 100px;
    height: 100px;
    @include left-top;
}
.box {
    width: 200px;
    height: 300px;
    @include left-top {
        bottom: 0;
        right: 0;
        margin: auto;
    }
}

컴파일 후

.container {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
}

.box {
  width: 200px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

---

SCSS는 금방 끝났네
내일부터는 미지의 세계
할 수 있어...

https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online