20210521 SCSS, Sass 01 : SCSS vs Sass, 주석, 중첩(자손선택자), 자식선택자, 상위선택자 참조, 충첩 속성, 변수, 산술연산

SCSS 01

• Sass(SCSS) 완전 정복! by HEROPY blog
• SCSS 공식 사이트
• CSS style 전처리 패키지로서 CSS에서 개발상 불편함을 해소시키고자 여러 기능들을 제공하는 패키지

SCSS vs Sass

• SCSS 와 Sass 형태의 두가지 문법이 존재함, SCSS는 기존의 CSS와 호환이 잘 되고 비슷함
• 둘의 문법 차이는 SCSS는 세미콜론, 중괄호를 사용하고 Sass는 인덴트로 범위를 인지하기 때문에 깔끔해 보이긴 하다.
• Sass의 문제점을 보완하기 위해서 만든 문법이 SCSS라서 SCSS의 문법을 익히는게 좋다. (기능은 똑같다.)
• 둘의 엄청큰 차이점은, Mixins에서 나타남

표기	SCSS	Sass
범위	{}	인덴트
명령종료	;	없음
mixin	@mixin	=
include	@include	+

SCSS

• CSS로 스타일 하는 경우, 하위 구조 스타일링을 할때마다 부모 요소까지 모두 작성해서 해야하는 반복이 생김 -> Sass의 중첩 기능을 사용하면 해결됨
• 색상이나 그런 값들을 계속해서 반복적으로 적다보면 오타가 날수도 있고 한번에 통일하여 재활용하고 통합적인 수정을 위해서 필요함
• CSS 전처리 도구(CSS Preprocessor) : CSS로 작업하지 않고 그전에 다른 형식으로 작업후 CSS로 변환(컴파일)한다고 해서 전처리라고 함
  • SCSS, Sass, less, stylus
• parcel 번들러가 SCSS파일의 존재를 알고 자동으로 sass 패키지를 설치함

주석

• CSS 에서 제공하는 /* */, JS에서 제공하는 // 둘다 지원
• /* */의 주석 방식은 compile 되어도 CSS 코드로 보여짐
• //에 따른 주석은 compile 되면 보여지지 않음

/* scss */
$color: tomato;

.container {
  h1 {
    color: $color;
    // background-color: orange;
    /* font-size: 60px; */
  }
}

/* css */
.container h1 {
  color: tomato;
  /* font-size: 60px; */
}

중첩 (자손 선택자의 경우)

• 특정 부모 요소 안에 있는 특정 자식 요소 모두를 선택하는 경우
• {} 안에 html 구조, JS 객체 구조 처럼 사용하면 됨

/* scss */
.container {
  ul {
    li {
      font-size: 40px;
      .name {
        color: royalblue;
      }
      .age {
        color: orange;
      }
    }
  }
}

/* css */
.container ul li {
  font-size: 40px;
}
.container ul li .name {
  color: royalblue;
}
.container ul li .age {
  color: orange;
}

자식 선택자를 사용하는 경우

• 특정 부모 요소 안에 있는 특정 자식 소요 모두 말고 바로 아래 자식요소 선택하는 경우
• >

/* scss */
.container {
  > ul {
    li {
      font-size: 40px;
      .name {
        color: royalblue;
      }
      .age {
        color: orange;
      }
    }
  }
}

/* css */
.container > ul li {
  font-size: 40px;
}
.container > ul li .name {
  color: royalblue;
}
.container > ul li .age {
  color: orange;
}

상위 선택자 참조

• 여러개의 클래스를 가진 요소를 조건으로 스타일링 하는 경우, 및 비슷한 특징의 선택자 이름으로 많은 선택자를 적는 경우
• &
• 기호가 포함된 자신과 상위 요소 참조
• & 기호가 상위 요소로 치환 됨

/* scss */
.btn {
  position: absolute;
  &.active {
    color: red;
  }
}

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

/* css */
.btn {
  position: absolute;
}
/* 상위 선택자도 같이 병기 되어 여러개의 클래스를 다루게 됨 */
/* &.active -> .btn.active */
.btn.active {
  color: red;
}

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

• 단순히 여러개를 가진 클래스 뿐만 아닌, 치환을 활용해서 공통된 특징을 같는 선택자 명을 빠르게 지을 수 있음

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

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

중첩된 속성

• 네임스페이스 : 이름을 통해 구분 가능한 범위를 만들어내는 것으로 일종의 유효범위를 지정하는 방법 (속성을 공통된 접두어? 같은 느낌으로 하는 것을 말함)
• 속성 네임스페이스 뒤에 : 붙여주고 {} 하여 안에 상세 속성을 적음
• ; 으로 종료 시키는 것 중요

/*scss*/
.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  }
  margin: {
    top: 10px;
    left: 20px;
  }
  padding: {
    top: 10px;
    bottom: 40px;
    left: 20px;
    right: 30px;
  }
}

/* css */
.box {
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
  margin-top: 10px;
  margin-left: 20px;
  padding-top: 10px;
  padding-bottom: 40px;
  padding-left: 20px;
  padding-right: 30px;
}

변수

• 재활용을 가능케 하고, 수정을 용의하게 함
• $ 를 사용해서 변수명 앞에 붙여주고 값할당은 :로 할당 연산 시킴
• SCSS 변수도 범위가 존재함, {} 안 어디에 위치하느냐에 따라 {} 범위에서만 유효함 (유효 범위)
• JS let 처럼 변수에 재할당이 가능함, 하지만 재할당 된부분 아래의 것은 무조건 범위 밖이어도 영향을 미침

/* scss */
.container {
  $size: 200px;
  position: fixed;
  top: $size;
  .item {
    /* 재할당 가능 */
    $size: 100px;
    width: $size;
    height: $size;
    transform: translateX($size);
  }
  left: $size;
}

/* css */
.container {
  position: fixed;
  top: 200px;
  /* 재할당 된부분 아래의 것은 무조건 범위 밖이어도 영향을 미침 */
  left: 100px;
}
.container .item {
  width: 100px;
  height: 100px;
  transform: translateX(100px);
}

산술 연산

• 나눗셈을 제외하고 평소대로 사용하면 그대로 연산이 됨

.div {
  width: 20px + 20px;
  height: 40px - 10px;
  font-size: 10px * 2;
  padding: 20px % 7;
  /* margin: 30px / 2; */
}

나눗셈 연산 문제

• 단축 속성에서 / 기호로 속성을 나누어 인식하여 사용이 겹치기 때문에 나누기로 연산하지 않음

.span {
  font-size: 10px;
  line-height: 10px;
  font-family: serif;
  /* 단축 속성에서 '/'기호가 겹치기 때문에 연산하지 않음 */
  font: 10px / 10px serif;
}

• 나누기 연산하는 방법
• 방법01 : () 묶어서 사용
• 방법02 : $변수 변수를 넣어 사용
• 방법03 : 다른 연산자를 미리 사용 (사칙연산 주의 -> ()로 보완 가능)

.div {
  $size: 30px;
  /* 나눗셈 문제 */
  /* margin: 30px / 2; */
  margin: (30px / 2);
  margin: $size / 2;
  /* 사칙연산 주의! */
  margin: 10px + 12 / 2;
  margin: (10px + 12) / 2;
}

다른 단위의 산술연산

• 다른 당위의 산술연산은 기본적으로 지원하지 않지만, calc() 함수를 사용하면 됨

.div {
  /* 다른 단위의 산술 연산 */
  /* width: 100% - 200px; */
  width: calc(100% - 200px);
}