SCSS 정리

Updated: May 15, 2021

SCSS

1.SCSS 개요

SCSS 공식 사이트

2.SCSS 설정

$ npm init -y   // npm 설치
$ npm i -D parcel-bundler   // parcel 번들러 개발용 설치

package.json 가서 parcel-bunder 설치 및 버전 확인

in package.json file..

  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  }, // 실행 명령 dev 개발용 local sever 실행, build : 실제 배포용 빌드

index.html, main.scss 생성 후 link 해주기

<link rel="stylesheet" href="./main.scss" />

$ npm run dev 하면 parcel-budler 가 sass 자동 설치 후, 컴파일 해서 localhost:1234 로 build 하게 됨
즉, main.scss 파일에서 작성된 code 를 저장하면 parcel-bulder 통해 자동으로 complie 해서 css 로 변환 해서 build 된다고 생각하면 됨

3.주석

SCSS 에서는 주석 처리 하는 것을 기존의 CSS 방식 /* */ 와 JS 의 // 2가지를 지원 합니다.
다만 차이점은 나중에 Complie 해서 CSS 로 변환 되었을 경우
- /* */ : CSS 파일에 그대로 출력되서 나옴
- // : 주석된 부분이 아예 삭제되서 CSS 파일에 안나타남

4.중첩(Nest) with SassMeister

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

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

기존에 CSS 에서 중복되는 class, tag 를 일일히 다 적어줘야 했지만, SCSS 에서는 nested 중첩을 통해 더 직관적으로 코드를 작성 할 수 있습니다.

https://www.sassmeister.com/ : 온라인 상으로 SCSS 를 CSS 로 변환 된것을 바로 확인 할 수 있습니다.

자식 요소로 명확하게 하기 위해선 > 를 앞에 넣어 주면 됩니다.

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

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

5.상위(부모)선택자 참조

& (Ampersand) 를 사용해서 상위에 있는 것을 참조해서 사용하는 것입니다
SCSS 에서 자주 사용됩니다

// & - 상위 선택자 참조 (Ampersand 사용)

.btn {
  position: absolute;
  &.active {
    // & 가 상위 선택자를 참조해서 가져 왔다는 의미임
    color: red;
  }
}

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

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

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

// & - 상위 선택자 참조 (Ampersand 사용)

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

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

6.중첩된 속성

: (colon) 을 통해서 속성을 충첩된 속성을 사용할 수 있습니다
; (semicolon) 은 중첩된 속성이 끝냄을 나타 냅니다.
반복적인 특정한 이름들을 SCSS 에서 사용을 줄여 줍니다.
예)

// 중첩된 속성

// font, margin, padding 의 nameSpace 가 동일하다 고 말함
// nameSpace: 이름을 통해 구분 가능한 범위를 만들어내는 것으로 일종의 유효범위를 지정하는 방법임
.box {
  font: {
    weight: bold;
    size: 10px;
    family: san-serif;
  }
  margin: {
    top: 10px;
    left: 20px;
  }
  padding: {
    top: 10px;
    bottom: 40px;
    left: 20px;
    right: 30px;
  }
}

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

07.변수

반복되는 수, 페이지에서 메인으로 사용되는 것을 변수로 정해줘서 반복해서 사용할 수 있게 끔 합니다

// 변수

// 100px 이 동일한 상황에서 중복되서 많이 사용 되기 때문에 변수를 사용해서 code 를 더 직관적으로 만들 수 있음
// 만약 일괄적으로 100px 를 바꿔 줘야 한다면 일일히 다 바꿔줘야 하는데 변수를 사용하면 한번 만 바꾸면 됨

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

// 변수 선언

$size: 100px; // 전역 변수 (globalVariable) - 페이지 전체에 사용할 수 있음

.container {
  $size2: 300px; // 지역 변수 (localVariable) - 중괄호 안에서만 사용 할 수 있음
  position: fixed;
  top: $size;
  .item {
    $size: 150px; // JS 에서 let 과 마찬가지로 재할당 되기 때문에 값이 바뀜
    width: $size; // width: 150px; 이 됨
    height: $size;
    transform: translateX($size);
  }
}

.box {
  width: $size; // localVariable 인 $size2 는 사용 할 수 없음
}

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

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

.box {
  width: 100px;
}

08.산술연술

// 사칙 연산

//  '/' 은 구분자로 사용되기 때문에 나누기로 사용하기 위해선 ( / ) 사용하거나, 변수를 이용해서 나누기 연산을 실행 함

