SASS

NASTAR·2023년 3월 27일

SASS란?

CSS로 컴파일 되는 스타일 시트 확장 언어, CSS 전처리기의 하나.
개발은 Sass를 기반으로 한 후, CSS로 export한다.
브라우저는 Sass파일을 직접 읽지 못함. 그러기 때문에 일반 CSS로 컴파일 해야함.

1. 파일 분리

메인 SCSS파일은 언더스코어없이 작성하고 나머지 SCSS파일은 언더스코어로 파일명이 시작되어야 한다.
언더 스코어를 붙이는 이유 - 컴파일되는 것을 피하기 위해서이다. @import로 main.scss에서만
컴파일 될 수 있도록 붙이는 것임.

styles.scss(메인 파일) = 나머지 SCSS파일들 import한다.
레이아웃별, 기능 별로 분할해서 사용가능하기 때문에 코드를 관리하기 편리해진다.

변수 생성하는 법

변수를 만들 때는 $기호를 사용하면 된다.

$변수 : 값

$bgColor : #fff

scss파일


$nastar1: #000;
$nastar2: #0ff;
// 한글변수는 권장하지 않음.
// 고유 명사 같은 경우는 한글 변수를 사용할 수 있다.

$큰글자: 34px;

.one {
    background-color: $nastar2;
    font-size: $큰글자;
}

.two {
    background-color: $nastar2;
    font-size: $큰글자;
}

css파일


.one {
  background-color: #0ff;
  font-size: 34px;
}

.two {
  background-color: #0ff;
  font-size: 34px;
}/*# sourceMappingURL=008_변수선언.css.map */

Mixin

Mixin은 코드를 재사용하기 위해 만들어지 기능이다.
선택자들 사이에서 반복되고 있는 코드들은 mixin을 사용하여 코드 반복을 줄입니다. 중복되는 코드는 mixin으로 만들어 놓고 원하는 선택자 블럭에 mixin을 include하면 된다.

Mixin 사용법
@mixin 이름(매개변수) // 생성
@include 이름(인수) //사용

scss파일

@mixin box {
    width: 100px;
    height: 100px;
}

.card {
    @include box;
    background: blue;
}

.profile {
    @include box;
    background: red;
}

CSS 파일

.card {
  width: 100px;
  height: 100px;
  background: blue;
}

.profile {
  width: 100px;
  height: 100px;
  background: red;
}/*# sourceMappingURL=016.믹스인.css.map */

다른예시를 보자.

scss파일

// Scss 
// box의 사이즈를 정해주는 mixin
@mixin size($width, $height, $padding){
	width : $width;
	height : $height;
	padding : $padding;
}

article{
	@include size(100%, 65px, 10px 20px);
}

article {
  width: 100%;
  height: 65px;
  padding: 10px 20px;
}

@mixin one {
    width: 100px;
    height: 100px;
    color: white;
    @content;
}

.test1 {
    @include one;
}


.test2 {
    @include one{
        background-color: red;
    };
}

.test3 {
    @include one{
        background-color: red;
        font-size: 32px;
    };
}

CSS 파일

.test1 {
  width: 100px;
  height: 100px;
  color: white;
}

.test2 {
  width: 100px;
  height: 100px;
  color: white;
  background-color: red;
}

.test3 {
  width: 100px;
  height: 100px;
  color: white;
  background-color: red;
  font-size: 32px;
}/*# sourceMappingURL=025_믹스인_contents.css.map */

Extend

기능이 중복되어 mixin을 사용하고 extend를 사용하지 않는 기업도 많다.

조건문

scss파일

// Scss - for문
// for문을 이용해 nth-선택자에게 각각의 image를 배경에 넣어준다.
@for $i from 1 through 5 {
    .photo-box:nth-child(#{$i}) {
      background-image: url("../assets/phoster#{$i}.png");
    }
  } 
  // 범위 1이상 5이하
  // for문에서 1부터 5까지 반복하라는 의미입니다. 총 5번 반복되면서 코드가 실행된다.
  // 만약 from 3 throught 8 이라면 3에서 8까지 6번 실행된다.

  @for $i from 10 through 15 {
    .photo-box:nth-child(#{$i}) {
      background-image: url("../assets/img_#{$i}.png");
    }
  }


// 현업사용예시
  @mixin iconBg($path, $start, $end) {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    @for $i from $start through $end {
        &:nth-child(#{$i}) {
            background-image:url($url + '#{$path}#{$i}.png');
        }
    }
}

CSS 파일

.photo-box:nth-child(1) {
  background-image: url("../assets/phoster1.png");
}

.photo-box:nth-child(2) {
  background-image: url("../assets/phoster2.png");
}

.photo-box:nth-child(3) {
  background-image: url("../assets/phoster3.png");
}

.photo-box:nth-child(4) {
  background-image: url("../assets/phoster4.png");
}

.photo-box:nth-child(5) {
  background-image: url("../assets/phoster5.png");
}

.photo-box:nth-child(10) {
  background-image: url("../assets/img_10.png");
}

.photo-box:nth-child(11) {
  background-image: url("../assets/img_11.png");
}

.photo-box:nth-child(12) {
  background-image: url("../assets/img_12.png");
}

.photo-box:nth-child(13) {
  background-image: url("../assets/img_13.png");
}

.photo-box:nth-child(14) {
  background-image: url("../assets/img_14.png");
}

.photo-box:nth-child(15) {
  background-image: url("../assets/img_15.png");
}/*# sourceMappingURL=026_반복문.css.map */