SassColor

Sassの色型

この色の作成に最初にどのような表現が使用されたかにかかわらず、そのすべてのチャネルにアクセスできます。

階層

コンストラクター

  • RGB カラーを作成します。

    space が指定されていない場合、alpha が渡されないことを示すために、必ず undefined を使用してください。代わりに null を使用すると、欠落したコンポーネントとして扱われます。詳細については、重大な変更を参照してください。

    space が定義されており、いずれかのコンポーネントに null が渡された場合、欠落したコンポーネントとして扱われます。

    スロー

    alpha が設定されており、null または 0 から 1 の間の数値でない場合、Error が発生します。

    パラメーター

    • options: {
          alpha?: null | number;
          blue: null | number;
          green: null | number;
          red: null | number;
          space?: "rgb";
      }
      • オプション alpha?: null | number
      • blue: null | number
      • green: null | number
      • red: null | number
      • オプション space?: "rgb"

    戻り値 SassColor

  • HSL カラーを作成します。

    space が指定されていない場合、alpha が渡されないことを示すために、必ず undefined を使用してください。代わりに null を使用すると、欠落したコンポーネントとして扱われます。詳細については、重大な変更を参照してください。

    space が定義されており、いずれかのコンポーネントに null が渡された場合、欠落したコンポーネントとして扱われます。

    スロー

    alpha が設定されており、null または 0 から 1 の間の数値でない場合、Error が発生します。

    パラメーター

    • options: {
          alpha?: null | number;
          hue: null | number;
          lightness: null | number;
          saturation: null | number;
          space?: "hsl";
      }
      • オプション alpha?: null | number
      • hue: null | number
      • lightness: null | number
      • saturation: null | number
      • オプション space?: "hsl"

    戻り値 SassColor

  • HWB カラーを作成します。

    space が指定されていない場合、alpha が渡されないことを示すために、必ず undefined を使用してください。代わりに null を使用すると、欠落したコンポーネントとして扱われます。詳細については、重大な変更を参照してください。

    space が定義されており、いずれかのコンポーネントに null が渡された場合、欠落したコンポーネントとして扱われます。

    スロー

    alpha が設定されており、null または 0 から 1 の間の数値でない場合、Error が発生します。

    パラメーター

    • options: {
          alpha?: null | number;
          blackness: null | number;
          hue: null | number;
          space?: "hwb";
          whiteness: null | number;
      }
      • オプション alpha?: null | number
      • blackness: null | number
      • hue: null | number
      • オプション space?: "hwb"
      • whiteness: null | number

    戻り値 SassColor

  • Lab または Oklab カラーを作成します。

    いずれかのコンポーネントに null が渡された場合、欠落したコンポーネントとして扱われます。

    スロー

    alpha が設定されており、null または 0 から 1 の間の数値でない場合、Error が発生します。

    パラメーター

    • options: {
          a: null | number;
          alpha?: null | number;
          b: null | number;
          lightness: null | number;
          space: ColorSpaceLab;
      }
      • a: null | number
      • オプション alpha?: null | number
      • b: null | number
      • lightness: null | number
      • space: ColorSpaceLab

    戻り値 SassColor

  • LCH または Oklch カラーを作成します。

    いずれかのコンポーネントに null が渡された場合、欠落したコンポーネントとして扱われます。

    スロー

    alpha が設定されており、null または 0 から 1 の間の数値でない場合、Error が発生します。

    パラメーター

    • options: {
          alpha?: null | number;
          chroma: null | number;
          hue: null | number;
          lightness: null | number;
          space: ColorSpaceLch;
      }
      • オプション alpha?: null | number
      • chroma: null | number
      • hue: null | number
      • lightness: null | number
      • space: ColorSpaceLch

    戻り値 SassColor

  • 定義済みのRGB色空間で色を作成します。

    いずれかのコンポーネントに null が渡された場合、欠落したコンポーネントとして扱われます。

    スロー

    alpha が設定されており、null または 0 から 1 の間の数値でない場合、Error が発生します。

    パラメーター

    • options: {
          alpha?: null | number;
          blue: null | number;
          green: null | number;
          red: null | number;
          space: "display-p3" | "srgb" | "rec2020" | "a98-rgb" | "prophoto-rgb" | "srgb-linear";
      }
      • オプション alpha?: null | number
      • blue: null | number
      • green: null | number
      • red: null | number
      • space: "display-p3" | "srgb" | "rec2020" | "a98-rgb" | "prophoto-rgb" | "srgb-linear"

    戻り値 SassColor

  • 定義済みのXYZ色空間で色を作成します。

    いずれかのコンポーネントに null が渡された場合、欠落したコンポーネントとして扱われます。

    スロー

    alpha が設定されており、null または 0 から 1 の間の数値でない場合、Error が発生します。

    パラメーター

    • options: {
          alpha?: null | number;
          space: ColorSpaceXyz;
          x: null | number;
          y: null | number;
          z: null | number;
      }
      • オプション alpha?: null | number
      • space: ColorSpaceXyz
      • x: null | number
      • y: null | number
      • z: null | number

    戻り値 SassColor

