index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sass:Syntactiically Awesome Style Sheets</title> <link rel="stylesheet" href="css/demo1.css"> </head> <body> <div class="test"> <div class="color1"></div> <div class="color2"></div> <div class="color3"></div> <div class="color4"></div> <div class="color5"></div> <div class="color6"></div> <div class="color7"></div> <div class="color8"></div> </div> <div style="clear:both;"></div> <div class="test2"></div> </body> </html>
scss
$list: red orange yellow green grey blue purple black; $len: length($list); $ percentage(1 / $len); @for $i from 1 through $len{ .test .color#{$i}{ width: $width; background-color: nth($list, $i); height: 10px; float: left; } } .test{ width: 100%; } .test2{ height: 10px; width: 100%; background-image: linear-gradient(to right, red 0%, red $width, orange $width, orange $width * 2);//渐变，to right从左到右 }
css
.test .color1 { width: 12.5%; background-color: red; height: 10px; float: left; } .test .color2 { width: 12.5%; background-color: orange; height: 10px; float: left; } .test .color3 { width: 12.5%; background-color: yellow; height: 10px; float: left; } .test .color4 { width: 12.5%; background-color: green; height: 10px; float: left; } .test .color5 { width: 12.5%; background-color: grey; height: 10px; float: left; } .test .color6 { width: 12.5%; background-color: blue; height: 10px; float: left; } .test .color7 { width: 12.5%; background-color: purple; height: 10px; float: left; } .test .color8 { width: 12.5%; background-color: black; height: 10px; float: left; } .test { width: 100%; } .test2 { height: 10px; width: 100%; background-image: linear-gradient(to right, red 0%, red 12.5%, orange 12.5%, orange 25%); } /*# sourceMappingURL=demo1.css.map */