Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to configure SASS to output shorthand hex colors

Is there any way to make SASS or Compass give you a shortened hex color? For example, if I type #444 it gives me #444444 in my output file, which isn't a real optimization help for me.

like image 359
orustammanapov Avatar asked Dec 01 '12 08:12

orustammanapov


People also ask

How do you define colors in sass?

Sass Set Color Functions An RGB color value is specified with: rgb(red, green, blue). Each parameter defines the intensity of that color and can be an integer between 0 and 255, or a percentage value (from 0% to 100%). Sets a color using the Red-Green-Blue-Alpha (RGBA) model.

How many values are given for a color in shorthand hexadecimal number notation in CSS?

Example of HSLA (on different background color) Hex values are actually just a different way to represent RGB values. Instead of using three numbers between 0 and 255 , you use six hexadecimal numbers. Hex numbers can be 0-9 and A-F . Hex values are always prefixed with a # symbol.


1 Answers

The color codes are optimized only when the output style is set to compressed.

// style.scss
$primary-color: #444;
$secondary-color: #ffffff;
.test {
  background: $primary-color;
  color: $secondary-color;
}

compiled with the command sass -t compressed style.scss style.css produce the following file:

// style.css
.test{background:#444;color:#fff}
like image 107
piouPiouM Avatar answered Sep 23 '22 06:09

piouPiouM