1. for

@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}

2. while

$i: 6;

@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

3. each

@each $member in a, b, c, d {
  .#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
} /*或者*/ $icon_name:user,pass,checked,select; @each $i in $icon_name{
.icon_#{$i}{
width: 10px;
}
}

sass的循环for,while,each的更多相关文章

  1. Sass for循环中编译%时报错解决方案

    sass功能强大,特别是支持for循环,节省大量开发时间,但是在开发时遇到一个问题,直接使用%时没有问题,当有变量时再加% 单位在编译时报错: 这样没有问题: @for $width from 0 t ...

  2. Sass 条件-循环语句

    学习Sass中 @if...@else @for @while @each 一.条件判断 - @if @else 示例: @mixin blockOrHidden($boolean:true){ @i ...

  3. sass - for循环写法

    如要设置多个li的动画延迟时间时 注:这里选择器要加#{}才行 不然就会编译成: 6.7. 插值语句 #{} (Interpolation: #{}) 通过 #{} 插值语句可以在选择器或属性名中使用 ...

  4. sass、less和stylus的安装使用和入门实践

    刚 开始的时候,说实话,我很反感使用css预处理器这种新玩意的,因为其中涉及到了编程的东西,私以为很复杂,而且考虑到项目不是一天能够完成的,也很少是 一个人完成的,对于这种团队的项目开发,前端实践用c ...

  5. CSS预处理器——Sass、LESS和Stylus实践

    CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风 ...

  6. sass和less、stylus语法(2)

    6.运算符(Operations)CSS预处理器语言还具有运算的特性,其简单的讲,就是对数值型的Value(如:数字.颜色.变量等)进行加减乘除四则运算.这样的特性在CSS样式中是想都不敢想的,但在C ...

  7. CSS 即将支持嵌套,SASS/LESS 等预处理器已无用武之地?

    最近,有一则非常振奋人心的消息,CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting,表示 CSS 嵌套规范即将进入规范的 FWPD 阶段. 目前对应的 ...

  8. 关于 CSS 反射倒影的研究思考

    原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有 ...

  9. h5做列表 水平分割

    移动端H5各种各样的列表的制作方法(三) by FungLeo 移动端H5各种各样的列表的制作方法(三) by FungLeo 前情回顾 在上一篇博文<移动端各种各样的列表的制作方法(二)> ...

随机推荐

  1. 「日常训练」Known Notation(ZOJ-3829)

    题意与分析 题意是这样的:给一个字符串,字符串中只包含数字和运算符'*'.现在问字符串是不是一个合法的逆波兰式(后缀表达式).已知逆波兰式的空格消除,也就是说123可以看成123也可以看成1和23.如 ...

  2. Selenium(Python)PageObject页面对象

    使用PageObject页面对象的好处是, 当页面元素的位置发生改变时, 只需要去修改Xpath或者ID, 而不用去修改测试用例本身: 本次的思路是: 1.常用方法类 2.页面对象类 3.测试用例类 ...

  3. Fiddler使用总结(一)

    Fiddler基础知识 .Fiddler是强大的抓包工具,它的原理是以web代理服务器的形式进行工作的,使用的代理地址是:127.0.0.1,端口默认为8888,我们也可以通过设置进行修改. .代理就 ...

  4. [转]JS私有化的实现——稳妥构造函数

    所谓稳妥对象, 指的是没有公共属性, 而且其方法也不引用this的对象.稳妥对象函数遵循与寄生构造函数类似的模式, 但有两点不同: 一是新创建对象的实例方法不引用this: 二是不使用new操作符调用 ...

  5. [JSON].value( keyPath )

    语法:[JSON].value( keyPath ) 返回:[String | Null] 说明:获取指定键名路径值的字符串格式 示例: Set jsonObj = toJson("{bod ...

  6. 【label】标签组件说明

    label标签组件 用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件.目前可以绑定的控件有:<button/>, <che ...

  7. HDU - 6438(贪心+思维)

    链接:HDU - 6438 题意:给出 n ,表示 n 天.给出 n 个数,a[i] 表示第 i 天,物品的价格是多少.每天可以选择买一个物品,或者卖一个已有物品,也可以什么都不做,问最后最大能赚多少 ...

  8. JAVA基础学习之路(八)[1]String类的基本特点

    String类的两种定义方式: 直接赋值 通过构造方法赋值 //直接赋值 public class test2 { public static void main(String args[]) { S ...

  9. POJ 3498 March of the Penguins(网络最大流)

    Description Somewhere near the south pole, a number of penguins are standing on a number of ice floe ...

  10. 《javascript模式--by Stoyan Stefanov》书摘--汇总

    <javascript模式--by Stoyan Stefanov>书摘--基本技巧 http://www.cnblogs.com/liubei/p/JavascriptModeLog1. ...