SassColor

Sass's color type.

No matter what representation was originally used to create this color, all of its channels are accessible.

Hierarchy

Constructors

  • Creates an RGB color.

    Throws

    Error if red, green, and blue aren't between 0 and 255, or if alpha isn't between 0 and 1.

    Parameters

    • options: {
          alpha?: number;
          blue: number;
          green: number;
          red: number;
      }
      • Optional alpha?: number
      • blue: number
      • green: number
      • red: number

    Returns SassColor

  • Creates an HSL color.

    Throws

    Error if saturation or lightness aren't between 0 and 100, or if alpha isn't between 0 and 1.

    Parameters

    • options: {
          alpha?: number;
          hue: number;
          lightness: number;
          saturation: number;
      }
      • Optional alpha?: number
      • hue: number
      • lightness: number
      • saturation: number

    Returns SassColor

  • Creates an HWB color.

    Throws

    Error if whiteness or blackness aren't between 0 and 100, or if alpha isn't between 0 and 1.

    Parameters

    • options: {
          alpha?: number;
          blackness: number;
          hue: number;
          whiteness: number;
      }
      • Optional alpha?: number
      • blackness: number
      • hue: number
      • whiteness: number

    Returns SassColor

Accessors

  • get hasBrackets(): boolean
  • Whether this value as a list has brackets.

    All SassScript values can be used as lists. Maps count as lists of pairs, and all other values count as single-value lists.

    Returns boolean

  • get isTruthy(): boolean
  • Whether the value counts as true in an @if statement and other contexts.

    Returns boolean

  • get separator(): ListSeparator
  • The separator for this value as a list.

    All SassScript values can be used as lists. Maps count as lists of pairs, and all other values count as single-value lists.

    Returns ListSeparator

Methods

  • Changes one or more of this color's RGB channels and returns the result.

    Parameters

    • options: {
          alpha?: number;
          blue?: number;
          green?: number;
          red?: number;
      }
      • Optional alpha?: number
      • Optional blue?: number
      • Optional green?: number
      • Optional red?: number

    Returns SassColor

  • Changes one or more of this color's HSL channels and returns the result.

    Parameters

    • options: {
          alpha?: number;
          hue?: number;
          lightness?: number;
          saturation?: number;
      }
      • Optional alpha?: number
      • Optional hue?: number
      • Optional lightness?: number
      • Optional saturation?: number

    Returns SassColor

  • Changes one or more of this color's HWB channels and returns the result.

    Parameters

    • options: {
          alpha?: number;
          blackness?: number;
          hue?: number;
          whiteness?: number;
      }
      • Optional alpha?: number
      • Optional blackness?: number
      • Optional hue?: number
      • Optional whiteness?: number

    Returns SassColor

  • Returns the value at index index in this value as a list, or undefined if index isn't valid for this list.

    All SassScript values can be used as lists. Maps count as lists of pairs, and all other values count as single-value lists.

    This is a shorthand for this.asList.get(index), although it may be more efficient in some cases.

    ⚠️ Heads up!

    This method uses the same indexing conventions as the immutable package: unlike Sass the index of the first element is 0, but like Sass negative numbers index from the end of the list.

    Parameters

    • index: number

    Returns undefined | Value

  • Converts sassIndex into a JavaScript-style index into the list returned by asList.

    Sass indexes are one-based, while JavaScript indexes are zero-based. Sass indexes may also be negative in order to index from the end of the list.

    Throws

    Error If sassIndex isn't a number, if that number isn't an integer, or if that integer isn't a valid index for asList.

    Parameters

    • sassIndex: Value

      The Sass-style index into this as a list.

    • Optional name: string

      The name of the function argument sassIndex came from (without the $) if it came from an argument. Used for error reporting.

    Returns number