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. MyBatis学习总结（1）——MyBatis快速入门

    一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以 ...

  2. MyBatis初始化

    1. 准备工作 为了看清楚MyBatis的整个初始化过程,先创建一个简单的Java项目,目录结构如下图所示: 1.1 Product 产品实体类 public class Product { priv ...

  3. 洛谷 P2652 同花顺

    P2652 同花顺 题目背景 所谓同花顺,就是指一些扑克牌,它们花色相同,并且数字连续. 题目描述 现在我手里有n张扑克牌,但它们可能并不能凑成同花顺.我现在想知道,最少更换其中的多少张牌,我能让这 ...

  4. 数据库联表统计查询 Group by & INNER JOIN

    原数据表 视频信息表  tab_video_info 播放记录表  tab_play_record 需求 统计播放量(已经开始播放)最多的前20个视频: SELECT a.video_id, SUM( ...

  5. leetCode(24):Binary Search Tree Iterator

    Implement an iterator over a binary search tree (BST). Your iterator will be initialized with the ro ...

  6. Excel数据导入___你hold住么（一）

    近期小编跟着团队一起开发ITOO3.0高校云平台项目,当中的收获是不言而喻滴,在项目中有个导入功能:导入学生信息:导入班级信息:导入教学楼信息等,在不知多少次的尝试之下,成功实现功能. 框架分析 详解 ...

  7. 跟我学设计模式视频教程——适配器模式，适配器模式VS装饰模式

    课程视频 适配器模式 适配器模式VS装饰模式 唠嗑 课程笔记 课程笔记 课程代码 课程代码 新课程火热报名中 课程介绍

  8. emitter 增强 多条件触发

    ;(function(global ,undefined){ var evts = {} ,onceTag = '__event_once' function emit(event ){ ) if ( ...

  9. 【iOS开发-54】案例学习：通过UIScrollView的缩放图片功能练习代理模式的详细实现

    案例:(在模拟器中按住option键,点击鼠标就会出现缩放的手势) (1)在ViewController.m中: --缩放东西是UIScrollView除了滚动之外的还有一个功能,所以须要缩放的东西应 ...

  10. ThinkPHP5.0框架开发--第10章 TP5.0验证器

    ThinkPHP5.0框架开发--第10章 TP5.0验证器 第10章 TP5.0验证器 ======================================= 今日学习 1.验证器 1) 控 ...