[zb11]003-처음부터html/css실습 09-scss

괴발·2023년 1월 8일

zero-base

목록 보기

13/27

자유도가 높다 ⇨ 개발자가 지킬 규칙이 많다.
변수, 반복문 등을 사용할 수 있는 대신 규칙이 있다.
브라우저가 읽을 수 있는 확장자 > html css javascript
scss ⇨ css : 컴파일을 위해서 node webpack 필요
vsc 확장 live scss compiler 설치 및 사용

와 watchSass 안나와서 두시간 날림 > 역시 기계는 껏켯 or 삭제재설치가 최고다

🚨 error_) 파일명이 main.css 인 채로 scss를 쓰려고 해서 계속 오류 발생

{ expectedcss(css-lcurlyexpected)
at-rule or selector expectedcss(css-ruleorselectorexpected)
참고 링크

Nesting

<!--html-->
<body>
  <div class="box"></div>
</body>

<!--scss-->
body{
  border: 1px solid red;
  .box{
  color: green;
  }
}

Variable

$primary-color: #e2e2e2;
 
background-color: $primary-color;

scss built-in color

darken : 어둡게
lighten : 밝게
saturate : 더 선명하게(채도 올림)
sedaturate : 더 흐리게(채도 낮춤)
adjust-hue : 명도 변경
rgba : alpha값 변경

$baseColor : lightgray;

<!-- 주로 :hover 시 변화를 나타낼 때 사용해줌 -->

color : darken($baseColor,20%); > 20% 더 어둡게
color : lighten($baseColor,20%); > 20% 더 밝게
color : saturate($baseColor,70%); > 채도 70% 올림
color : sedaturate($baseColor,70%); > 채도 70% 낮춤
color : adjust-hue($baseColor,60deg); > 명도 변경 가능 %, deg(각도)
color : rgba($baseColor,0~1); > 2번째 인자는 opacity

extend : 스타일 확장

유사한 내용물은 복사해와서 수정하는게 아니라
확장으로 가져와서 필요한 부분만 수정한다.

<button class="btn-1">버튼1</button>
<button class="btn-2">버튼2</button>

.btn-1{
  padding: 10px 20px;
  cursor: pointer;
  <!-- inherit은 부모 객체의 값을 가져오는 것입니다 -->
  background-color: inherit;
  border: 1px solid black;
  border-radius: 14px;
}

.btn-2{
  @extend .btn-1;

  border: 1px solid red;
  color: red;
  font-weight: 400;
}

<!-- %가 붙은 scss 선택자는 임시 선택자로-->
<!-- 실제로 html에서 호출해 사용하는 class는 아니지만 -->
<!-- extend를 위해 작성해 놓은 scss를 말한다 -->

%btn{
  padding: 10px 20px;
  cursor: pointer;
  <!-- inherit은 부모 객체의 값을 가져오는 것입니다 -->
  background-color: inherit;
  border: 1px solid black;
  border-radius: 14px;
}

.btn-1{
  @extend %btn;

  color: blue;
  border: 1px solid bule;
}

mixin

@mixin 버튼() {
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid black;
  border-radius: 14px;
}


.btn-1{
  @include 버튼();

  border: 1px solid red;
  color: red;
  font-weight: 400;
}

상위버전

@mixin 버튼($테두리, $글자색) {
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid $테두리;
  border-radius: 14px;
  color: $글자색;
}

.btn-1{
  @include 버튼(blue, red);
}

default값 설정 가능

@mixin 버튼($테두리 : green, $글자색 : green) {
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid $테두리;
  border-radius: 14px;
  color: $글자색;
}

.btn-1{
  @include 버튼();
}