CSS, Sass

2022/01/05

CSS Box Model

CSSレイアウトのベースモデル

content-box、padding-box、border-box、margin-boxの順に要素を囲みます.

boxのタイプはinlineとblockの2種類があります.

display:inline、display:inline-block、display:blockは異なるボックスタイプを適用します.

CSS Box Model - box-sizing

width、heightはdepoltで、content-boxのサイズを定義します.

width:100 pxと定義されている場合、コンテンツサイズのみ100 px、padding、borderのサイズは100 pxです.

box-size:border-boxを使用してBoxのサイズを変更できます.

bord−boxはpadding、border width、heightを含む.

は、通常、ボックスサイズ:border-boxを選択して、分かりやすいレイアウトを定義します.

CSS Position

CSS PositionStaticPositionのデフォルト値で、要素は通常のストリームに沿って配置されます.相対的に正常な流れに沿って位置決めされますが、自分に対して.絶対浅正流から離れ、相対的に最近の祖先.ビューポートに対してfiexdnormal flowの外にあります.stickynormal flowに基づいて位置決めされますが、最近のスクロール祖先に比べて.

CSS Units

絶対長さを表すCSS Unitspx,pt,cmの単位.rem、em、および%の特定の値の相対的な長さを表す単位.vw、vh、vmin、vmaxviewportの相対長さを表すユニット.

Sass

Syntactically Awesome Style Sheets. CSS Preprocessor.

SCSS、Sass構文をサポートします.

モジュール、混入、ネストスタイル、変数、条件文、重複文などの機能により、CSSをプログラミング言語に拡張します.

スタイル-デフォルトでは、コンポーネントはSassをサポートします.

Sass &

.rest-button {
  &.active {}
  &.disabled {}
  &:hover {}
  &:not(:first-of-type) {}
  & + & {}
  & ~ & {}
  & > button {}
}

&自分を表すプレースホルダ

既存のCSSのセレクタ構文を適用して複雑なスタイルを適用します.

コンパイル時ex).reset-button.active {}

Sass variable

$color-red: red;
$color-white: #fff;

.reset-button {
  color: $color-red;
  $:hover {
    color: $color-white;
  }
}

Sassが提供するコード管理方法の1つであり、

ミックスとpartialを含む.

主に

色、サイズなどよく見られる値を変数として使用します.

Sass nested style

$color-red: red;
$color-white: #fff;

.reset-button {
  color: $color-red;
  $:hover {
    color: $color-white;
  }
  > button {
  }
}

個別のクラスを定義する必要がなく、1つのブロックに複数のCSSを適用できます.

CSS専用性は依然として適用され、ネストが深すぎるとスタイルのメンテナンスが非常に困難になります.

Sass mixins, import, include

@mixins font-style-1 {
  font-size: 36pt;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.05;
}

@import "./font-styles.scss" .button {
  @include font-style-1;
  background: red;
}