Vlpt SaSS 정리

쉬운 목차

Sass(구문적으로 독창적인 스타일시트)

CSS 전처리기로서 복잡한 작업을 쉽게 해줍니다.
코드 재사용성을 높일 뿐만 아니라 코드 가독성도 향상시켜 유지 관리가 더 쉬워집니다.
Sass는 두 가지 확장자(.scss/.sass)를 지원합니다.

건방진

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

scss

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

일반적으로 더 많은 SCSS 구문이 사용됩니다.

시작하기

$ yarn add sass

이 라이브러리는 Sass를 CSS로 변환하는 데 사용됩니다.

scss 문법

$blue: #228be6; // 주석 선언

.Button {
  display: inline-flex;
  color: white;
  font-weight: bold;
  outline: none;
  border-radius: 4px;
  border: none;
  cursor: pointer;

  height: 2.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;

  background: $blue; // 주석 사용
  &:hover {
    background: lighten($blue, 10%); // 색상 10% 밝게
  }

  &:active {
    background: darken($blue, 10%); // 색상 10% 어둡게
  }
}

기존 CSS에서 사용할 수 없었던 구문을 사용합니다.
$blue: #228be6; 이 방법을 사용하여 스타일 파일에서 사용할 수 있는 변수를 선언할 수도 있습니다.
가능하게 하다() 또는 어둡게 되다() 예를 들어 색상을 밝게 하거나 어둡게 하는 기능을 사용할 수도 있습니다.

.Button {
  &.large {

  }
}

수단

'추천 관련글,

.Button.large {

}

오전.

궁극적으로 이것은 Button과 Large CSS 클래스를 함께 적용할 때 우리가 원하는 스타일을 적용한다는 것을 의미합니다.

& + & {
    margin-left: 1rem;
  }
}

& + &는 .버튼 + .버튼을 의미합니다.

함께있을 때 오른쪽 버튼에 테두리를 설정하십시오.

반복되는 코드 정리

// 색상 관리
  &.blue {
    background: $blue;
    &:hover {
      background: lighten($blue, 10%);
    }

    &:active {
      background: darken($blue, 10%);
    }
  }

  &.gray {
    background: $gray;
    &:hover {
      background: lighten($gray, 10%);
    }

    &:active {
      background: darken($gray, 10%);
    }
  }

  &.pink {
    background: $pink;
    &:hover {
      background: lighten($pink, 10%);
    }

    &:active {
      background: darken($pink, 10%);
    }
  }

같은 코드

@mixin button-color($color) {
  background: $color;
  &:hover {
    background: lighten($color, 10%);
  }
  &:active {
    background: darken($color, 10%);
  }
}

 // 색상 관리
  &.blue {
    @include button-color($blue);
  }

  &.gray {
    @include button-color($gray);
  }

  &.pink {
    @include button-color($pink);
  }

다음과 같이 정리할 수 있습니다.

클래스 이름

CSS 클래스 이름을 className 에 동적으로 삽입하려면 다음과 같이 설정해야 합니다.

className={('Button', size).join(' ')}

또는 이렇게 처리할 수 있습니다.

className={`Button ${size}`}

이와 같이 문자열을 직접 결합하는 대신 CSS 클래스를 조건부로 주입하려는 경우 클래스 이름 도서관 이용.

$ yarn add classnames

클래스 이름 라이브러리 예제 사용

function Button({ children, size }) {
  return <button className={classNames('Button', size)}>{children}</button>;
}

나머지 소품 패스

function Button({ children, size, color, outline, fullWidth, onClick, onMouseMove }) {
  return (
    <button
      className={classNames('Button', size, color, { outline, fullWidth })}
      onClick={onClick}
      onMouseMove={onMouseMove}
    >
      {children}
    </button>
  );
}

onClick, onMouseMove 이벤트 추가

필요한 이벤트가 있을 때마다 문제를 해결할 수 있는 구문은 매번 삽입하는 것입니다.

펼쳐 쉬다 오전.
이 구문은 주로 배열, 개체, 함수 매개 변수 및 인수를 처리할 때 사용되지만 구성 요소에서도 사용할 수 있습니다.

function Button({ children, size, color, outline, fullWidth, ...rest }) {
  return (
    <button
      className={classNames('Button', size, color, { outline, fullWidth })}
      {...rest}
    >
      {children}
    </button>
  );
}

이런 식으로 …rest를 사용하여 우리가 rest라는 객체에 지정한 props를 제외한 값을 수집하고 if {…rest} 태그에

그래서 App.js에서 사용하는 첫 번째 버튼에 onClick을 넣으면,

function App() {
  return (
    <div className="App">
      <div className="buttons">
        <Button size="large" onClick={() => console.log('클릭됐다!
')}>
          BUTTON
        </Button>
      </div>
    </div>
  )
}

로 설정할 수 있습니다