スタイルの変更

8701 ワード
Sass React テキストリンク
Sass
Sassファイルの拡張子は.scss.
設定
npm install node-sass --save
  • をインストールすると、node-modulesフォルダにnode-sassフォルダが作成されます.(package source code)
  • --save : package.jsonにインストールされているパッケージの名前とバージョン情報
    • を更新します.
    Nesting機能の適用
    nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
    既存のcssが上記と同じである場合、次のように最上位要素にサブ要素のスタイルプロパティを内定できます.親要素から子要素へのオーバーラップ表現をNestingと呼びます.
    nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
		li {
			display: inline-block;
		}
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
    その他の機能
    login-container {
	display: flex;
	justify-content: center;
  align-items: center
}

button {
  width: 200px;
	height: 100px;
	background-color: blue;
}

button:hover {
	background-color: red;
	cursor: pointer; 
}
 
input {
	background-color: blue;
}

input:focus {
  background-color: red;
}
    上記のcssファイルは、次のように変更できます.
    $theme-color: blue;

@mixin flex-center($justify: center, $align: center) {
	display: flex;
	justify-content: $justify;
  	align-items: $align
}

login-container {
  @include flex-center(center, center);
	button {
    	        width: 200px;
		height: 100px;
		background-color: $theme-color;

		&:hover {
			background-color: red;
			cursor: pointer;
		}
	}
	input {
		background-color: $theme-color;

		&:focus {
		  background-color: red;
		}
	}
}
    $<변수 명>は、サブ変数を提供する.@mixin <함수 명>の場合、@include <함수 명>のように関数として使用することができる.
  • 2($justify: center, $align: center)のデフォルト値とcss設定値を受け入れることができます.
    • &:hoverによって、特定の条件下のcss値、例えば&を設定することができる.
    外部ファイルimport <경로>に設定された関数または変数は、scssを使用して使用することができる.
  • ex)/src/styles/common.scssファイルが存在する場合、@import "/src/styles/common.scss";
    • Mysql最適化の概要
    角度でのAPIの消費