[SCSS] CSS, SCSS를 공부해보자

래림·2024년 6월 25일

React

목록 보기

9/10

어언 5년전..20살에 대학교를 들어가자마자 배운게 css다. 손코딩으로 셤봤던게 5초전 같은데.. 쓰던거만 쓰고 기억 안나다시 공부해보려 한다.

sass

Sass(Syntactically Awesome Style Sheets)는 css 전처리기로 css를 더 편리하게 쓸 수 있도록 도와준다.

scss

기본 SASS 문법은 CSS 형태와 다르기 때문에 러닝커브가 있다.
또한 sass는 indentation을 신경써야하고, 세미콜론을 쓰지 않는게 보기좋지 않아서 scss를 쓰기로했다.

그리고 써보고싶다. emotion, styled component 처럼 css in js만 써봤기 때문에 sass도 사용해보고싶었다. 사이드 프로젝트니까^^^

환경설정

환경
mac os, webstorm

설치

npm install -g sass

설정
webstorm으로 scss FileWathchers 설정하기가 생각보다 쉬웠다.

setting -> Tools -> FileWatchers

[ 결과 ]

css 중첩

scss는 중첩하여 쓸 수 있다. 아래 코드와 같이 작성할 수 있는데, 갠적으론 이게 인간이 이해하기엔 훨씬 좋은코드라 생각한다. container와 p를 중복하여 작성하지 않고도 계층구조를 직관적으로 이해할 수 있기 때문이다. 직관적인 코드 너무좋타..

// index.html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>sass 빌드</title>
    <link href="style/main.css" rel="stylesheet">
</head>

<body>
   <div class="container">
       <h1>제목으로 쓴 내용</h1>
       <p>문단으로 쓴 내용. 뭐라고 써야 할 지 몰라<span>아무말</span>sdf</p>
   </div>

</body>
</html>

// 중첩하지 않은 css

.container {
    background-color: #ff0;
}
.container h1 {
    color: red;
}
.container p {
    color: tomato;
}
.container p span {
    color: blue;
}

// 중첩하여 작성

.container{
  background-color:yellow;

  h1{
    color:red;
  }

  p{
    color:tomato;

    span{
      color:blue;
    }
  }
}

// 이런식으로도 중첩 가능
.background-img{
  width: 100%;
  height: auto;
  background: {
    image: url('/assets/sample.jpg');
    position: center center;
    repeat: no-repeat;
  }
}

압축

이 명령어를 쓰면 압축을 할 수 있다. 그런데 압축은 왜하는거지?

css 파일 용량을 줄여서 더 빠른 로딩속도를 위해 (사용자 경험 개선)

// 터미널에 입력
sass --style compressed style/main.scss:style/main.css

// 압축된 css
.container{background-color:#ff0}.container h1{color:red}.container p{color:tomato}.container p span{color:blue}/*# sourceMappingURL=main.css.map */

네임스페이스 속성 중첩, 단축 속성 중첩

이름보고 어려워보여서 솔직히 쫄았다. 그런데 그냥 편한거였다.

위아래는 같은 코드이다. 아래의 코드처럼 font 속성끼리 모아서 그룹화 할 수 있다. 이전에는 주석이나 코드위치만 모아두는 방향으로 그룹화 했는데, 코드상에서 font로 그룹화 할 수 있는게 너무 좋은거같다.

p{
  font-style: italic;
  font-weight: 900;
  font-size: 32px;
}

p{
 font: {
  style: italic;
   weight: 900;
   size: 32px;
 };
};

의사클래스 : 특정한 상태에서만 적용되는 스타일. hover상태, active 등등..
& : 상위선택자. 자신이 속한 상위선택자를 뜻함.

따라서 아래와 같이 쓸 수 있다. A코드와 B코드는 같은 결과를 낸다.

// A코드
button:hover {
  color: blue;
}

// B코드
button{
	&:hover{
    	color: blue;
        }
}

예제
[ 결과 ]

[ 코드 ]

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>sass 빌드</title>
    <link href="style/main.css" rel="stylesheet">
</head>

<body>
    <button class="first-btn">첫번째</button>
    <button class="second-btn">두번째</button>
</body>
</html>

.first-btn{
  &:hover{
    background:{
      color: red;
    };
  };
}


.second-btn{
  &:hover{
    background:{
      color: blue;
    }
  }
}

변수

$main-color: tomato;
$font-color: white;

button{
  &:nth-child(1){
    color:$font-color;
    background-color: $main-color;
    width: 100px;
  }
  &:nth-child(2){
    color:$font-color;
    background-color: $main-color;
    width: 200px;
  }
  &:nth-child(3){
    color:$font-color;
    background-color: $main-color;
    width: 300px;
  }
}

mixin

mixin은 템플릿같은 것이다. 반복되는 스타일을 mixin으로 지정하고 호출해서 쓸 수 있다. 인자 지정, 인자의 기본값 지정도 된다.

// mixin 정의
@mixin box-style($bg-color:yellow,$font-color:green){ // 인자 및 기본값 정의
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $bg-color;
  color:$font-color;
}

.one{
  @include box-style($bg-color:red); // mixin 사용 및 인자전달
}

.two{
  @include box-style(purple,yellow); // mixin 사용 및 인자전달
}

@content

mixin으로 정의한 스타일에 추가적으로 덧붙일게 있다면 mixin안에 @content를 작성하면 된다. include로 호출 할 때 필요한 스타일을 덧붙여 작성하여 사용하면 된다.

[ 결과 ]
결과를 보면 padding이 적용된걸 확인 할 수 있다.

[ 코드 ]

@mixin box-style($bg-color:yellow,$font-color:green){
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $bg-color;
  color:$font-color;
  @content // content 작성
}

.one{
  @include box-style($bg-color:red){
    padding: 50px; // 추가적인 스타일 작성
  }
}

.two{
  @include box-style(purple,yellow);
}

@extend

기본 button-basic 스타일을 정의 한 후, extend를 사용해 확장코드를 쓸 수 있다.

.button-basic{
  font-weight: bold;
  border-width: 1px;
}

.button-confirm {
  @extend .button-basic;
  border-color: blue;
}

.button-error {
  @extend .button-basic;
  border-color: red;
}

@placeholder

위의 코드에서 button-basic 스타일을 html에서 쓸게 아니라면, placeholder를 사용해서 기본 스타일을 정의할수도 있다. %를 사용해서 button-basic을 만들고 @extend로 가져다쓰면 된다.

%button-basic {
  font-weight: bold;
  border-width: 1px;
}

.button-confirm {
  @extend %button-basic;
  border-color: blue;
}

.button-error {
  @extend %button-basic;
  border-color: red;
}

mixin과 extend의 차이

는 다른 블로그에서 잘 설명해주고 있다.
선택자들끼리 의미적으로 연관되어있으면 @extend를, 그렇지 않고 속성만 겹치는 관계라면 mixin을 쓴다고 한다. 예를들어, element를 중앙정렬하는 코드가 '의미적으로 연결되어있지 않은 선택자'들 사이에서 너무 반복된다 싶으면 mixin을 사용하면 된다.
참고1
참고2