sass - .scss & .sass 차이점, sass 에서 변수 지정하기

.scss & .sass 차이점

---

https://www.sassmeister.com/

간단하게 .scss, .sass 테스트 가능

SassMeister | The Sass Playground!

 

가장 큰 차이점은 indented / nested의 구조이다

scss file의 경우 css에서 가능했던 모든 기능을 사용 가능하고 nested 구조를 가지며 sass file은 indented 구조를 가진다

/****				.scss file				****/



h1 {
  color: blue;
  font-size: 2rem;
  
  span {
    color: red;
    font-size: 3rem;
  }
}



/****				.sass file				****/


h1
  color: blue;
  font-size: 2rem;
  
  span
    color: red;
    font-sizr: 3rem;

 

sass (.scss) 에서 변수 (variable)를 지정하여 사용하는 방법

---

• 변수를 지정하는 방법은 크게 &~~~: ~~~; 형태의 한 가지와 map을 이용한 지정의 두 가지로 나뉜다

// Sass Variables

$color-primary: #303960;
$color-secondary: #ea9a96;
$color-tertiary: #f8b24f;
$color-white: #fff;



// Sass Maps

$colors: (
  'color-primary': #303960,
  'color-secondary': #ea9a96,
  'color-tertiary': #f8b24f,
  'color-white': #fff,
);

이렇게 지정 한 후에 사용하는 방법은 다음과 같다

section {
  background-color: map-get($colors, color-primary);
}

h2 {
  color: $color-secondary;
}

 

map 기능을 이용하여 변수를 가져오고 싶은 경우 map-get 함수를 불러오면 되고 단순히 $ 표시로 변수를 만들었다면 똑같이 써주면 적용이 된다.