CSS보다는 간편한 SCSS!👍

CSS를 이용해 웹 사이트를 스타일링 하다보면 선택자가 엄청 길어지고 반복해서 써야하는 낭비가 심하다는 것을 느낀다. 나중에 다시 보면 더 헷갈리기도 하고 코드 줄도 어마무시하게 늘어난다. 그래서 CSS 쓰기가 싫어질 정도인데 훨씬 간편하고 여러 기능이 있는 SCSS를 쓴다면 이 불편함을 해결할 수 있다!
오늘은 SCSS 문법에 대해 기록해보려 한다. ㅎㅎ

SCSS를 알게 되면 CSS는 못쓴다..!

사실 무언가를 배운다는게 부담되는 것은 사실이다. 안그래도 정말 배울게 많은데 CSS 관련해서도 공부하라니, 처음엔 그냥 CSS 쓰지 뭐 했던 것이 사실이다. 그.러.나!!
SCSS를 쓰면 절대 CSS를 쓰지 못한다는 말을 듣고 얼마나 편하길래..?
하면서 SCSS를 학습해 봤는데,....

정말 신세계다. 모두 SCSS 쓰세요.

CSS 대체하는 다양한 툴들이 있는데 SASS, SCSS를 가장 많이 쓰이는 것 같다.
SASS, SCSS는 같은 계열이긴 한데 문법은 조금 다르다고 알고 있다.

내가 생각하는 SCSS 특장점은

• 선택자 반복을 줄일 수 있다는 것!
• 변수를 사용하여 재사용 가능하게 스타일링 할 수 있다는 것!
• 함수 기능으로 노가다를 하지 않을 수 있다는 것!

이정도 되는 것 같다.

프론트 개발자라면 꼭 한 번 공부해보는 것을 추천한다!!

SCSS 시작

• SCSS라는 것 자체가 전처리기라서 작성한 SCSS를 CSS로 변환하는 컴파일 과정이 필요하다.
• 이것은 bundler를 통해 가능하고 나는 prcel-bundler를 사용했다.

Parcel-bundler 사용

• scss 문법을 사용하여 스타일링하면 parcel이 css로 자동으로 변환해줌
• parcel을 통해 프로젝트를 생성하고 보통 css 쓰던 것 처럼 link 태그로 연결해주면 된다. scss확장자는 파일.scss이다.

주석

• / ... / → 사용 가능 단, css로 변환시 없어짐
• / ... / → 본래의 css 주석. css로 컴파일 되더라도 사라지지 않음

중첩

• html 요소를 중첩 사용하여 중복되는 코드를 제거

.container {
  ul {
    li {
      .name {
        color: royalblue;
      }
      .age {
        color: orange;
      }
    }
  }
}

.container ul li .name {
  color: royalblue;
}
.container ul li .age {
  color: orange;
}

상위 선택자 참조

• ‘&’ 기호가 있는 곳에 상위 선택자가 치환되어 들어감
• 상위 선택자를 참조함

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

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

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

중첩된 속성

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

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

변수(Variables)

$size: 100px;

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

• 범수 유효범위 그대로 적용됨
• JS let 처럼 재할당 가능

SCSS 연산

div {
	width: 20px + 20px;
	height: 40px - 10px;
	margin: 30px / 2;
	padding: 10px % 7;
}
span 

• 단축 속성에서는 ‘/’ 로 구분 하기 때문에 단순히 ‘/’ 기호를 쓰면 적용이 안됨

SCSS에서 나누기 연산하기

• () 괄호로 묶어주기
• 변수를 이용해서 나눠주기
• 다른 산술연산과 같이 있는 경우
• calc()
  • 단위가 맞아야 연산이 가능하지만 calc()를 쓴다면 단위가 맞지 않아도됨

 .box {
 	background-color: royalblue;
 	width: calc(100% - 200px);
 	height: 100px;
 }

재활용

• 반복되는 스타일링을 변수처럼 mixin 키워드로 재활용 가능

// 수직수평 가운데 정렬하는 코드
@mixin center {
    display: flex;
    justify-content: center;
    aling-items: center;
}

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

@mixin box ($size: 100px, $color: tomato) {
    width: $size;
    height: $size;
    background-color: $color;
}

.container {
    @include box(200px, red);
    .item {
        @include box($color: green);
    }
}

.box {
    @include box;
}

• 함수와 유사한 방식으로 스타일링 할 수 있음
• 인수로 들어오는 값이 없어도 콜론으로 기본값 지정 가능!
• 인수는 순서대로 입력해야함!
• 키워드 인수를 사용하여 키워드가 인수와 일치한다면 적용 가능!

반복문

• 제로베이스 아님

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

• 보간을 통해 i 값을 활용 가능

함수

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

@function ratio{$size, $ratio) {
    @return $size * $ratio
}

.box {
    $width: 100px;
    width: $width;
    height: ratio($width, 9/16); //영상 비율
    @include center;
}

• mixin은 반복되는 스타일링을 적용하기 위해 쓰임
• function은 연산이 필요한 경우 사용

내장 함수

색상 관련

• mix(기존컬러, 새로운색상) ⇒ 색상을 섞어줌
• lighten($color, 10%) ⇒ 색상을 밝게 만들어줌
• darken($color, 10%) ⇒ 색상을 어둡게 만들어줌
• saturate($color, 10%) ⇒ 기존의 채도 올려줌
• desaturate($color, 10%) ⇒ 기존의 채도를 낮춰줌
• grayscale($color) ⇒ 색상을 회색으로 만들어줌
• invert($color) ⇒ 기존 색상을 반전시킴
• rgba($color, .5) ⇒ 투명도를 조절할 수 있음

.box {
    $color: royalblue;
    width: 200px;
    height: 100px;
    margin: 20px;
    border-radius: 10px;
    background-color: $color;
    &:hover {
        background-color: darken($color, 10%);
    }
    &.built-in {
        background-color: mix($color, blue);
    }
}

가져오기

@import './sub', './sub2';

• 기존 css에서는 다른 css를 가져오기 할 경우 url 함수를 썼어야 했음
• scss에서는 url 함수를 쓸 필요 없고 확장자도 없어도 됨
• 그리고 여러 scss 파일을 한번에 불러올 수 있음!

데이터 종류

• $nember: 1; → 숫자 데이터 // .5, 100px, 1em ...
• $string: bold; // relative, “../images/a.png” ...
• $color: red; → 색상 데이터 // blue, #FFFF00, rgba(0, 0, 0, .1)
• $boolean: true; → 불리언 데이터
• $null: null;
• $list: orange, royalblue, yellow; → 배열 데이터(JS의 배열이라고 생각하면됨)
• $map: (o: orange, r: royalblue, y: yellow); → 객체 데이터(JS의 객체라고 생각하면됨)

each - list, map 활용

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

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

mixin - content

@mixin left-top {
    position: absolute;
    top: 0;
    left: 0;
    @content;
}

.container {
    width: 100px;
    height: 100px;
    @include left-top;
}

.box {
    width: 200px;
    height: 300px;
    @include left-top {
        bottom: 0;
        right: 0;
        margin: 0;
    }
}

• mixin으로 재활용 할 때 스타일링 추가시 content를 활용할 수 있음!

출처

패스트캠퍼스 프론트엔드 초격차 패키지 - SCSS

마치며

아직 사용하기 익숙하지는 않지만, 잘 쓰면 정말 편하게 쓸 수 있는 것 같다. 내장함수들도 활용한다면 빠르고 쉽게 스타일링 적용이 가능하다. 앞으로 프로젝트 한다면 무조건 SCSS를 애용할 것 같다!