もう時間だ.各種CSS処理方法を理解する.

なんだ.
各種CSS処理方法は以前から知られていた.
でも今は1人でたくさん作ってCSSで十分なので突っ込んでいません.
問題は初めて大きなプロジェクトの形態が出てきたこと(もちろん私の立場です.この程度の大きさは小さいですが...ううう😭)で、CSSの使用が制限されているので、CSSの処理方法を知る必要があります.
styled-components
アイテムが大きいほど、構成部品の数が多くなります.
これにより、大量のclassNameが発生したり、繰り返し宣言が発生したりします.この時一番いいのはsytled-componentsです
npm install styled-components
まずパッケージをインストールしましょう.
そして書きたいところにこれを追加します.

import { styled } from 'syled-components';

次にimportの下とfunctionで必要なスタイルを作成します.

const box = styled.div `
	padding : 20px;
	margin : 10px;
`

returnに書くべき場所に置く.
これでclassNameを使う必要はありません.

return (
  <div className = "containor">
    <box> 컨텐츠 내용! <box>
  </div>
)

似たようなスタイルですが、1つか2つのフォーマットしか違いません.
Reactの道具を使うようにこれも使えます

const box = styled.div `
	padding : 20px;
	margin : 10px;
	color : ${ props => props.changeColor }
`

//중략

return (
  <div className = "containor">
    <box> 컨텐츠 내용! <box>
    //변수명 = {'하고 싶은 스타일'}
    //또는 changeColor = "red"
    <box changeColor = {'red'}> 또 다른 컨텐츠 내용! <box>
  </div>
)

このコンセプトを初めて見たとき、Vueのstyle scopeコンセプトに似ているように見えました.他にもあればこのパッケージはスタイルを素子用にしています
SASS
npm install node-sass
SASSは、CSSをプログラミング言語のように記述するプリプロセッサである.
変数、演算子、関数、extend、importはCSSで使用できます.
ブラウザはSASSの文法を知らないので、CSSに再コンパイルする必要があります.node-sassライブラリはコンパイルを助けることができます.
+追加
Node-sassはRubyで処理されているので棺に行ったようですSASSホームページにも公式の表情がありましたが、支援中断のためdart-sassを使用すると警告がありました.
講義についていこうと思ったが、M 1 MacBookで正しくコンパイルできない文章を見つけた.会社やパソコンもM 1を使ってこの記事を参考に修正しました.
プロジェクトが大きければgulpやwebpackで管理しているようです.
https://im-designloper.tistory.com/51
SASS文法に触れてみましょう!
1.とても簡単な文法です.CSSの場合は、次のようにルートに宣言された場所をvar(--main)に書き込むことができます.

$main : #fff;

.container {
  color : $main;
}

2.@importを使用してファイルをロードできます.(リセット.scssとか…)->でも今はDart-Sass用@use
@importは2022年10月に中断し、どのような変化が起こるか考えてみましょう.
@useと@importの違いであれば

@useを使用すると、プロジェクトから何度インポートしても、一度だけインポートされます.

下線()またはハイフン(-)で始まる変数、混入および関数(Sassを「メンバー」と呼ぶ)は、専用とみなされ、インポートされません.

同様に、@extendチェーンにのみ適用されます.インポートしたファイルのセレクタを展開しますが、インポートしたファイルを展開しません.

デフォルトでは、インポートされたすべてのメンバーがネーミングスペースとして指定されます.

注意:https://stackoverflow.com/questions/62757419/whats-the-difference-between-import-and-use-scss-rules
https://blueshw.github.io/2019/10/27/scss-module-system/
3.巣作り:コレクターの代わりに使用します.

.container {
  h4 {
    color : blue;
  }
}

4.似たようなUIには、少し違うデザインが必要ですか?@extend
SASSを学ぶ前に、似たようなデザインがあれば、同じレベルを与え、異なるレベルを与え、CSSを追加する方法で.SASSはこれでいいです.

.my-button {
  background: #333;
  padding: 15px;
  border-radius: 4px;
  width: 100%
  margin: auto;
}

.my-button-red {
  @extend .my-alert; /*이게 SASS의 복사 붙여넣기*/
  backbround: #ffe591; /*형식은 똑같고 원하는 부분만 다르게 지정해주면 된다*/
}

5. @mixin @include
JSで関数を宣言して書き込むように使用できます.

/*함수는 꼭 윗쪽에 써준다*/
@mixin mixInFuntion() {
  background: #333;
  padding: 15px;
  border-radius: 4px;
  width: 100%
  margin: auto;
}

.my-button {
  @include mixInFuntion()
  /*함수를 가져다 쓸 때 꼭꼭 앞에 @include를 써줘야 한다.*/
}