div {
  $size: 30px;
  width: 20px + 20px;
  height: 40px - 10px;
  font-size: 10px * 2;
  margin-top: 30px / 2; // 나누기 부분은 재대로 실행되지 않게 나옴 -> 그냥 30px / 2 그대로 css 로 출력
  margin-left: (30px / 2); // 제대로 나누기 연산이 됨
  margin-right: $size / 2; // 변수를 사용해서 나누기하면 됨
  margin-bottom: 10px + 12px / 2; // 다른 사칙연산과 같이 사용되면
  padding: 20px % 7;
}

span {
  font-size: 10px;
  line-height: 10px;
  font-family: serif;
  font: 10px / 10px / serif; // 앞에 있는 걸 구분이기 위한 표시 앞에 10px 은 font-size | 뒤에 10px 은 line-height 를 가리키
}

body {
  width: 100% -200px; // 단위가 맞지 않기 때문에 연산 되지 않음 calc()를 사용하면 계산되서 사용되긴 함.
}

div {
  width: 40px;
  height: 30px;
  font-size: 20px;
  margin-top: 30px/2;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 16px;
  padding: 6px;
}

span {
  font-size: 10px;
  line-height: 10px;
  font-family: serif;
  font: 10px/10px / serif;
}

body {
  width: 100% -200px;
}

09.재활용(Mixins)

// 재활용 (mixin)

// @mixin -> 재활용 할 code
// @include -> mixin 된 code 를 적용
// 변수와 비슷한데 변수와 다르게 코드를 한번에 담아서 사용 함

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

.container {
  @include center;
  .item {
    @include center;
  }
}

.box {
  @include center;
}

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

mixin 으로 지정된 값 (숫자) 를 특정 지역에만 바꿔서 사용하는 방법

// 매개변수 (Parameter), 인수(argument) 를 사용해서 선언해서 사용하기
// JS 에서 function 에서 선언하고 실행하는 부분이 유사 함

// 여러가지 매개 변수를 지정할 수 있음
@mixin box($size: 100px, $color: tomato) {
  // parameter 선언, 그리고 :default 값으로 100px 선언
  width: $size;
  height: $size;
  background-color: $color; // :default 값이 tomato 임
}

.container {
  @include box(200px, red); // argument 적용 , 배경색상이 red 로 변경됨
  .item {
    @include box(
      $color: green
    ); // 아무 값도 넣지 않으면 default 값인 100px 이 적용됨 , green 으로 넣고 싶으면 순서 대로 argument 를 지정해줘야 됨
  } // 그래서 keyword argument 를 사용해서 color 값을 지정해서 사용해주면 됨
}

.box {
  @include box;
}

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

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

10.반복문

// 반복문

@for $i from 1 through 10 {
  // index가 1 부터 10 번까지 반복 하는 것... 단, zero based 가 아니라 1부터 시작함
  .box:nth-child(#{$i}) {
    // i가 1부터 10까지 넣는것 JS 에서 `${i}` 와 같다고 보면됨 #{$i}
    width: 100px * $i; // width 는 숫자 단위 이기 때문에 $1 을 그냥 사용해되 됨
  }
}

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

11.함수

// 함수

// mixin 은 단순히 코드의 모음이라고 보면 되고
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 사실상 JS 의 function 과 같다고 보면 됨 @ 기호만 추가로 해줌
// SCSS 에서 function 은 함수 안에서 연산을 실행 한 뒤에 반환 해주는 것
@function ratio($size, $ratio) {
  @return $size * $ratio;
}

.box {
  $width: 100px;
  width: $width;
  height: ratio(
    $width,
    1/2
  ); // $width 에는 100px 이 함수안에 $size 가 되고... 1/2 는 함수 안에 $ratio 가 되는 것임
  @include center;
}

.box2 {
  $width: 100px;
  width: $width;
  height: ratio(
    $width,
    9/16
  ); // 이런 식으로 하면 Youtube 영상 등 에서 자주 쓰이는게 16 대 9 사이즈로 조절해서 width 값에 따라 자동 조절 됨
  @include center;
}

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

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

12.색상 내장 함수

// 색상 내장 함수

