[HTML/CSS] CSS Sass(Syntactically Awesome Stylesheets)란?

1. 정의

• CSS의 확장된 버전으로, 스타일 시트를 더 효율적으로 작성할 수 있게 해주는  스타일 시트 언어

2. 기본 문법

• 변수 (Variables) 문법을 이용하면 다음과 같은 형태로 변수를 생성해서 사용가능하다.

$primary-color: #3498db;
$font-size: 16px;

body {
  background-color: $primary-color;
  font-size: $font-size;
}

 

• 중첩 규칙(Nesting)을 사용하면 시각적으로 부모-자식관계를 확인하기 편해 가독성이 좋은 CSS를 작성가능하다.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;
      margin-right: 10px;

      a {
        text-decoration: none;
        color: $primary-color;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

• 믹스인(Mixin) 규칙을 이용하면 함수처럼 작성이 가능하다.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

• 익스텐드(@extend)문법 : 작성한 스타일을 공유하면서 중복을 피하기 위해서 사용하는 문법이다. 

// 기본 스타일 정의
.button {
  padding: 10px;
  font-size: 16px;
}

// .primary-button은 .button의 스타일을 상속하고 확장
.primary-button {
  @extend .button;
  background-color: #3498db;
  color: #fff;
}

.secondary-button {
  @extend .button;
  background-color: #2ecc71;
  color: #fff;
}

/*
% 기호는 .대신 쓸 수 있는 임시클래스으로 

CSS파일에서 클래스로 컴파일하지 않고싶을 때 쓰는 기호입니다.

컴파일하고나면 %기호 안에 있는 것들은 흔적도 없이 사라진다.

*/

 

그 외에는 for 등 다양한 문법이 있다.

/*for문 문법 */
@for 변수 from (시작 숫자) to (끝 숫자){...}
/*for문 예시 */
@for $i from 4 to 6{
	.test_#{$i}{
     width:i;
    }
}

 

또한 미디어 쿼리를 Scss를 통해 구현도 가능하다.

그리고 @use , @import를 사용하면 여러개의 파일로 클래스를 나누고 가져오는것이 가능하다.

/* extend 문법 */
// 기본 스타일 정의
.button {
  padding: 10px;
  font-size: 16px;
}

// 미디어 쿼리에서 .button 스타일을 상속하고 추가 스타일 정의
@media screen and (min-width: 768px) {
  .large-button {
    @extend .button;
    font-size: 20px;
  }
}

// 미디어 쿼리에서 .button 스타일을 상속하고 추가 스타일 정의
@media screen and (max-width: 767px) {
  .small-button {
    @extend .button;
    background-color: #ec407a;
    color: #fff;
  }
}
/* mixin 문법 */

/* 1. 변수작성 */
$mobile: 335px;
$tablet: 758px;
$desktop: 1024px;

/* 2. 코드 작성 */

@mixin mobile {
  @media (min-width: #{$mobile}) and (max-width: #{$tablet - 1px}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$tablet}) and (max-width: #{$desktop - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$desktop}) {
    @content;
  }
}


/* 3. 미디어 쿼리 작성 */
@include mobile {
  .text {
    width: 300px;
  }
}

@include tablet {
  .text {
    width: 600px;
  }
}

@include desktop {
  .text {
    width: 900px;
  }
}