front-end 국비과정 일차 24일차 학습일지 :SCSS

SCSS란?
CSS작성을 더 효율적으로 작성 할 수 있는 문법이다
브라우저에선 동작하지않기 때문에 번들러(bundler)를 이용해 CSS로 컴파일(변환)해 줘야 한다

SCSS를 사용할때에는 parcel-bundler라는 컴파일 도구를 필요로 하기때문에 설치해야한다

parcel-bundler 설치법
1 프로젝트 터미널에서 npm init -y 라고 명시
2 npm i -D parcel-bundler라고 명시 -D를 붙여주는이유는 브라우저에선 SCSS가 동작하지 않기때문에 개발 의존성 패키지라는 것을 명시해 주는 용도
3 packge.json에 명시된 script에 bulid와 dev라고 명시 
bulid:컴파일 + 링크의 느낌이다 즉 컴파일된 파일을 실행가능한 형태로만든다
dev: 이름이 꼭 dev일 필요는 없지만 개발용 서버로 생각하면 좋을듯하다
ex)

 "scripts": {
    "dev":"parcel index.html",
    "bulid":"parcel build index.html"
  },

  위코드에서 명시된 dev 또는 bulid에는 실행할 패키지와 파일을 명시해준 코드이다
  실제로 index.html 실행하기위해선 터미널에서 npm run dev,npm run bulid라고 명령하면 실행된다
 

---

  --- SCSS 문법 ---
  
  주석:
  SCSS는 주석을 작성하는 방식이 2가지가있다
  /* content */ : SCSS가 CSS로 컴파일 될때 해당 주석도 같이 컴파일된다
  // content : SCSS가 CSS로 컴파일 될때 해당 주석은 같이 컴파일 되지않는다
  
  중첩:
 CSS의 선택자를 작성할때 상위 선택자를 생략 하여 하위선택자를 효율적으로 작성하는 방식이다
 
 ex) css코드와 scss의코드

SCSS코드   
.container {
  background-color: red;

  ul {
    background-color: orange;

    li {
      background-color: yellow;
      .name{
        background-color:green;
      }
      .age{
        background-color: blue;
      }
    }
  }
}

 CSS코드
 .container{
  background-color: red;
}
ul{
  background-color: orange;
}
li{
  background-color:yellow;
}
.container ul li .name{
  background-color:green;
}
.container ul li .age{
  background-color: blue;
}

  
것보기에는 CSS코드와 비교해서 SCSS의 코드가 크게 효율적이지 않다고 느낄 수 있지만 직접 작성해보면 상위선택자를 생략한다는 장점은 효율 적 이라고 판단할 것이다


&:
한단계 상위 선택자를 참조하는 기능을 가진다 
ex)

SCSS코드
.btn{
  position:absolute;
  &.active{
    color: red;
  }
}

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


CSS로 변환된 코드 

.btn{
  position: absolute;
}
.btn.active{
  color: red;
}

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

위 코드와 같이 SCSS의 &는 1단계상위 선택자와 동일한 의미를 가진다

SCSS의 중첩된 속성:
SCSS의 속성중 일부 동일한 이름을 가지고 있다면 동일한 이름을 생략하여 {};안에 속성과 속성값을 효율적으로 작성할 수 있는 방법이다
ex)

SCSS코드 
.box {
  font: {
    size: 16px;
    weight: bold;
    family: sans-serif;
  };

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

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

CSS로 변환된 코드
.box {
  font-size: 16px;
  font-weight: bold;
  font-family: sans-serif;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 30px;
  margin-right: 40px;
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}

주의사항!선택자와 속성은 다른것이기 때문에 중첩 할 때 햇갈리지 않아야 한다는 점을 숙지하자



변수: 속성값을 해당 변수에 넣어 재사용 할 수 있는 기능을 가진다
선언된 변수는 다른 블럭에서 재할당이 가능하다
$ = SCSS에서 변수 선언자이다 
: = 변수와 값을 구분하는 기호이다

ex)

SCSS코드
$size:100px;

.container {
  position: fixed;
  top: $size;
  .item{
    width:$size;
    height:$size;
    transform: translateX($size);
  }
}

CSS로 변환된 코드
.container {
  position: fixed;
  top: 100px;
}
.container .item {
  width: 100px;
  height: 100px;
  transform: translateX(100px);
}

주의사항!: 
1 SCSS의 변수는 변수가 선언된 블록에서만 사용가능하다; 
2 SCSS에 변수를 사용할 때 해당 변수의 값을 수정하면 변수가 선언된 블럭에서 사용된 변수의 모든 속성값이 전부 수정된다는 점을 숙지하자


