<!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. AJAX的来龙去脉（由来）-如何被封装出来的--ajax发送异步请求（四步操作）

    <黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...

  2. Create AI Guard Class

    创建FPSAIGuard类 不需要玩家输入,删除多余的函数 FPSAIGuard.h #include "CoreMinimal.h" #include "GameFra ...

  3. 错误整理：No plugin found for prefix 'jetty' in the current project and in the plugin groups

    在maven进行jetty的调试中出现错误: [ERROR] No plugin found for prefix 'jetty' in the current project and in the ...

  4. FTP服务器的安装与配置

    查看是否安装ftp: rpm -qa |grep vsftpd 1.安装vsftp 1.1.安装vsftp,测试安装的vsftpd的版本是:vsftpd.x86_64 0:3.0.2-11.el7_2 ...

  5. dubbo源码分析12——服务暴露3_doExportUrls()方法分析

    本文紧接上文,doExportUrls()方法位于ServiceConfig类中,代码入口如下: private void doExportUrls() { List<URL> regis ...

  6. 很清晰的解读i2c协议【转】

    转自:https://blog.csdn.net/weixin_41718085/article/details/79376823 转载:http://dpinglee.blog.163.com/bl ...

  7. c++学习day4

    1.结构(struct) struct name{ int num; name *next; } 1)所占内存空间即结构中所有成员的变量大小之和 2)定义指向结构变量的指针比如 name *a; na ...

  8. 【转】Java的接口和抽象类

    对于面向对象编程来说,抽象是它的一大特征.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类.这两者有很多相似的地方,又有很多不同的地方. 一.抽象类 在了解抽象类之前,先来了解一下抽象方 ...

  9. QPainter

    1.QPainter使用save()函数来保存QPainter的状态,并且用restore()函数来使他们回退. void MainWindow::paintEvent(QPaintEvent *ev ...

  10. 1.ROS启动小乌龟

        启动turtlesim 在三个不同的终端中分别执行如下三个指令 roscore rosrun turtlesim turtlesim_node rosrun turtlesim turtle_ ...