Sass スクリプトの中で色を表現する方法としては、#ff00ff
のような16進数での指定方法以外にも、下記のように色を表す定数を使用する方法があります。
$my-color: magenta; // Color型の変数を定義
$my-color: #ff00ff; // 同上
色を表す定数には下記のようなものが用意されています。
blanchedalmond
(0xFFEBCDFF)
cornflowerblue
(0x6495EDFF)
darkgoldenrod
(0xB8860BFF)
darkolivegreen
(0x556B2FFF)
darkslateblue
(0x483D8BFF)
darkslategray
(0x2F4F4FFF)
darkslategrey
(0x2F4F4FFF)
darkturquoise
(0x00CED1FF)
lavenderblush
(0xFFF0F5FF)
lightgoldenrodyellow
(0xFAFAD2FF)
lightseagreen
(0x20B2AAFF)
lightslategray
(0x778899FF)
lightslategrey
(0x778899FF)
lightsteelblue
(0xB0C4DEFF)
mediumaquamarine
(0x66CDAAFF)
mediumseagreen
(0x3CB371FF)
mediumslateblue
(0x7B68EEFF)
mediumspringgreen
(0x00FA9AFF)
mediumturquoise
(0x48D1CCFF)
mediumvioletred
(0xC71585FF)
palegoldenrod
(0xEEE8AAFF)
paleturquoise
(0xAFEEEEFF)
palevioletred
(0xDB7093FF)
rebeccapurple
(0x663399FF)
アルファ値に関しては、上記のようにすべて 0xff (255) の不透過になっています。
アルファ値部分だけを変更したい場合は、下記のように rgba
関数で指定することができます。
$my-color: rgba(red, 0.3); // アルファ30%