SASS:Variables and Nesting

Sass사용해보기

Sass의 주요 features Variables

//variables
$color-primary: #f9ed69; //yello color
$color-secondary:#f08a5d; //orange
$color-tertiary: #b83b5e;
$color-text-dark:#333;
$color-background: #fff;
$width-button:150px;
//색상 변수 지정하기


nav {
  margin:30px;
  background-color: $color-secondary;
  
  &::after {
  content:"";
  clear:both;
  display:table;
}
}

색상변수를 지정한 후 nav 태그에 적용해본다

변수를 사용할때는 $(dollar sign)을 표기해야한다.

변수를 사용하면 편리한점은?

색상을 변경해야할 때 색상에 적용된 태그와 class명을 찾아
변경해주지 않아도 변수에 설정된 색상만 변경하면 된다 따라서 편리하게 사용가능하다

Sass의 주요 features Nesting

.navigation {
  list-style:none;
 float:left;
  
  li {
    display:inline-block;
    margin-left:30px;
    
      &:first-child {
        margin:0;
  }
    a {
      text-decoration:none;
      text-transform:uppercase;
       color:$color-text-dark;
    }
    
  }
  
}

위의 태그에서 확인할 수 있는 것처럼 하위태그를 선택할 때
상위태그에서 바로 설정해줄 수 있다

li {
    display:inline-block;
    margin-left:30px;
    
      &:first-child {
        margin:0;
  }
  
  //여기서 & 표시는 path(list tag)를 나타낸다

Sass를 사용해서 보다 효율적인 css 코드를 작성해보자.