.box {
  $color: royalblue;
  width: 200px;
  height: 100px;
  margin: 20px;
  border-radius: 10px;
  background-color: $color;
  &.built-in {
    background-color: mix(
      $color,
      red
    ); // 기존에 royalblue 색과 red 색을 섞어서 새로운 색을 return 해줌
    background-color: lighten(
      $color,
      10%
    ); // $color 를 10% 밝게 해주는 내장 함수
    background-color: saturate(
      $color,
      10%
    ); // $color 를 10% 채도를 높여주는  내장 함수
    background-color: desaturate(
      $color,
      10%
    ); // $color 를 10% 채도를 낮춰주는  내장 함수
    background-color: garayscale(
      $color
    ); // $color 를 grayscale 로 만들어 주는 내장 함수
    background-color: invert($color); // $color 를 반전 시켜주는 내장 함수
    background-color: rgba($color, 0.5); // $color에 opacity를 주는 내장 함수
    // 참고로 SCSS rgba 는 2개의 인수만 사용함 기존 CSS 에서의 방법보다 훨씬 간단 하기 때문에 실전에서 자주 사용되는 방법임
  }
  &:hover {
    background-color: darken(
      $color,
      10%
    ); // $color 를 10% 어둡게 해주는 내장 합수 특히 btn 만들때, 마우스 올릴때 색상을 어둡게해서 실제 사용
  }
}

.box {
  width: 200px;
  height: 100px;
  margin: 20px;
  border-radius: 10px;
  background-color: royalblue;
}
.box.built-in {
  background-color: #a03571;
  background-color: #6d8ce8;
  background-color: #3664ec;
  background-color: #4c6fd6;
  background-color: garayscale(royalblue);
  background-color: #be961e;
  background-color: rgba(65, 105, 225, 0.5);
}
.box:hover {
  background-color: #214cce;
}

13.가져오기

@import url("./sub.scss"); // 외부의 root 경로에 있는 sub.scss 가져오기

@import "./sub", "./sub2"; // 축약 해서 확장자도 생략해서 사용가능... , 쉽표를 통해서 multiple 로 가져올 수 있음

$color: royalblue;

.container {
  h1 {
    color: $color;
  }
}

// in sub.scss
body {
  .container {
    background-color: orange;
  }
}

// in sub2.scss
body {
  background-color: royalblue;
}

/* imported 된 code가 css 에 변환되서 나옴 */
body .container {
  background-color: orange;
}
body .container {
  background-color: orange;
}

body {
  background-color: royalblue;
}

.container h1 {
  color: royalblue;
}

14.데이터 종류

// 데이터 종류

$number: 1; // .5, 100px, 1em
$string: bold; // relative, "../images/a.png"
$color: red; // blue, #FFF00, rgba(0,0,0,.1)
$boolean: true; // false
$null: null;
$list: orange, royalblue, yellow; // 마치 JS 에서 array 같다고 보면 됨
$map: (
  o: orange,
  r: royalblue,
  y: yellow,
);

.box {
  width: 100px;
  color: red;
  position: relative;
}

.box {
  width: 100px;
  color: red;
  position: relative;
}

15.반복문@each

// 반복문@each

$list: orange, royalblue, yellow; // 마치 JS 에서 array 같다고 보면 됨
$map: (
  o: orange,
  r: royalblue,
  y: yellow,
);

@each $c in $list {
  // $list 의 값을 받아서 반복적으로 $c 에다가 넣는다는의미임
  .box {
    color: $c;
  }
}

@each $key, $value in $map {
  // $map 같은 경우에는 key, value 로 나눠서 맵핑하게 됨
  .box-#{$key} {
    color: $value;
  }
}

.box {
  color: orange;
}

.box {
  color: royalblue;
}

.box {
  color: yellow;
}

.box-o {
  color: orange;
}

.box-r {
  color: royalblue;
}

.box-y {
  color: yellow;
}

16.재활용@content

// 재활용@content

@mixin left-top {
  position: absolute;
  top: 0;
  left: 0;
  @content; // 나중에 필요에 의해서 추가되는 내용을 @content -> 나중에 bootstrap 사용시 알아 두면 좋음
}

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

🔶 🔷 📌 🔑

Reference

SCSS Official site - https://sass-lang.com/guide
HERORY Tech - https://heropy.blog/2018/01/31/sass/
The Sass Way - https://thesassway.com/

Share on

Twitter Facebook LinkedIn

Jacob Ko

SCSS 정리

SCSS

1.SCSS 개요

2.SCSS 설정

3.주석

4.중첩(Nest) with SassMeister

5.상위(부모)선택자 참조

6.중첩된 속성

07.변수

08.산술연술

09.재활용(Mixins)

10.반복문

11.함수

12.색상 내장 함수

13.가져오기

14.데이터 종류

15.반복문@each

16.재활용@content

Reference

Share on

Leave a comment

You may also enjoy

07.Authentication in SwiftUI

06.Connect Firebase to Xcode in SwiftUI

TCA Architecture in SwiftUI

UICollectionView