index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Sass:Syntactiically Awesome Style Sheets</title>

  <link rel="stylesheet" href="css/demo1.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 class="color8"></div>

    </div>

    <div style="clear:both;"></div>

    <div class="test2"></div>

</body>

</html>

scss

$list: red orange yellow green grey blue purple black;

$len: length($list);

$width: percentage(1 / $len);

@for $i from 1 through $len{

  .test .color#{$i}{

    width: $width;

    background-color: nth($list, $i);

    height: 10px;

    float: left;

  }

}

.test{

  width: 100%;

}

.test2{

  height: 10px;

  width: 100%;

  background-image: linear-gradient(to right, red 0%, red $width, orange $width, orange $width * 2);//渐变，to right从左到右

}

css

.test .color1 {

  width: 12.5%;

  background-color: red;

  height: 10px;

  float: left;

}

.test .color2 {

  width: 12.5%;

  background-color: orange;

  height: 10px;

  float: left;

}

.test .color3 {

  width: 12.5%;

  background-color: yellow;

  height: 10px;

  float: left;

}

.test .color4 {

  width: 12.5%;

  background-color: green;

  height: 10px;

  float: left;

}

.test .color5 {

  width: 12.5%;

  background-color: grey;

  height: 10px;

  float: left;

}

.test .color6 {

  width: 12.5%;

  background-color: blue;

  height: 10px;

  float: left;

}

.test .color7 {

  width: 12.5%;

  background-color: purple;

  height: 10px;

  float: left;

}

.test .color8 {

  width: 12.5%;

  background-color: black;

  height: 10px;

  float: left;

}

.test {

  width: 100%;

}

.test2 {

  height: 10px;

  width: 100%;

  background-image: linear-gradient(to right, red 0%, red 12.5%, orange 12.5%, orange 25%);

}

/*# sourceMappingURL=demo1.css.map */

sass10 demo1的更多相关文章

  1. struts2 基础demo1

    我们都知道 struts2 是基于webframework 出现的 优秀的mvc 框架, 他和struts1 完全没有联系.struts2 是一个框架, 啥叫框架呢?是一个优秀的半成品 . web的框 ...

  2. struts2&&Hibernate Demo1

    这篇文章和<struts1&&Hibernate Demo1>基本类似,我这里只是拷贝代码了. 最核心的代码:LoginAction.java package action ...

  3. 通用窗口类 Inventory Pro 2.1.2 Demo1（上）

    插件功能 按照Demo1的实现,使用插件来实现一个装备窗口是很easy的,虽然效果还很原始但是也点到为止了,本篇涉及的功能用加粗标出,具体的功能如下: 1.实现了两个窗口,通过点击键盘I来,打开或者关 ...

  4. （23）unity4.6学习Ugui中国文档-------非官方Demo1

    大家好,我是广东太阳.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unitym ...

  5. 20ViewPager demo1,2:接收ViewPager展示View的使用

    Demo1 MainActivity .JAVA package com.qf.day20_viewpager_demo1; import java.util.ArrayList; import ja ...

  6. WPF Demo1

    <Window x:Class="Demo1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/ ...

  7. [模拟回调] demo1模拟用字符串调用js函数 demo2模拟springmvc controller回调页面js函数

    demo1. 模拟用字符串调用js 函数 function dataQuery() { var strFun = "testCallBack"; var strParam = &q ...

  8. JS-以鼠标位置为中心的滑轮放大功能demo1

    以鼠标位置为中心的滑轮放大功能demo1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  9. oracle--分页过程demo1

    oracle分页过程demo1: --ROWNUM用法 select o.*,rownum rn from (select * from emp) o where rownum<=10; sel ...

随机推荐

  1. HDU 3240

    求卡特兰数前N项的和模M. 直接求必定是不可能的,卡特兰数太大了.想了好久,本打算把位数拆成素数相乘,然后记录下各素数的个数计算.可惜,TLE....因为N太大了. 除法必定是要用到逆元的,但分母与M ...

  2. [Unit Testing] Configure the Angular CLI to use the Karma Mocha test reporter

    Every Angular CLI generated project comes already with Karmapreinstalled as well a couple of executa ...

  3. 调用支付宝SDK问题

    近期做了一个项目里面要有支付.银联.支付宝,微信支付 我先一个一个写吧 先说支付宝SDK 支付宝SDK放进project里面之后肯定会报错.这时候你就要一个一个改掉 1. 2. 3. 哎 我懒得写了. ...

  4. MapReduce(十六): 写数据到HDFS的源代码分析

    1)   LineRecordWriter负责把Key,Value的形式把数据写入到DFSOutputStream watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...

  5. JAVA设计模式之【状态模式】

    状态模式 水.固态.气态.液态 账户.正常状态.透支状态.受限状态 状态模式中,用一个状态类来分散冗长的条件语句,让系统有灵活性和可扩展性 状态模式用于解决系统中复杂对象的状态转换以及不同状态下行为的 ...

  6. JAVA设计模式之【命令模式】

    命令模式 为了降低耦合度,将请求的发送者和接收者解耦 发送请求的对象只需要哦知道如何发送请求,而不必知道如何完成请求 对请求排队 记录请求日志 支持撤销操作 核心在于引入命令类 角色 抽象命令类Com ...

  7. php 设计模式之观察者模式（订阅者模式）

    php 设计模式之观察者模式 实例 没用设计模式的代码,这样的代码要是把最上面那部分也要符合要求加进来,就要修改代码,不符合宁增不改的原则 介绍 观察者模式定义对象的一对多依赖,这样一来,当一个对象改 ...

  8. 消息总线VS消息队列

    前段时间实现了一个基于RabbitMQ的消息总线,实现的过程中自己也在不断得思考.总结以及修正.需要考虑各个维度:效率.性能.网络.吞吐量.甚至需要自己去设想API可能的使用场景.模式.不过能有一件事 ...

  9. MSSQL读取xml字符串到临时表

    DECLARE @hdoc int DECLARE @doc xml SET @doc ='<CityValueSet> <CityItem> <CityId>20 ...

  10. NetworkX-画图

    参考:https://blog.csdn.net/qq951127336/article/details/54586869 1.创建图 networkx有四种图 Graph .DiGraph.Mult ...