アクセサー

  • get alpha(): number
  • この色のアルファチャンネル。0から1の間の値です。

    戻り値:number

  • get asList(): List<Value>
  • この値をリストとして取得します。

    すべてのSassScriptの値はリストとして使用できます。マップはペアのリストとして扱われ、他のすべての値は単一の値のリストとして扱われます。

    戻り値:List<Value>

    immutableパッケージのimmutableなListです。

  • get blackness(): number
  • HWB色空間におけるこの色の黒さ。

    非推奨

    代わりにchannelを使用してください。

    戻り値:number

  • get blue(): number
  • RGB色空間におけるこの色の青チャンネル。

    非推奨

    代わりにchannelを使用してください。

    戻り値:number

  • get green(): number
  • RGB色空間におけるこの色の緑チャンネル。

    非推奨

    代わりにchannelを使用してください。

    戻り値:number

  • get hasBrackets(): boolean
  • リストとしてのこの値が括弧を持っているかどうか。

    すべてのSassScriptの値はリストとして使用できます。マップはペアのリストとして扱われ、他のすべての値は単一の値のリストとして扱われます。

    戻り値:boolean

  • get isLegacy(): boolean
  • この色が従来のカラースペース(rgbhsl、またはhwb)にあるかどうかを示すブール値。

    戻り値:boolean

  • get isTruthy(): boolean
  • @ifステートメントやその他のコンテキストで、この値がtrueとして扱われるかどうか。

    戻り値:boolean

  • get lightness(): number
  • HSL色空間におけるこの色の明度。

    非推奨

    代わりにchannelを使用してください。

    戻り値:number

  • get red(): number
  • この色のRGB色空間における赤チャネル。

    非推奨

    代わりにchannelを使用してください。

    戻り値:number

  • get saturation(): number
  • この色のHSL色空間における彩度。

    非推奨

    代わりにchannelを使用してください。

    戻り値:number

  • get separator(): ListSeparator
  • リストとしてのこの値の区切り文字。

    すべてのSassScriptの値はリストとして使用できます。マップはペアのリストとして扱われ、他のすべての値は単一の値のリストとして扱われます。

    戻り値:ListSeparator

  • get whiteness(): number
  • この色のHWB色空間における白色度。

    非推奨

    代わりにchannelを使用してください。

    戻り値:number

