<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style/demo.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>
<div style="clear:both;"></div>
<div class="test2"></div>
</body>
</html>

@charset "UTF-8";
$list: red orange yellow green grey blue purple;
//$len: length($list);//自动获取长度
$width: percentage(1/7);
@for $i from 1 through 7 {
  .test .color#{$i} {
    width: $width;
    background-color: nth($list, $i);
    height: 10px;
    float: left;
  }
}

.test {
  width: 100%;
}
//使用这种方法（background-image: linear-gradient）也可以实现各种颜色的布局
.test2 {
  //width: 100%;
  //background-image: linear-gradient(to right, red 0%, red $width,orange $width, orange $width * 2);
}

注意：sass里边写的div个数应该与html里的布局一致，否则是识别不到的。

sass方式实现颜色平铺（红色--->紫色）的更多相关文章

  1. sass动态实现颜色平铺显示

    @function stripes($position,$colors) { $colors: if(type-of($colors)!='list', compact($colors), $colo ...

  2. css如何将图片横向平铺？

    在CSS中,可以使用background(背景)属性来添加图片,默认图片是向x轴和y轴重复.那么css如何将图片横向平铺?下面本篇文章就来给大家介绍一下使用CSS将图片横向平铺的方法,希望对大家有所帮 ...

  3. CSS背景颜色、背景图片、平铺、定位、固定

    CSS背景颜色设置 background-color:red;如设置背景颜色为红色: 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:u ...

  4. 笔记《精通css》第4章 背景图像，平铺方式，背景定位，圆角框，投影，不透明

    第4章  背景图像,平铺方式,背景定位,圆角框,投影,不透明 1.背景图像 background-image:url() 2.平铺方式 background-repeat:repeat-x repea ...

  5. android背景平铺方式 tileMode

    创建重复的背景图片  在drawable目录下创建一个repeat_bg.xml:    然后在布局的xml文件中可以这样引用:    ================================ ...

  6. QPainter绘制图片填充方式（正常大小、剪切大小、自适应大小、平铺）

    Qt中QPainter提供了绘制图像的API,极大地方便了我们对图像的绘制. Qt中提供了QPixmap, QBitmap,QBitMapQImage,QPicture等图像绘图设备,它们的类关系如下 ...

  7. Duilib技巧：背景图片平铺

    贴图的描述 方式有两种    // 1.aaa.jpg    // 2.file='aaa.jpg' res='' restype='0' dest='0,0,0,0' source='0,0,0,0 ...

  8. UIImage图片处理，旋转、截取、平铺、缩放等操作

    来源:iOS_小松哥 链接:http://www.jianshu.com/p/9ab1205f5166 有时候我们需要处理图片,比如改变大小,旋转,截取等等,所以今天说一说图片处理相关的一些操作. 本 ...

  9. 平铺式窗口管理器 Musca 初体验

    作者: 吴吉庆 Version: 1.0 release: 2009-11-04 update: 2009-11-04 为什么用平铺式窗口管理器? 什么是平铺式窗口管理器(tiling window ...

随机推荐

  1. ubuntu16.04配置anaconda环境

    0 - 下载安装包 推荐到清华镜像下载.我选择的是Anaconda3-5.1.0-Linux-x86_64.sh. 1 - 安装Anaconda 然后切换到安装包目录,执行下面命令,期间一直按回车或者 ...

  2. Spring重温(四)--Spring自动组件扫描

    通常情况下,声明所有的Bean类或组件的XML bean配置文件,这样Spring容器可以检测并注册Bean类或组件. 其实,Spring是能够自动扫描,检测和预定义的项目包并实例化bean,不再有繁 ...

  3. Vue对变量的监控

    Vue对变量的监控 watch: { a(val, oldVal) {//普通的watch监听 if (val == "1") { $('#myModal').modal(); } ...

  4. codevs 1082 线段树练习3 （线段树）

    题目: 题目描述 Description 给你N个数,有两种操作: 1:给区间[a,b]的所有数增加X 2:询问区间[a,b]的数的和. 输入描述 Input Description 第一行一个正整数 ...

  5. delete指针以后应赋值为NULL

    delete p后,只是释放了指针中存放的地址中的内存空间.但是指针变量p仍然存在(即指针p本身所占有的内存),且p中存放的地址还是原来的地址. 例如: 对一个非空指针delete后,若没有将p赋为N ...

  6. HBase详细概述

    原文地址:https://blog.csdn.net/u010270403/article/details/51648462 本文首先简单介绍了HBase,然后重点讲述了HBase的高并发和实时处理数 ...

  7. windows系统yolov3的安装教程（图文）

    记于 2018-05-19 13:21:13 距离开始着手安装yolov3已经过去将近20个小时,当然我并没有装那么久啦,就是大概4,5个小时这么久,网络上教程很少,步骤也千奇百怪,这次成功装好后就想 ...

  8. 一、Windows10下python3和python2同时安装

    python2.exe.python3.exe和pip2.pip3设置 说明:安装安装python3和python2请参考本系列教程(一) 1.添加python2到系统环境变量 打开,控制面板\系统和 ...

  9. zookeeper的三种安装模式

    zookeeper的安装分为三种模式:单机模式.集群模式和伪集群模式. 1.单机模式 首先,从Apache官网下载一个Zookeeper稳定版本,本次教程采用的是zookeeper-3.4.9版本. ...

  10. Druid监控页面配置与使用

    一.Maven中添加Durid连接池依赖 <!-- druid连接池 --> <dependency> <groupId>com.alibaba</group ...