SCSS 연산
SCSS는 숫자값을 연산 할 수 있다.
연산시 calc()를 사용하는것이 아니라면 단위가 동일해야한다
나누기 주의사항 :나눗셈은 /기호를 사용하는데 /기호는 속성값을 구분하는 용도로 사용되기도 하기때문에 ()로 묶어서 사용하거나 변수를 선언하여 사용해야한다
곱하기 주의사항 :곱하기를 할때에는 하나의 값에만 단위를 명시해야 오류가 발생하지 않는다

ex)

SCSS코드 
.container {
  $size: 40px;

  margin: {
    top: 5px + 5px;
    bottom: 20px - 10px;
    left: 5px * 2;
    right: (20px / 2px);
  };
  padding: {
    top: 10px + 10px;
    bottom: 30px - 10px;
    left: 10 * 2;
    right: $size/2;
  };
}
//위 코드에서 margin속성에 right부분에 ()로 묶어서 연산한 부분과, padding속성에 right 부분에 변수사용을 참조하여 차이를 해석하자

CSS로 변환된 코드
.container {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 200px;
  margin-right: 10px;
  padding-top: 20px;
  padding-bottom: 10px;
}

재활용(@mixin)
: JS의 함수처럼 @mixin 안에 속성과 속성값을 명시하여 사용 할 수 있다 

@mixin:mixin에 이름과 재활용할 속성과 속성값을 명시한다

수치를 설정해야 하는경우 고정적이지 않고 속성마다 설정값이 달라지는 문제를 해결 하기위해서 mixin에()를 사용하여 안에 인수를 넣어 줄 수 있다.

()를 사용하게되면 사용 할 때마다 변수 값을 설정 해 줘야하는데 디폴트파라미터 즉 기본값을 설정하면 ()를 생략 할 수 있다.

()안에 파라미터는 순서대로 값이 설정 되기 때문에 1번 파라미터는 건너 뛰고 2번파라미터의 값만 설정하고 싶다면 해당파라미터의 변수명:속성값을 명시한다

@include: 특정 선택자에서 mixin을 사용하겠다고 선언하는 기능을 가진다

ex)

SCSS코드
@mixin flex-center($w-value:100px,$h-value:200px) {
//flex-center라는 mixin에 파라미터를 지정하고 기본값을 설정해준 코드
  display: flex;
  justify-content: center;
  align-items: center;
  width:$w-value;
  height:$h-value;
}

.container {
  @include flex-center(200px);
  //2번파라미터인 h-value에값을 명시하지않아도 기본값이 명시되어있기 때문에
  //width 200px ,height 200px을 출력하는  코드  

  .item {
    @include flex-center($h-value:300px);
  }
 // height만 값을 설정 하고 싶지만 mixin에 인자는 순서대로 호출됨
 //때문에 변수명을 명시하여 값을 설정하여 해결 이것이 키워드 인수이다

  .box {
    @include flex-center;
    //파라미터에 아무값도 설정하지 않아도 기본값이 있기때문에 기본값 대로 정상출력
  }
}
CSS 코드
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
}
.container .item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 300px;
}
.container .box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 200px;
}

SCSS반복문
@for: SCSS에서 반복문을 실행하겠다고 선언하는 기능이다

 

from : 반복시작 번호를 명시한다

 

through: 반복종료 번호를 명시한다

 

#{}: JS의 문자열중 ` `문법 처럼 변수를 보간한다 
ex)

SCSS 코드 
@for $i from 1 through 4 {
  .box:nth-child(#{$i}) {
    width: 100px * $i;
  }
}

CSS코드
.box:nth-child(1) {
  width: 100px;
}

.box:nth-child(2) {
  width: 200px;
}

.box:nth-child(3) {
  width: 300px;
}

.box:nth-child(4) {
  width: 400px;
}

SCSS함수:
JS의 함수와 유사하게 사용된다 주로 CSS의 px값을 계산할때 사용한다 
작성법 : JS함수 작성법과 동일 다만 function과 return앞에 @ 기호를 붙여줘야하고 파라미터도 $ 으로 표현해야함
ex)

SCSS코드
@function ratio($size,$ratio){
  @return $size * $ratio
}

.box{
  $width: 100px;
  width: $width;
  height: ratio($width,1/2 );
}
CSS로 변환된 코드
.box {
  width: 100px;
  height: 50px;
}

SCSS에서 SCSS 파일 불러오는법 

@import라 명시하고 ""안에 파일 경로를 명시한다 ,를 사용하여 여럭의 파일을 불러 올 수 있다.
ex)

@import "./sub.scss","./sub2.scss")

@function ratio($size,$ratio){
  @return $size * $ratio
}

.box{
  $width: 100px;
  width: $width;
  height: ratio($width,1/2 );
}