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 ...
随机推荐
- HTML5简单进度环插件
前几天做了一个进度条的插件.今天我用HTML5的arc做一个简单的进度环的插件. 代码演示 事实上非常easy的.相同,我们先用一个实例: 配置js代码 var setting = { id: &qu ...
- 叫号系统排队系统挂号系统实现(JAVA队列)
关于队列,使用的地方很的多. 现实中有许多的样例. 比方医院的挂号系统,银行里的叫号系统,食堂里的排队打饭等等.市场上又这种排队取号的设备.他们的功能基本例如以下: 1.系统可联网联机统一发号.2.系 ...
- Oracle Table Function
Oracle Table Function在Oracle9i时引入.完美的兼容了view和存储过程的长处: 应用举例: 1.Table()函数: set feedback off create or ...
- UI自动化
1.下载安装JDK,配置环境变量 2.下载eclips,并安装 3.下载jskuli截图工具,并安装 4.下载Jspec插件,将其放在eclipse路径下的\plugins文件夹中.(打开eclips ...
- 如何比较Keras, TensorLayer, TFLearn ？——如果只是想玩玩深度学习，想快速上手 -- Keras 如果工作中需要解决内部问题，想快速见效果 -- TFLearn 或者 Tensorlayer 如果正式发布的产品和业务，自己设计网络模型，需要持续开发和维护 -- Tensorlayer
转自:https://www.zhihu.com/question/50030898/answer/235137938 如何比较Keras, TensorLayer, TFLearn ? 这三个库主要 ...
- nyoj--914--Yougth的最大化（二分查找）
Yougth的最大化 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 Yougth现在有n个物品的重量和价值分别是Wi和Vi,你能帮他从中选出k个物品使得单位重量的价值最 ...
- Oracle RAC集群体系结构
一. Oracle集群体系结构 Oracle RAC,全称是Oracle Real Application Cluster,即真正的应用集群,是oracle提供的一个并行集群系统,整个集群系统由Ora ...
- java布局管理
FlowLayout :组件在一行中按加入的先后顺序从左至右水平排列,排满后折行,每行中的组件都居中排列.BorderLayout:把容器空间划分为北.南.西.东.中五个区,每加入一个组件都应说明把这 ...
- xBIM 高级01 IFC多模型合并
系列目录 [已更新最新开发文章,点击查看详细] 多模型合并可以实现以下功能: 覆盖多个模型以表现得像一个模型 统一访问数据,就像它是单个模型一样 只读.要修改模型的内容,您必须使用特定模型 不 ...
- vue中响应式props办法
title: vue中响应式props办法 toc: false date: 2018-12-25 21:22:49 categories: Web tags: Vue 更新props数据时,使用th ...