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. 监控SQLserver计数器

  2. 监控iis计数器

  3. Error: Password file read access must be restricted: /etc/cassandra/jmxremote.password

    在配置JMX远程访问的时候,设置jmxremote.password文件权限,修改该文件时添加写权限,chmod +w jmxremote.password ,放开角色信息那俩行的注释,保存,再使用c ...

  4. org.apache.hadoop.ipc.Client: Retrying connect to server

    这个问题导致jps查看结点进程时发现找不到NodeManager或一段时间后消失,网上查找了很多博客,因hadoop版本不一样且出错的原因也可能不同,所以找了老半天. 步骤:jps --> 看l ...

  5. soapUI 5.1.2 下载以及破解

    转:https://blog.csdn.net/weiqing723/article/details/78865734

  6. webstorm卡顿问题处理

    webstorm卡顿问题处理 学习了:http://blog.csdn.net/qq673318522/article/details/50583831 找到WebStorm.exe.vmoption ...

  7. cocos2dx-3.0创建Android项目时遇到的错误。

    cocos run -p android出现 文件名称.文件夹名或卷标语法不对 Updated project.properties Updated local.properties Updated ...

  8. vargrind 安卓apk

    上层为安卓, 下层为调用c/c++ 库 1.将vargind 按官网方法下载源代码编译  得Inst文件夹 2.通过win 下安卓sdk 中 platform-tools 中的adb push Ins ...

  9. leveldb学习:sstable(2)

    block写入:block_builder block.h和.cc里定义了block的entry存储格式和restart,提供了entry的查找接口以及迭代器.那么怎样往写block里写entry呢? ...

  10. 基于对话框的应用程序,点击button打开一个网页

    核心:使用Webbrowser控件 加入一个新的对话框,右键 Insert ActiveX control,选中 双击对话框生成响应的类(Web).并为webbrowser绑定成员变量(m_Web) ...