效果圖：
實現代碼：
colorCard.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>sass實現顏色卡</title>
<link href="colorCard.css" rel="stylesheet" />
</head>
<body>
<script type="text/javascript">
var list = ['red', 'orange', 'yellow', 'green', 'blue', 'purple', 'black'];
var html = '';
for(var i = 0; i < list.length; i++){
var ul = document.createElement('ul');
ul.className = 'swatched '+list[i];
for(var j = 0; j < 20; j++){
var li = document.createElement('li');
ul.appendChild(li);
}
document.body.appendChild(ul);
}
</script>
</body>
</html>colorCard.scss(最後要編譯成colorCard.css文件，這裏就不具體寫了)
@charset "UTF-8";
$red: #BD143c;
$orange: saturate(lighten(adjust_hue($red, 39), 5), 7);
$yellow: saturate(lighten(adjust_hue($red, 64), 6), 13);
$green: saturate(lighten(adjust_hue($red, 102), 2), 11);
$blue: saturate(lighten(adjust_hue($red, 201), 2), 1);
$purple: saturate(lighten(adjust_hue($red, 296), 2), 1);
$black: #777;
$bgc: #fff;
@mixin swatchesDarken($color) {
@for $i from 1 through 10 {
$x: $i + 10;
li:nth-child(#{$x}) {
$n: $i * 5;
$bgc: darken($color, $n);
background-color: $bgc;
&:hover:before {
content: '#{$bgc}';
color: lighten($bgc, 40);
font-family: verdana;
font-size: 8px;
padding: 2px;
}
}
}
}
@mixin swatchesLighten($color) {
@for $i from 1 through 10 {
$calColor: $color;
@debug $calColor;
$x: 11-$i;
li:nth-child(#{$x}) {
$n: $i * 5;
$bgc: lighten($calColor, $n);
background-color: $bgc;
&:hover:before {
content: '#{$bgc}';
color: darken($bgc, 40);
font-family: verdana;
font-size: 8px;
padding: 2px;
}
}
}
}
$map: (red:$red, orange:$orange, yellow:$yellow, green:$green, blue:$blue, purple:$purple, black:$black);
.swatched {
display: block;
&:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
li {
width: 4.7619%;
height: 60px;
float: left;
list-style: none outside none;
}
}
@each $la,
$co in $map {
ul.#{$la} {
@debug #{$co};
@include swatchesLighten($co);
@include swatchesDarken($co);
}
}
