<!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. 《前端福音，vue.js 之豆瓣电影组件大揭秘-video》

    {{ message }} 小胡子语法   在 Vue 中被称之为双花括号插值表达式 ---------------- http://todomvc.com/ TodoMVC是一款开源的JavaScr ...

  2. truncate、delete、drop区别

    语法: truncate table 表名 delete from 表名 drop table 表名 应用范围: truncate 只能对表,且不能用于参与了索引的表,不能用于外键约束引用的表 del ...

  3. Web方面的错误， 异常来自hresult:0x80070057(E_INVALIDARG)

    删除 C:/WINDOWS/Microsoft.NET/Framework/v4.0.30319/Temporary ASP.NET files 这个文件夹. 解决方法: 1.代码保存频繁一点.做一个 ...

  4. WPF StoreDataSetPaginator

    public class StoreDataSetPaginator : DocumentPaginator { private DataTable dt; // Could be wrapped w ...

  5. 基于ATT和CK™框架的开放式方法评估网络安全产品

    场景 提供有关如何使用特定商业安全产品来检测已知对手行为的客观见解 提供有关安全产品和服务真实功能的透明度以检测已知的对手行为 推动安全供应商社区增强其检测已知对手行为的能力 地址 https://a ...

  6. Python-集合的常用操作

    #!/usr/bin/env python # -*- coding:utf- -*- # Author:Irving list_1 = [,,,,,,,] list_1 = set(list_1) ...

  7. MySQL入门简介（转载）

    转载链接:https://www.cnblogs.com/webnote/p/5753996.html MySQL的相关概念介绍 MySQL 为关系型数据库(Relational Database M ...

  8. dubbo源码分析8——服务暴露概述

    从上文中可知,com.alibaba.dubbo.config.spring.ServiceBean类是负责解析<dubbo:service/>的配置的,下面是它的类图 从类图上可知它继承 ...

  9. C#编写COM组件

    1.新建一个类库项目 2.将Class1.cs改为我们想要的名字 问是否同时给类改名,确定 3.修改Properties目录下面的AssemblyInfo.cs ComVisible属性设置为True ...

  10. Chromium Embedded Framework (CEF)_3.2171.1979_v20170602_x86.tar.xz

    CEF 为观看各个直播平台而特此修改的浏览器 可以单独提取 Flash 视频, 并可以修改视频的大小等功能 这次修改是主要针对 YY web 直播平台 对录屏的朋友有很大帮组 CEF_3.2171.1 ...