Sass기본 알아보기

1.SASS란

CSS는 규모가 커지면 복잡해지고 유지관리가 어려워지는데 이때 CSS 전처리기가 도움이 될 수 있다.

CSS전처리기는 CSS의 확장된 기능을 제공하여 보다 간단하고 효율적으로 CSS를 작성하게 도와주고 이를 CSS로 변환하여

웹페이지에 적용한다.Sass(Syntactically Awesome Style Sheets)는 css의 대표적인 전처리기로 css를 더 쉽게 작성하고

쉽게 유지보수 할 수 있도록 도와주는 도구이다.

 

SASS와 SCSS

Sass는 두 가지 확장자(scss/sass)를 지원한다. Sass가 처음 나왔을 때 sass만 지원하였다.

즉 Sass는 Scss의 문법을 포함하는 상위 집합이라고 할 수 있다.

이 둘의 가장 큰 차이점은 문법에 있다.

Sass

• Sass는 중괄호와 세미클론을 사용하지 않는 문법을 갖는다.
• Sass는 들여쓰리고 구분하며 구문을 간결하게 작성할 수 있다.

Scss

• 중괄호와 세미클론을 사용하여 CSS와 거의 동일한 문법을 갖는다.
• sass의 이점을 취하면서 css와의 호환성을 유지할 수 있어 scss가 더 많이 사용된다.

/* sass */
.container
  width: 100%
  margin: 0 auto
  .inner
    padding: 20px
    
/* scss */
.container {
  width: 100%;
  margin: 0 auto;
  .inner {
    padding: 20px;
  }
}

 

2.Sass의 기능

변수(Variables)

• SCSS에서는 변수기능을 제공한다. 자주 사용하거나 재사용하려는 정보를 저장해 일관성있게 사용할 수 있다
• 기호 $ 를 써서 변수를 생성한다.
• 변수는 블록{} 내에서만 유효 범위를 갖는다.
• 변수는 재할당이 가능하다.

/* css */
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

/* scss */
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

 

Mixins

• 재사용할 CSS 그룹을 만들 수 있다.
• 선언된 Mixin을 사용하기 위해서는 @include가 필요하다.
• Mixin은 함수처럼 매개변수를 받을 수 있다. 

/* scss */
@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

 

중첩(Nesting)

• 상위 선택자의 반복을 피하고 계층 구조를 나타낼 수 있다.
• 지나치게 중첩된 구문은 유지 관리가 어려울 수 있으니 조심한다.
• 중첩 안에서는 & 키워드를 사용하여 부모 선택자를 참조
• @at-root키워드를 사용하여 중첩 안에서 생성하고 중첩되지 않은 요소에 적용하기 위해 사용

/* CSS */
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

/* SCSS - nav 키워드를 반복하지 않는다. */
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { 
    display: inline-block; 
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    &:hover{ 
      color:red;
    }
  }	
}

 

/* scss */
.list_item{
  $w:150px;
  $h:35px;
  $border:1px soild #e0e0e0;
    li{
      width:$w;
      height:$h;
      border
    }
    @at-root .box {
      width: $w;
      height: $h;
    }
}

/* css */
.list li{
  width:150px;
  hegiht:35px;
}
.box{
  widht:150px;
  hegith:35px;
}
/* 변수는 블록 범위 내에서만 사용가능하다.
따라서 범위 내에 변수를 사용하면서 중첩된 구조가 아닌 요소를 선택할 때 사용한다. */

 

모듈화(Modularity)

• Sass는 CSS를 모듈화 하고 쉽게 유지보수 할 수 있는 모듈화 기능을 제공한다.
• @use와 함께 사용된다.

⚠️파일 분할(Partias)

• 유지보수 관리가 쉽도록 Partials기능을 지원한다.
• 파일 이름이 _로 시작되도록 설정하여 부분 파일임을 Sass에게 알릴 수 있다.
• @import 또는 @use를 통해 가져올 수 있는데 @use를 쓰도록 권장한다.

⚠️import와 use의 차이

import는 파일을 가져올 때 내용 전체가 복사된다. 이로 인해 스타일이 중복되거나 파일의 의존성이 높아질 수 있다.

use는 모듈 시스템을 따르며 가져온 파일이 모듈로써 동작한다.

import는 변수,믹스인,함수등이 전역 스코프에 추가된다.use는 각 모듈의 네임 스페이스를 유지한다. 따라서 가져온 변수,믹스인 등을 사용하려면 해당 모듈이름과 함께 사용해야한다.

/* CSS */
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

/* _base.scss */
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

/* styles.scss */
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

 

확장과 상속(Extend/Inheritance)

• CSS 규칙을 상속하고 확장할 수 있는 기능을 제공
• @extend를 통해서 확장할 수 있다.

/* 기본 스타일 */
.btn {
  padding: 10px;
  border: 1px solid #ccc;
}

/* .btn-primary는 .btn의 스타일을 상속받음 */
.btn-primary {
  @extend .btn;
  background-color: blue;
}

 

연산(Operators)

• 연산자 기능을 제공하여 계산된 값을 사용할 수 있다.
• 기본적인 산술 연산자뿐만 아니라 비교,논리 연산자 등을 지원한다.

$width: 100px;
$padding: 10px;

.element {
  width: $width + $padding; // 숫자 연산
  height: 2 * $width; // 곱셈
  margin: $width / 2; // 나눗셈
}

 

 

https://sass-lang.com/guide/#preprocessing