SCSS 문법 알아보기 2

 

반복문

 

/* SCSS */

/*
    -js-
    for (let i = 0; i < 10; i += 1) {
        console.log(`loop-${i}`)
    }

*/

// 1~10까지 반복 = 10번 반복
@for $i from 1 through 10 {
    // #{변수} - 문자 보간
    .box:nth-child(#{$i}) {
        width: 100px * $i;
    }
}

/* CSS */

.box:nth-child(1) {
  width: 100px;
}

.box:nth-child(2) {
  width: 200px;
}

.box:nth-child(3) {
  width: 300px;
}

.box:nth-child(4) {
  width: 400px;
}

.box:nth-child(5) {
  width: 500px;
}

.box:nth-child(6) {
  width: 600px;
}

.box:nth-child(7) {
  width: 700px;
}

.box:nth-child(8) {
  width: 800px;
}

.box:nth-child(9) {
  width: 900px;
}

.box:nth-child(10) {
  width: 1000px;
}

 

함수

 

/* SCSS */

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

/*
-함수 선언-
@function 함수명($매개변수....) {
    @return 값
}

-사용 방법
함수명(인수)
*/

@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;
}

 

색상 내장 함수

 

mix($색상1, $색상2)

- 색상1과 색상2를 혼합하여 색상을 나타냄

- 예시) background-color: mix($color, red);

 

lighten($색상, 값%)

- 색상을 값%만큼 색상을 더 밝게 나타냄

- 예시) background-color: lighten($color, 10%);

 

darken($색상, 값%)

- 색상을 값%만큼 색상을 더 어둡게 나타냄

- 예시) background-color: darken($color, 10%);

 

saturate($색상, 값%)

- 색상을 값%만큼 채도를 올려줌 (선명하게)

- 예시) background-color: saturate($color, 40%);

 

desaturate($색상, 값%)

- 색상을 값%만큼 채도를 낮춰줌

- 예시) background-color: saturate($color, 40%);

 

grayscale($색상);

- 색상을 회색으로 만듬

- 예시) grayscale($color);

 

invert($색상);

- 색상을 반전

- 예시) invert($color);

 

rgba($색상, 투명도)

- 색상을 투명하게 만듬

- rgba($color, .5)

 

가져오기

 

// 방법1
@import url("./sub.scss");

// 방법2 (url() 생략)
@import "./sub.scss";

// 방법3 (.scss 생략)
@import "./sub";

// 여러 개를 가져올 수 있다
@import "./sub", "./sub2.scss";

 

데이터 종류

 

$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
);

 

반복문 @each

 

/* SCSS */

$list: orange, royalblue, yellow;   // 배열 데이터

// @each 변수명 in 배열데이터명
@each $c in $list {
    .box {
        color: $c;
    }
}

/* CSS */

.box {
  color: orange;
}

.box {
  color: royalblue;
}

.box {
  color: yellow;
}

 

/* SCSS */

$map: (                             // 객체 데이터
  o: orange,
  r: royalblue,
  y: yellow
);

// @each 키, 값 in 객체데이터명
@each $k, $v in $map {
    .box-#{$k} {
        color: $v;
    }
}

/* CSS */

.box-o {
  color: orange;
}

.box-r {
  color: royalblue;
}

.box-y {
  color: yellow;
}

 

재활용 @content

 

/* SCSS */

@mixin left-top {
    position: absolute;
    top: 0;
    left: 0;
    @content;
}
.container {
    width: 100px;
    height: 100px;
    @include left-top;
}
.box {
    width: 200px;
    height: 300px;
    // 추가적인 내용이 @content 부분에 들어간다
    @include left-top {
        bottom: 0;
        right: 0;
        margin: auto;
    }
}

/* CSS */

.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;
}