CODEWITHSUNDEEP
csssassionic2
marvin ralph
marvin ralph

Reputation: 1280

How to set a linear gradient in a color map in Sass

I'm trying to set a linear gradient in a color map in my ionic 2 project but just keep getting an error.

$color (
  light:    #fefefe,
  dark:     #333,
  cool:     linear-gradient('#0005de', '#12dfff')
)

How do i set the linear-gradient

Upvotes: 1

Views: 2923

Answers (1)

govinski
govinski

Reputation: 116

The setup of your map should look a little something like this:

$color: (
  light: #444,
  dark: #111,
  cool: linear-gradient(#0005de, #12dfff)
);

Note: if you want to change the rotation of the linear gradient, you should use a syntax like this linear-gradient(45deg, #0005de, #12dfff). Also, #111 is darker than #444.

To use the colour as a property value, you will have to use the map-get function like so:

.selector {
  background: map-get($color, cool);
}

Upvotes: 2

Related Questions