sass10 demo1
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的更多相关文章
- struts2 基础demo1
我们都知道 struts2 是基于webframework 出现的 优秀的mvc 框架, 他和struts1 完全没有联系.struts2 是一个框架, 啥叫框架呢?是一个优秀的半成品 . web的框 ...
- struts2&&Hibernate Demo1
这篇文章和<struts1&&Hibernate Demo1>基本类似,我这里只是拷贝代码了. 最核心的代码:LoginAction.java package action ...
- 通用窗口类 Inventory Pro 2.1.2 Demo1（上）
插件功能 按照Demo1的实现,使用插件来实现一个装备窗口是很easy的,虽然效果还很原始但是也点到为止了,本篇涉及的功能用加粗标出,具体的功能如下: 1.实现了两个窗口,通过点击键盘I来,打开或者关 ...
- （23）unity4.6学习Ugui中国文档-------非官方Demo1
大家好,我是广东太阳. 转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unitym ...
- 20ViewPager demo1,2:接收ViewPager展示View的使用
Demo1 MainActivity .JAVA package com.qf.day20_viewpager_demo1; import java.util.ArrayList; import ja ...
- WPF Demo1
<Window x:Class="Demo1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/ ...
- [模拟回调] demo1模拟用字符串调用js函数 demo2模拟springmvc controller回调页面js函数
demo1. 模拟用字符串调用js 函数 function dataQuery() { var strFun = "testCallBack"; var strParam = &q ...
- JS-以鼠标位置为中心的滑轮放大功能demo1
以鼠标位置为中心的滑轮放大功能demo1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
- oracle--分页过程demo1
oracle分页过程demo1: --ROWNUM用法 select o.*,rownum rn from (select * from emp) o where rownum<=10; sel ...
随机推荐
- a.WHERE使用中单行子查询（适用于>,<,=,>=,<=等条件）
a.单行子查询(适用于>,<,=,>=,<=等条件) //查询工资最高的员工编号和员工名 select empno,ename from emp where ...
- 洛谷 P2700 逐个击破
P2700 逐个击破 题目背景 三大战役的平津战场上,傅作义集团在以北平.天津为中心,东起唐山西至张家口的铁路线上摆起子一字长蛇阵,并企图在溃败时从海上南逃或向西逃窜.为了就地歼敌不让其逃走,毛主席制 ...
- WinCE C#程序，控制启动时仅仅能启动一个程序，使用相互排斥量来实现，该实现方法測试通过
</pre><pre code_snippet_id="430174" snippet_file_name="blog_20140718_5_46349 ...
- [ReactVR] Start a Virtual Reality Project Using the React VR CLI
We will learn how to set up a React VR project, run the development mode with hot reloading, and tak ...
- Hibernate的多种关系映射（oto、otm、mtm）
前提:使用注解映射 一.一对一(夫妻关系表) 两个表:hus1和wife1表,外键为id,各自有名字hname和wname 映射得到两个类:Hus1和Wife1类 Hus1类(主表): package ...
- Android sdCard路径问题
一,获取Android设备的全部存储设备,这里边肯定有一个能用的 StorageManager sm = (StorageManager) context.getSystemService(Conte ...
- Python入门机器学习
如何通过Python入门机器学习 我们都知道机器学习是一门综合性极强的研究课题,对数学知识要求很高.因此,对于非学术研究专业的程序员,如果希望能入门机器学习,最好的方向还是从实践触发. 我了解到Pyt ...
- chrome的全局搜索快捷键
常用 文件内搜索 ctrl+f 使用快捷键 ctrl+shift+f, 就会进入到全局搜索模式 打开文件:ctrl+o 打开DevTools 你可以通过以下任何一种方式来访问DevTools: 打开浏 ...
- http请求常出现的状态码
服务器返回的 响应报文 中第一行为状态行,包含了状态码以及原因短语,用来告知客户端请求的结果. 状态码 类别 原因短语 1XX Informational(信息性状态码) 接收的请求正在处理 2XX ...
- 51nod 1096 距离之和最小 思维题，求中位数
题目: 在一条直线上,与两个点距离之和最小的点,是怎样的点? 很容易想到,所求的点在这两个已知点的中间,因为两点之间距离最短. 在一条直线上,与三个点距离之和最小的点,是怎样的点? 由两个点的规律,我 ...