내가 보려고 쓰는 SCSS 문법 정리

업무 할 때 자주 쓰는 SCSS 문법 정리

📢 SCSS ↔ CSS Converter

CSS TO SCSS

• https://beautifytools.com/css-to-scss-converter.php (⭐⭐⭐내가 주로 쓰는 사이트)
• https://css2sass.herokuapp.com/

SCSS TO CSS

• https://jsonformatter.org/scss-to-css (내가 쓴 SCSS에 오류가 없는지 확인할 때 씀)

📢 Gulp

• 빌드 자동화 도구인 Gulp에서는 gulpfile.js를 만들어 다음과 같이 설정할 수 있음

// gulpfile.js
var gulp = require('gulp')
var sass = require('gulp-sass')

// 일반 컴파일
gulp.task('sass', function () {
  return gulp.src('./src/scss/*.scss')  // 입력 경로
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./dist/css'));  // 출력 경로
});

// 런타임 중 파일 감시
gulp.task('sass:watch', function () {
  gulp.watch('./src/scss/*.scss', ['sass']);  // 입력 경로와 파일 변경 감지 시 실행할 Actions(Task Name)
});

📢 SCSS 기본 문법

중첩(Nesting)

.container {
  width: 100%;
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      color: #0066ff;
      span {
        padding: 20px;
      }
    }
  }
}

💡SCSS TO CSS

.container {
	 width: 100%;
}
 .container ul {
	 display: flex;
	 flex-wrap: wrap;
}
 .container ul li {
	 color: #06f;
}
 .container ul li span {
	 padding: 20px;
}

Ampersand(상위 선택자 참조)

중첩 안에서 & 키워드는 부모 선택자를 참조하여 치환함

ul{
  .list-item{
    color: #333;
    &.is-active{
      color: #0066ff;
    }
    &:first-child{
      font-size: 1.6rem;
    }
    &:not(:first-child){
      font-size: 1.4rem;
    }
  }
}

.col {
  &-sm-2{
    width: 20%;
  }
  &-sm-3{
    width: 30%;
  }
  &-sm-5{
    width: 50%;
  }
  &-sm-7{
    width: 70%;
  }
  &-sm-8{
    width: 80%;
  }  
}

💡SCSS TO CSS

ul .list-item {
	 color: #333;
}
 ul .list-item.is-active {
	 color: #0066ff;
}
 ul .list-item:first-child {
	 font-size: 1.6rem;
}
 ul .list-item:not(:first-child) {
	 font-size: 1.4rem;
}

.col-sm-2 {
	 width: 20%;
}
 .col-sm-3 {
	 width: 30%;
}
 .col-sm-5 {
	 width: 50%;
}
 .col-sm-7 {
	 width: 70%;
}
 .col-sm-8 {
	 width: 80%;
}
 

@at-root(중첩 벗어나기)

.box {
  .tit {
    font-size: 56px;
    line-height: 1.6;
  }
  @at-root .desc {
    font-size: 30px;
    line-height: 1.4;
  }
}

💡SCSS TO CSS

.box .tit {
  font-size: 56px;
  line-height: 1.6;
}
.desc {
  font-size: 30px;
  line-height: 1.4;
}

중첩된 속성

padding- , margin-, font-등 동일한 네임 스페이스를 가지는 속성을 다음과 같이 사용 가능

.list-item {
  font: {
    weight: 700;
    size: 50px;
    family: sans-serif;
  }
  margin: {
    top: 50px;
    bottom: 60px;
  }
  padding: {
    left: 30px;
    right: 30px;
  }
}

💡SCSS TO CSS

.list-item {
  font-weight: 700;
  font-size: 50px;
  font-family: sans-serif;
  margin-top: 50px;
  margin-bottom: 60px;
  padding-left: 30px;
  padding-right: 30px;
}

변수(Variables)

반복적으로 사용되는 값을 변수로 지정할 수 있음
변수 앞에는 항상 $를 붙임

// layout padding
$paddingTablet: 30px;
$paddingMobile: 40px;

// color
$color-white: #ffffff;
$color-black: #000000;
$color-red: #c00f0f;

.wrapper {
  padding: $paddingTablet;
  .box-01 {
    color: $color-black;
  }
  .box-02 {
    color: $color-white;
  }
  .box-03 {
    color: $color-red;
  }
}

💡SCSS TO CSS

.wrapper {
  padding: 30px;
}
 .wrapper .box-01 {
  color: #000;
}
 .wrapper .box-02 {
  color: #fff;
}
 .wrapper .box-03 {
  color: #c00f0f;
}

가져오기(Import)

@import로 외부에서 가져온 sass파일은 모두 단일 css 출력파일로 병합됨

@import "style.css";
@import "http://example.com/ex";
@import url(example);
@import "../mixins";

논리(Boolean)

$width: 150px;
.list-item {
  @if not($width > 200px) {
    height: 500px;
  }
}

💡SCSS TO CSS

.list-item {
  height: 500px;
}

---

$width: 150px;
.list-item {
  @if not($width > 100px) {
    height: 500px;
  }
}

💡SCSS TO CSS

.list-item {
  height: 500px;
}

---

$width: 150px;
.list-item {
  height: if($width > 200px, 300px, 500px);
}

💡SCSS TO CSS

.list-item {
  height: 500px;
}

재활용(Mixins)

@mixin으로 선언해서
@include로 사용하면 됨

@mixin font-weight($fw) {
	@if $fw == ExtraBold {
		font-weight: 800;
	}
	@if $fw == Bold {
		font-weight: 700;
	}
	@if $fw == SemiBold {
		font-weight: 600;
	}
	@if $fw == Medium {
		font-weight: 500;
	}
	@if $fw == Regular {
		font-weight: 400;
	}
	@if $fw == Light {
		font-weight: 300;
	}
	@if $fw == ExtraLight {
		font-weight: 200;
	}
	@if $fw == Thin {
		font-weight: 100;
	}
}

h1 {
  @include font-weight(SemiBold);
}
p {
  @include font-weight(Medium);
}

💡SCSS TO CSS

h1 {
  font-weight: 600;
}
p {
  font-weight: 400;
}

---

@mixin line-height($font, $line) {
  $line-height: ($line * 100 / $font) * 1%;
  line-height: #{$line-height};
}
h1 {
  @include line-height(30, 46)
}
p {
  @include line-height(24, 30)
}

💡SCSS TO CSS

h1 {
  line-height: 153.3333333333%;
}
p {
  line-height: 125%;
}

👩‍💻 참고 링크

• https://heropy.blog/2018/01/31/sass/
• https://velog.io/@kysung95/SCSS-SCSS-%EC%A0%81%EC%9A%A9%EA%B8%B0

Last Updated: 2021-05-31
내용 추가 예정