SCSS

🙋‍♂️ Ref Lecture

새로 알게된 내용 위주로 작성함.

---

SCSS 주석

• 한줄 주석(//)은 css로 컴파일시 사라짐
• 여러줄 주석 단축키

  vs code) alt + shift + A

SCSS 속성 nesting

.port {
  width: 50%;
  margin: 0 auto;

  p {
    text: {
      align: center;
      decoration: underline;
    }
    font: {
      weight: bold;
      size: 32px;
    }
  }
}

위와 같이 text-align / text-decoration 등 접두어가 겹치는 경우 :를 뒤에 붙여서
중첩할 수 있다.

가상클래스 :is

선택자 중복 줄일 수 있음

<div class="container">
      <header>
        <h1>Headline Text</h1>
      </header>
      <section><h1>Headline Text</h1></section>
      <footer><h1>Headline Text</h1></footer>
</div>

header h1,
section h1,
footer h1 {
  font-size: 30px;
  font-weight: normal;
}

header h1::before,
section h1::before,
footer h1::before {
  content: '';
  width: 10px;
  height: 30px;
  background-color: royalblue;
  display: inline-block;
  margin-right: 10px;
  border-radius: 5px;
  transform: translateY(3px);
}

위와 같이 중복되는 선택자를 줄여줄 수 있음

🔻 :is 사용시

:is(header, section, footer) h1 {
  font-size: 30px;
  font-weight: normal;
  &:before {
    content: '';
    width: 10px;
    height: 30px;
    background-color: royalblue;
    display: inline-block;
    margin-right: 10px;
    border-radius: 5px;
    transform: translateY(3px);
  }
}

🔻 응용 ver.

form {
  & :is(
    input[type= 'text' ],
    input[type= 'password' ],
    input[type= 'number' ],
    input[type= 'email' ]
  ) {
border-radius: 8px;
  }
}

변수 (variable)

• $ 기호로 나타냄

/* variables */
$red-btn: #ff0000;
$yellow-btn: #ffff00;
$blue-btn: #0066ff;

.button-group {
  display: flex;
  width: 80%;
  margin: 0 auto;
  gap: 20px;
  .btn {
    flex: 1;
    border: none;
    padding: 20px 30px;
    border-radius: 8px;
    color: #fff;

    &.red {
      background-color: $red-btn;
    }

    &.yellow {
      background-color: $yellow-btn;
    }

    &.blue {
      background-color: $blue-btn;
    }
  }
}

변수의 경우에는 css로 컴파일시 사라지므로 아래와 같이 줄주석을 사용.

// Variables
$color-primary: #222;
$color-secondary: #333;
$bgc-item: #eee;
$port-item-w: 300px;
$port-item-h: 300px;
$port-images-url: 'images/';

• 파일 경로 url 변수

* {
  box-sizing: border-box;
}

// Variables
$color-primary: #222;
$color-secondary: #333;
$bgc-item: #eee;
$port-item-w: 300px;
$port-item-h: 300px;
$port-item-bdr: 10px;
$port-images-url: 'images/';

/* Portfolio */
.portfolio {
  padding: 20px;

  h1 {
    text-align: center;
    font-size: 30px;
  }

  .portfolio-items {
    margin: auto;
    width: $port-item-w * 4;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
    .portfolio-item {
      border: 1px solid $color-primary;
      width: $port-item-w;
      height: $port-item-h;
      border-radius: $port-item-bdr;
      background-image: url();
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;

      &:nth-child(1) {
        background-image: url($port-images-url + '1.jpeg');
      }

      &:nth-child(1) {
        background-image: url($port-images-url + '1.jpeg');
      }

      &:nth-child(2) {
        background-image: url($port-images-url + '2.jpeg');
      }

      &:nth-child(3) {
        background-image: url($port-images-url + '3.jpeg');
      }

      &:nth-child(4) {
        background-image: url($port-images-url + '4.jpeg');
      }
      &:nth-child(5) {
        background-image: url($port-images-url + '4.jpeg');
      }
      &:nth-child(6) {
        background-image: url($port-images-url + '3.jpeg');
      }
      &:nth-child(7) {
        background-image: url($port-images-url + '2.jpeg');
      }
      &:nth-child(8) {
        background-image: url($port-images-url + '1.jpeg');
      }
    }
  }
}

url 함수에
`url('파일경로' + '파일명.jpeg')와 같이 사용가능.
-> 여기서 파일 경로인 문자열을 변수로 ($) 대입하여 사용했음.

변수 유효범위

선택자 내부 - 지역 변수
선택자 바깥 - 전역 변수

.portfolio-items {
    $crimson: crimson;

	.portfolio-item {
      border: 1px solid $crimson;
      ...
   }
}

• 지역 변수는 하위 선택자들에서도 사용할 수 있다.

cf> CSS 변수

:root {
  --primary-color: #222;
  --secondary-color: #444;
}

.portfolio {
  color: var(--primary-color);
}

-- 기호를 앞에 붙여서 css 최상단에 :root에 작성해줘야 한다.
사용시 var()함수 안에 변수명을 넣어줘야 사용 가능하다!

@import

• 외부 파일 불러오기

// Reset.css 파일 임포트
@import url("reset.css");

// scss 파일 임포트
@import "reset.scss"
@import "reset" // scss 생략 가능