<!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. CSL 的字符串(单调栈)

    题目链接:https://ac.nowcoder.com/acm/contest/551/D 题目大意: 题目描述 CSL 以前不会字符串算法,经过一年的训练,他还是不会……于是他打算向你求助. 给定 ...

  2. MySql cmd下的学习笔记 —— 有关select的操作（order by，limit）

    先选择goods表 set names gbk; 把本店价从低到高排序(order by) (注意)order by 要放在where, group by, having之后 查询本店价从高到低排序 ...

  3. JVM内存分配 -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m

    https://blog.csdn.net/u012882327/article/details/69525166

  4. OpenCV 入门

    1.入门攻略[安装用] https://www.cnblogs.com/linshuhe/p/5764394.html 2.VS2017配置opencv教程(超详细!!!) https://blog. ...

  5. SQL逻辑查询语句执行顺序

    阅读目录 一 SELECT语句关键字的定义顺序 二 SELECT语句关键字的执行顺序 三 准备表和数据 四 准备SQL逻辑查询测试语句 五 执行顺序分析 一 SELECT语句关键字的定义顺序 SELE ...

  6. eMMC基础技术11：flash memory

    [转]http://www.wowotech.net/basic_tech/367.html 0.前言 eMMC 是 Flash Memory 的一类,在详细介绍 eMMC 之前,先简单介绍一下 Fl ...

  7. ethtool 解决网卡丢包严重和网卡原理【转】

    转自:https://blog.csdn.net/u011857683/article/details/83758869 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...

  8. CPU 利用率背后的真相，只有 1% 人知道【转】

    导读:本文翻译自 Brendan Gregg 去年的一篇博客文章 “CPU Utilization is Wrong”,从标题就能想到这篇文章将会引起争议.文章一上来就说,我们“人人皆用.处处使用,每 ...

  9. arx对正在操作的文件进行保存

    //对正在操作的文件进行保存 STDMETHODIMP CTHDatabase::Save(void) { // TODO: 在此添加实现代码 Acad::ErrorStatus es ; try{ ...

  10. centos7怎么永久修改hosname

    centos7怎么永久修改hosname 其实,一般来说安装好虚拟机之后,一般都会进行修改hostname,之前也是在修改的时候,遇到过问题,但是没有深究,今天在修改的时候,好好研究了一下,之前看到好 ...