<!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. typecho只能打开主页,文章详细内容打不开

    安装环境: nginx+linux 问题描述: 安装了typecho显示成功安装,但是前端只显示标题和摘要,点击查看不了详细内容. 问题原因: PHP这块不支持pathinfo, 官网提供的解决方案有 ...

  2. 20165337 2017-2018-2《Java程序设计》课程总结

    一.每周作业链接汇总 预备作业一:我期望的师生关系 简要内容: 读完文章的感想 我印象深刻的老师 我期望的师生关系 预备作业二:学习基础和C语言基础调查 简要内容: 你有什么技能比大多人(超过90%以 ...

  3. canves绘制北京地铁线路图，包括线路绘制，优先路线，单路径选择。

    canves绘制北京地铁线路图,包括线路绘制,优先路线,单路径选择. 即将推出,后台涵盖各种语言,php,C#,java,nodejs等.

  4. 记录 一次深夜救火：datanode.data.dir

    火灾背景: Hadoop集群,4个节点,每一台配置都不一样 火灾现场: 1.突然发现DN4硬盘报警,检查硬盘,发现挂载如下: /home 200GB /home/data 3TB 然后发现datano ...

  5. Mongoose简介

    Mongoose 官网地址:http://mongoosejs.com/   ,Mongoose 为node.js提供了优雅的,针对mongodb的ODM(Object Document Mappin ...

  6. python父类调用子类了解一下

    class B(): def __init__(self): pass def start(self): print(self.parse()) class A(B): def __init__(se ...

  7. 解决64bit不能连接access的问题

    原有的程序迁移至64位,结果调用数据库时出错,原因是jet驱动没有64位的,得换用64位的驱动程序:   1. 下载运行 AccessDatabaseEngine_x64.exe (http://ww ...

  8. Apollo-3.0本地编译

    Apollo-3.0本地编译 用docker编译所用的dev.x86_64.dockerfile文件(具体位置在apollo/docker/build)中有所有的依赖库或包, 还会执行一些shell脚 ...

  9. lanmp安装

    下载安装(ssh登录服务器,执行如下操作即可,需要用到root用户权限来安装)源码编译安装wget http://dl.wdlinux.cn:5180/lanmp_laster.tar.gztar z ...

  10. Light OJ 1012

    经典搜索水题...... #include<bits/stdc++.h> using namespace std; const int maxn = 20 + 13; const int ...