SCSS 😀

SCSS 는 CSS 를 좀더 쉽게 작성시켜주는 전처리기(Compiler) 입니다.

가장 눈에 뛰는 이점은 중첩을 간소화 시켜줍니다.

.conatiner {

}
.conatiner .inner{

}

.conatiner .inner .menu {

}

.conatiner .inner .menu .main-menu{

}

CSS는 하위 요소를 늘릴때마다 상위 요소를 전부 적어줘야 합니다.
하지만 SCSS 는 프로그래밍 언어 처럼 중첩을 지원합니다.

.conatiner{
  .inner{
    .menu{
      .main-menu{
        
      }
    }
  }
}

선택자

자식선택자
> 꺽쇠 기호를 써줍니다.

.conatiner{                        //.conatiner > .inner { }
  >.inner{}}

일치선택자
& 엠퍼센드 기호를 써줍니다.

//scss
.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}

.list li:last-child {
  margin-right: 0;
}

혹은 상위 선택자를 참조 할수도 있습니다.

.fs {
  &-small { font-size: 12px; }
  &-medium { font-size: 14px; }
  &-large { font-size: 16px; }
}

.fs-small {
  font-size: 12px;
}
.fs-medium {
  font-size: 14px;
}
.fs-large {
  font-size: 16px;
}

중첩속성

margin : {}; 는 margin- 로 바뀝니다

body {
  margin:{
    top:20px;
    right: 30px;
    bottom: 40px;
    left: 10px;
  };
}

body {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 40px;
  margin-left: 10px;
}

변수

SCSS 에서는 변수를 선언하고 지정할수 있습니다.

body {
 top:100px;
 .item{
   width:100px;
   height: 100px;
 } 
}

$ 달러 사인으로 size:100px; 를 선언하고 $size 를 입력하면 동일하게 출력됩니다.

$size:100px;
body {
 top:$size;
 .item{
   width:$size;
   height: $size;
 } 
}

다만 선언된 곳에 따라 변수사용이 가능합니다.
블록 안에 선언되면 그 블록에서만, 전역 공간에서 선언되면 css 전체에서 사용이 가능합니다.

산술연산

아래 산술연산을 해보겠습니다.

SCSS
box {
 width: 50px + 20px;
 height: 40px - 20px;
 margin-top: 50px*2;
 margin-bottom: 40px / 2;
 margin-left: 20px % 6 ;
}

CSS
box {
  width: 70px;
  height: 20px;
  margin-top: 100px;
  margin-bottom: 40px/2;      // 계산안됨
  margin-left: 2px;
}

다만 문제가 있습니다.

css 에서는 / 기호를 단축 기호로 인식 하기 때문에 아래와 같은 방법을 사용해야 합니다.

1. 변수 선언하기 변수를 선언하고 나누기 기호를 사용한다. ex) $size / 2
2.괄호를 사용한다 (40px / 2) == 20px

! 산술연산은 같은 단위끼리 계산해야합니다.
만약 다른 단위 끼리 계산하려면 calc() 함수를 이용해야합니다.

@mixin @include

@mixin 을 이용하면 속성값의 모음을 변수처럼 사용할수 있습니다.

SCSS
@mixin size {           // size 선언
  height: 100px;
  width: 100px;
  color:green
}

.container{
  @include size;            //size 대입
  .item{
    @include size;
  }
}

CSS
.container {
  height: 100px;
  width: 100px;
  color: green;
}
.container .item {
  height: 100px;
  width: 100px;
  color: green;
}

만약 .container 는 100px 으로 item은 50px 로 바꾸려면 어떻게 해야할까요?
@mixin 는 선언할때 인수를 받을수 있습니다.

SCSS
@mixin size($sz) {
  height: $sz;
  width: $sz;
  color:green;
}

.container{
  @include size(100);
  .item{
    @include size(50);
  }
}

.container {
  height: 100;
  width: 100;
  color: green;
}
.container .item {
  height: 50;
  width: 50;
  color: green;
}

만약 일일히 인수값을 대입하는게 번거로울때는 매개변수에 기본값을 설정해줄수 있습니다. @mixin size($sz:100px) 기본값 그대로 사용하고싶을떈 @include size 그대로 사용할수 있죠로 사용할수 있죠

참고자료 : https://heropy.blog/2018/01/31/sass/