scss 颜色样式表外观自动从颜色列表生成颜色和背景
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 颜色样式表外观自动从颜色列表生成颜色和背景相关的知识,希望对你有一定的参考价值。
@import 'variables';
$color-list: 'brand-color' $brand-color,
'turquoise' #1abc9c,
'green-sea' #16a085,
'emerland' #2ecc71,
'nephritis' #27ae60,
'peter-river' #3498db,
'belize-hole' #2980b9,
'amethyst' #9b59b6,
'wisteria' #8e44ad,
'wet-asphalt' #34495e,
'midnight-blue' #2c3e50,
'sun-flower' #f1c40f,
'orange' #f39c12,
'carrot' #e67e22,
'pumpkin' #d35400,
'alizarin' #e74c3c,
'pomegranate' #c0392b,
'clouds' #ecf0f1,
'silver' #bdc3c7,
'concrete' #95a5a6,
'asbestos' #7f8c8d;
@each $item in $color-list {
$name: nth($item, 1);
$color: nth($item, 2);
.#{$name} {
color: $color;
}
.bg-#{$name} {
background-color: $color;
/* this will return black text for bright backgrounds and white text for dark backgrounds */
/* color: if(lightness($color) > 62%, black, white); */
}
}
$background-color: #3498db;
$brand-blue: #3498db;
$brand-color: $brand-blue;
$font-color: white;
$font-hover-color: darken($font-color, 17%);
$turqoise: rgba(26, 188, 156,1.0);
$green_sea: rgba(22, 160, 133,1.0);
$emerald: rgba(46, 204, 113,1.0);
$nephritis: rgba(39, 174, 96,1.0);
$peter_river: rgba(52, 152, 219,1.0);
$belize_hole: rgba(41, 128, 185,1.0);
$amethyst: rgba(155, 89, 182,1.0);
$wisteria: rgba(142, 68, 173,1.0);
$wet_asphalt: rgba(52, 73, 94,1.0);
$midnight_blue: rgba(44, 62, 80,1.0);
$sun_flower: rgba(241, 196, 15,1.0);
$orange: rgba(243, 156, 18,1.0);
$carrot: rgba(230, 126, 34,1.0);
$pumpkin: rgba(211, 84, 0,1.0);
$alizarin: rgba(231, 76, 60,1.0);
$pomegranate: rgba(192, 57, 43,1.0);
$clouds: rgba(236, 240, 241,1.0);
$silver: rgba(189, 195, 199,1.0);
$concrete: rgba(149, 165, 166,1.0);
$asbestos: rgba(127, 140, 141,1.0);
以上是关于scss 颜色样式表外观自动从颜色列表生成颜色和背景的主要内容,如果未能解决你的问题,请参考以下文章
在普通样式表视图上设置 UITableViewCell 背景颜色?
CSDN设置字体样式及颜色(附颜色表)
CSDN设置字体样式及颜色(附颜色表)
ionic4中自定义主题的颜色
css怎么让两个字体颜色叠加在一起
scss Sass:生成解耦颜色方案#sass