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);
$width: 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 */
时间： 2025-01-07 03:49:20