メソッド

  • thisSassBooleanでない場合に例外をスローします。

    ⚠️ 注意!

    関数は通常、リテラルのブール値を要求するのではなく、isTruthyを使用する必要があります。

    パラメーター

    • オプション name: string

      thisが引数から来た場合、その引数の関数名($を除く)。エラー報告に使用されます。

    戻り値:SassBoolean

  • thisSassMapでない場合に例外をスローします。

    パラメーター

    • オプション name: string

      thisが引数から来た場合、その引数の関数名($を除く)。エラー報告に使用されます。

    戻り値:SassMap

  • この色の1つ以上のHSL チャネルを変更した結果である新しい色を返します。

    スロー

    space が欠落しており、この色がレガシーカラースペース (rgb, hsl, または hwb) にない場合は Error

    スロー

    alpha が設定されており、null または 0 から 1 の間の数値でない場合、Error が発生します。

    パラメーター

    • options: {
          alpha: undefined | null | number;
          hue: undefined | null | number;
          lightness: undefined | null | number;
          saturation: undefined | null | number;
      } & {
          space?: "hsl";
      }

    戻り値 SassColor

  • この色の1つ以上のHWB チャネルを変更した結果である新しい色を返します。

    スロー

    space が欠落しており、この色がレガシーカラースペース (rgb, hsl, または hwb) にない場合は Error

    スロー

    alpha が設定されており、null または 0 から 1 の間の数値でない場合、Error が発生します。

    パラメーター

    • options: {
          alpha: undefined | null | number;
          blackness: undefined | null | number;
          hue: undefined | null | number;
          whiteness: undefined | null | number;
      } & {
          space?: "hwb";
      }

    戻り値 SassColor

  • この色の1つ以上の Lab チャネルを変更した結果である新しい色を返します。

    スロー

    space が欠落しており、この色が Lab または Oklab カラースペースにない場合は Error

    スロー

    alpha が設定されており、null または 0 から 1 の間の数値でない場合、Error が発生します。

    パラメーター

    • options: {
          a: undefined | null | number;
          alpha: undefined | null | number;
          b: undefined | null | number;
          lightness: undefined | null | number;
      } & {
          space?: ColorSpaceLab;
      }

    戻り値 SassColor

  • この色の1つ以上の LCH チャネルを変更した結果である新しい色を返します。

    スロー

    space が欠落しており、この色が LCH または Oklch カラースペースにない場合は Error

    スロー

    alpha が設定されており、null または 0 から 1 の間の数値でない場合、Error が発生します。

    パラメーター

    • options: {
          alpha: undefined | null | number;
          chroma: undefined | null | number;
          hue: undefined | null | number;
          lightness: undefined | null | number;
      } & {
          space?: ColorSpaceLch;
      }

    戻り値 SassColor

  • この色の1つ以上の RGB チャネルを変更した結果である新しい色を返します。

    スロー

    space が欠落しており、この色がレガシーカラースペース (rgb, hsl, または hwb) にない場合は Error

    スロー

    alpha が設定されており、null または 0 から 1 の間の数値でない場合、Error が発生します。

    パラメーター

    • options: {
          alpha: undefined | null | number;
          blue: undefined | null | number;
          green: undefined | null | number;
          red: undefined | null | number;
      } & {
          space?: ColorSpaceRgb;
      }

    戻り値 SassColor

  • この色の1つ以上の XYZ チャネルを変更した結果である新しい色を返します。

    スロー

    space が欠落しており、この色が XYZ カラースペースにない場合は Error

    スロー

    alpha が設定されており、null または 0 から 1 の間の数値でない場合、Error が発生します。

    パラメーター

    • options: {
          alpha: undefined | null | number;
          x: undefined | null | number;
          y: undefined | null | number;
          z: undefined | null | number;
      } & {
          space?: ColorSpaceXyz;
      }

    戻り値 SassColor

  • この色を指定されたspaceに変換した後、この色の指定された単一のchannelの値を返します。欠落しているチャネル0に変換されます。

    スロー

    channelalphaでないか、space内のチャネルでない場合はErrorが発生します。

    パラメーター

    • channel: ChannelNameHsl
    • options: {
          space: "hsl";
      }
      • space: "hsl"

    戻り値:number

  • この値をリストとして見たときに、indexの位置にある値を返します。indexがこのリストに対して有効でない場合はundefinedを返します。

    すべてのSassScriptの値はリストとして使用できます。マップはペアのリストとして扱われ、他のすべての値は単一の値のリストとして扱われます。

    これはthis.asList.get(index)の省略形ですが、場合によってはより効率的な場合があります。

    ⚠️ 注意!

    このメソッドは、immutableパッケージと同じインデックス規則を使用します。Sassとは異なり、最初の要素のインデックスは0ですが、Sassのように負の数はリストの末尾からインデックス付けされます。

    パラメーター

    • index: number

    戻り値: undefined | Value

  • この色とcolor2の中間の色を、CSS Color 4 の色補間の手順で定義されるmethodに従って返します。

    methodが欠落しており、この色が(Lab、Oklab、RGB、およびXYZ空間などの)直交色空間にある場合、methodはデフォルトでこの色の色空間になります。それ以外の場合、methodは、この色の色空間と文字列"shorter"を含むスペース区切りリストにデフォルト設定されます。

    weightは、結果の色にこの色がどれだけ含まれるべきかを示す 0 から 1 の間の数値です。省略された場合、デフォルトで 0.5 になります。

    パラメーター

    戻り値 SassColor

  • 指定されたchannelがこの色で無力かどうかを示すブール値を返します。これは、個々の色空間で定義される特別な状態であり、チャンネルの値が色の表示に影響を与えないことを示します。

    パラメーター

    戻り値:boolean

  • この色が、指定されたspace(またはspaceが指定されていない場合は現在の色空間)に対して、色域内にある(つまり、1つ以上のチャンネルが範囲外になっていない)かどうかを示すブール値を返します。

    パラメーター

    戻り値:boolean

  • sassIndexasList によって返されるリストへの JavaScript スタイルのインデックスに変換します。

    Sass のインデックスは 1 から始まるのに対し、JavaScript のインデックスは 0 から始まります。Sass のインデックスは、リストの末尾からインデックス付けするために負の値になることもあります。

    スロー

    Error sassIndex が数値ではない場合、その数値が整数ではない場合、またはその整数が asList の有効なインデックスではない場合に発生します。

    パラメーター

    • sassIndex: Value

      これをリストとして扱う場合の Sass スタイルのインデックス。

    • オプション name: string

      関数引数から来た場合の、sassIndex の引数名($ なし)。エラー報告に使用します。

    戻り値:number

  • これがマップとしてカウントされる場合(空のリストは空のマップとしてカウントされる)、this をマップとして返し、そうでない場合は null を返します。

    戻り値: null | SassMap