SCSS 문법 알아보기 1

 

주석

 

1. /* 내용 */ - 여러 줄 주석, 컴파일 되었을때 CSS 변환 되었을때 CSS 코드에 나타남

2. // - 한 줄 주석, 컴파일 되었을때 CSS 변환 되었을때 CSS 코드에 나타나지 않음

 

중첩

 

/* SCSS */

.container {
  ul {
    li {
      font-size: 40px;
      .name {
        color: royalblue;
      }
      .age {
        color: orange;
      }
    }
  } 
}

/* CSS */

.container ul li {
  font-size: 40px;
}
.container ul li .name {
  color: royalblue;
}
.container ul li .age {
  color: orange;
}

 

상위(부모) 선택자 참조

 

/* SCSS */
// & - 상위 선택자 참조

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

.list {
    li {
        &:last-child {
            margin-right: 0;
        }
    }
}

/* CSS */

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

.list li:last-child {
  margin-right: 0;
}

 

/* SCSS */
// & - 상위 선택자 참조

.fs {
    &-small { font-size: 12px; }
    &-medium { font-size: 14px; }
    &-large { font-size: 16px; }
}

/* CSS */

.fs-small {
  font-size: 12px;
}
.fs-medium {
  font-size: 14px;
}
.fs-large {
  font-size: 16px;
}

 

중첩된 속성

 

/* SCSS */
// 중첩된 속성

.box {
    font: {
        weight: bold;
        size: 10px;
        family: sans-serif;
    };
    margin: {
        top: 10px;
        left: 20px;
    };
    padding: {
        top: 10px;
        bottom: 40px;
        left: 20px;
        right: 30px;
    };
}

/* CSS */

.box {
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
  margin-top: 10px;
  margin-left: 20px;
  padding-top: 10px;
  padding-bottom: 40px;
  padding-left: 20px;
  padding-right: 30px;
}

 

변수

 

/* SCSS */
// 변수 (Variables)
// 변수는 유효범위를 가지고 있다
// 값을 재할당 가능하다

// $변수명: 값;
$size: 200px;

.container {
    position: fixed;
    top: $size;
    .item {
        $size: 100px;
        width: $size;
        height: $size;
        transform: translateX($size);
    }
}

/* CSS */

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

 

산술연산

 

/* SCSS */

// 같은 단위의 산술 연산만 가능하다
// 다른 단위의 산술 연산은 calc() 사용

div {
    $size: 30px;
    width: 20px + 20px;
    height: 40px - 10px;
    font-size: 10px * 2;
    
    // 나누기는 2가지 방법
    margin: (30px / 2);
    margin: $size / 2;
    
    padding: 20px % 7;
}

/* CSS */

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

 

재활용

 

/* SCSS */

/*
-재사용할 CSS 선언 그룹 정의-
@mixin 믹스인이름 {
    스타일;
}

-선언된 Mixin을 사용-
@include 믹스인이름;
*/

@mixin center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.container {
    @include center;
    .item {
        @include center;
    }
}
.box {
    @include center;
}

/* CSS */

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

 

/* SCSS */

// Mixin은 함수(Functions)처럼 인수(Arguments)를 가질 수 있다
@mixin box($size) {
    width: $size;
    height: $size;
    background-color: tomato;
}
.container {
    @include box(200px);
    .item {
        @include box(100px);
    }
}
.box {
    @include box(100px);
}

/* CSS */

.container {
  width: 200px;
  height: 200px;
  background-color: tomato;
}
.container .item {
  width: 100px;
  height: 100px;
  background-color: tomato;
}

.box {
  width: 100px;
  height: 100px;
  background-color: tomato;
}

 

/* SCSS */

// 기본값 지정
@mixin box($size: 100px) {
    width: $size;
    height: $size;
    background-color: tomato;
}
.container {
    @include box(200px);
    .item {
        @include box;
    }
}
.box {
    @include box;
}

/* CSS */

.container {
  width: 200px;
  height: 200px;
  background-color: tomato;
}
.container .item {
  width: 100px;
  height: 100px;
  background-color: tomato;
}

.box {
  width: 100px;
  height: 100px;
  background-color: tomato;
}

 

/* SCSS */

@mixin box($size: 80px, $color: tomato) {
    width: $size;
    height: $size;
    background-color: $color;
}
.container {
    @include box(200px, red);
    .item {
        // 키워드 인수
        @include box($color: green);
    }
}
.box {
    @include box;
}

/* CSS */

.container {
  width: 200px;
  height: 200px;
  background-color: red;
}
.container .item {
  width: 80px;
  height: 80px;
  background-color: green;
}

.box {
  width: 80px;
  height: 80px;
  background-color: tomato;
}