[SCSS]

scss

중첩(Nesting)

<li>
  <div class='hello'>HELLO</div>
  <div class='world'>WORLD</div>
</li>

//scss
li{
	.hello{color: royalblue}
    .world{color:orange}
}

//css
li .hello {
  color: royalblue;
}
li .world {
  color: orange;
}

• 상위 선택자를 반복하지 않고 중첩 기능을 이용하여 반복된 코드를 줄여준다.

상위 선택자 참조(&)

//scss
.btn{
    position:absolute;
    &.active{
        color: red;
    }
}

//css
.btn {
  position: absolute;
}
.btn.active {
  color: red;
}

• & 기호를 사용하여 상위 선택자를 참조한다.

//scss
.fs{
    &-small{font-size: 12px;}
    &-medium{font-size: 14px;}
}

//css
.fs-small {
  font-size: 12px;
}
.fs-medium {
  font-size: 14px;
}

중첩된 속성(네임스페이스)

//scss
.box{
    font: {
        weight: bold;
        size: 10px;
        family: sans-serif;
    };
    margin: {
        top: 10px;
        left: 20px;
    };
}

//css
.box {
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
  margin-top: 10px;
  margin-left: 20px;
}

• 반복적으로 사용되는 네임스페이스를 중첩된 속성으로 사용한다.

변수(variables)

// 전역 변수
$size: 100px;

.container {
	// 지역 변수
    $sizeD: 200px;
    position: fixed;
    top: $size;
    .item {
        width: $size;
        height: $sizeD;
        transform: translateX($size);
    }
}

//css
.container {
  position: fixed;
  top: 100px;
}
.container .item {
  width: 100px;
  height: 200px;
  transform: translateX(100px);
}

• $변수명: 반복되는 코드 > 재활용을 위해 변수를 만들어 사용할 수 있다.
• 변수는 선언된 범위에서 유효 범위를 가진다.

연산

//scss
div{
    width: 20px + 20px;
    height: 40px - 10px;
    font-size: 10px * 2;
    // margin: 30px / 2; 단축 속성으로 판단하기 때문에 나누기 연산이 이루어지지 않는다.
    margin: (30px / 2);
     margin: $size / 2;
    padding: 20px % 7;
}

//css
div {
  width: 40px;
  height: 30px;
  font-size: 20px;
  // margin: 30px/2;
  margin: 15px;
  margin: 50px;
  padding: 6px;
}

• 산술 연산에서는 단위를 같게 해야한다.
• 단위가 다를 경우 calc(100% - 100px)를 이용한다.

재활용(mixin)

//scss
@mixin center{display: flex; justify-content: center;align-items: center}
@mixin box($size: 100px){width: $size; height: $size;}

.container {
    @include center;
    @include box(200px);
    width: 200px;
    height: 200px;
    background-color: orange;
}

//css
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: orange;
}

• 변수와 비슷하지만 반복되는 스타일 속성을 묶어서 재활용이 가능하다.
• @mixin 이름(인수) : mixin을 함수처럼 사용하여 인수를 통해 매개변수를 적용할 수 있다.
  - 매개변수에 기본값을 지정하면 별도 인수를 전달하지 않아도 적용할 수 있다.
  • 매개변수가 여러 개일 때, 갯수를 맞춰줘야 하고, 특정 매개변수의 값을 적용하고 싶을 때는 키워드 인수로 전달한다.
    • @mixin 이름($color: red)

반복

//scss
@for $i from 1 through 3 {
    .box:nth-child(#{$i}) {
        width: 100px;
    }
}

//css
.box:nth-child(1) {
  width: 100px;
}
.box:nth-child(2) {
  width: 100px;
}
.box:nth-child(3) {
  width: 100px;
}

함수

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

.box{
    $width: 100px;
    width: $width;
    height: ratio($width, 1/2);
}

//css
.box {
  width: 100px;
  height: 50px;
}

색상 내장 함수

// 1,2번째 인수를 섞은 새로운 색상
mix(royalblue, red)

// 1번째 인수의 색상을 두번째 인수만큼 밝게
lighten(royalblue, 10%)

// 1번째 인수의 색상을 두번째 인수만큼 어둡게
darken(royalblue, 10%)

// 1번째 인수의 채도를 두번째 인수만큼 올라감
saturate(royalblue, 10%)

// 1번째 인수의 채도를 두번째 인수만큼 낮춰줌
desaturate(royalblue, 10%)

// 1번째 인수의 색상을 회색으로 바꿔줌
grayscale(royalblue)

// 1번째 인수의 색상을 반전
invert(royalblue)

// 1번째 인수의 색상을 두번째 인수만큼 투명
rgba(royalblue, .5)

가져오기

• scss 파일 내부에서 다른 scss 파일 가져오기

//main.scss
@import './sub', './sub2'

//sub.scss
//sub2.scss

scss 데이터의 종류

$number: 1; // .5, 100px, 1em
$string: bold; // relative, '../images/a.png'
$color: red; // blue, #ffffff, rgba(0,0,0, .1)
$boolean: true; // false
$null: null;
$list: orange, royalblue, yellow; // = 배열과 유사
$map: (
    o: orange,
    r: royalblue,
    y: yellow
); // = 객체와 유사(단, scss는 소괄호)

each

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

@each $key, $value in $map {
    .box-#{$key} {
        color: $value;
    }
}

//css
.box {
  color: orange;
}

.box {
  color: royalblue;
}

.box {
  color: yellow;
}

.box-o {
  color: orange;
}

.box-r {
  color: royalblue;
}

.box-y {
  color: yellow;
}

• map은 key, value 형태

@content

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

//css
.container {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

• 기본적인 mixin에 추가적인 속성을 부여해준다.