⛪️ 👏🏿 ♻️ rgbaのCSSvarまたはSassの色の便利な使用 🎹 🆙 👨🏾‍⚕️

この記事は、レイアウトで色を操作するときに作業を楽にする私のSass作業の概要に専念しています。花を扱う際の快適さをもたらす3つのアプローチを見ていきます。

結果として、そのようなエントリ：

body{
  color: color(primary);
  background: color(primary, 0.5);
}

これに相当します：

:root {
  --color-pink: #E20071;
  --color-pink--rgb: 226, 0, 113;
}

body {
  color: var(--color-pink);
  background: rgba(var(--color-pink--rgb), 0.5);
}

ただし、同時に、コントロールではHEXカラー形式のみを使用します。変換は自動的に行われます。タンバリンで踊る必要はありません。私たちが見ます：

CSS変数の自動作成

CSS, Sass , .

, .

$colors : (
  "pink"  : #E20071,
  "blue"  : #00A3DA,
  "gray"  : #939394,
  "white" : #FFFFFF,
  "black" : #1B1B1B,
);

, CSS , $colors :root.

:root{
  @each $key, $value in $colors {
    --color-#{$key} : #{$value};
  }
}

, :

:root {
  --color-pink: #E20071;
  --color-blue: #00A3DA;
  --color-gray: #939394;
  --color-white: #FFFFFF;
  --color-black: #1B1B1B;
}

Sass RGB , HEX. , :

@function HexToRGB($hex) {
  @return red($hex), green($hex), blue($hex);
}

:root {
  --color-pink-rgb: #{HexToRGB(#E20071)};
}

rgba, — , — . 0 ( ) 1 ( ):

body{
  background: rgba(var(--color-pink-rgb), 0.5);
}

CSS

CSS , color.

@function color($name) {
  @return var(--color-#{unquote($name)});
}

body{
  background: color(pink);
}

body{
  background: var(--color-pink);
}

, 3 , (CSS ) , :

body{
  color: color(primary);
  background: color(primary, 0.5);
}

$colors_theme : (
  "primary"   : "pink",
  "secondary" : "blue"
);

$colors : (
  "pink"  : #E20071,
  "blue"  : #00A3DA,
  "gray"  : #939394,
  "white" : #FFFFFF,
  "black" : #1B1B1B,
);

@function HexToRGB($hex) {
  @return red($hex), green($hex), blue($hex);
}

@function color($name, $opacity: false) {
  @if $opacity {
    @return rgba(var(--color-#{unquote($name)}--rgb), $opacity);
  } @else {
    @return var(--color-#{unquote($name)});
  }
}

:root{
  @if $colors {
    @if $colors_theme {
      @each $key, $value in $colors_theme {
        --color-#{$key} : var(--color-#{$value});
        --color-#{$key}--rgb : var(--color-#{$value}--rgb);
      }
    }

    @each $key, $value in $colors {
      --color-#{$key} : #{$value};
      --color-#{$key}--rgb : #{HexToRGB($value)};
    }
  }
}

, , .

さらに、これらの機能を利用して、HEX形式のみの入力カラーを使用することで、サイトのカラーパレットを簡単に変更できます。また、追加のコード移動に頼らないでください。

厳密に判断しないでください。これはハブレに関する最初の記事です。

rgbaのCSSvarまたはSassの色の便利な使用

CSS変数の自動作成

CSS

More articles: