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. Object里面的方法

    object里面有12个方法,没写完,写一些部分代表 toString():输出对象的地址字符串(hashcode码) equals():用的是==,比较的是引用,在有些类里面是重写了这个方法的,重写 ...

  2. OSG-更新和回调

    本文转至http://www.cnblogs.com/shapherd/archive/2010/08/10/osg.html 作者写的比较好,再次收藏,希望更多的人可以看到这个文章 互联网是是一个相 ...

  3. WEB网站测试心得整理

    一.输入框: 1.正常的字母/文字/数字(正常流程的测试): 2.重复提交(输入内容后,重复点击提交按钮): 3.纯异常字符/正常输入夹杂异常字符(!@#¥%……&**等等): 4.长度限制( ...

  4. 怎样用Eclipse将Java源代码生成可执行文件[转]

    eclipse将java源代码生成jar可执行文件 用eclipse做了一个web项目的自动化测试,自己用的时候倒是很方便,打开eclipse直接运行即可,但是分享给其他小伙伴用的时候就不太方便,希望 ...

  5. [JSON].result()

    语法:[JSON].result() 返回:[True | False] 说明:用json字符串创建JSON实例时,如果该json字符串不是合法的json格式,会创建一个空的json实例.但是我们如果 ...

  6. 牛客练习赛26:D-xor序列(线性基)

    链接:牛客练习赛26:D-xor序列(线性基) 题意:小a有n个数,他提出了一个很有意思的问题:他想知道对于任意的x, y,能否将x与这n个数中的任意多个数异或任意多次后变为y 题解:线性基 #inc ...

  7. 记一次Log4j2日志无法输出的 心酸史

    问题描述:部分日志无法输出到日志文件中. 项目中的代码: @Resource private ConfigInfo configInfo; private static final Logger lo ...

  8. 正式放弃Edge,重新拥抱Chrome

    从Edge还叫斯巴达的时候我就开始用了,本来对浏览器的要求也没多高,能够打开多个选项卡,稳定,支持最新的规范就好了. 但是Edge真的是越来越让我失望了,卡死问题越来越多,崩溃越来越频繁,我也快奔溃了 ...

  9. 论文笔记:Attentional Correlation Filter Network for Adaptive Visual Tracking

    Attentional Correlation Filter Network for Adaptive Visual Tracking CVPR2017 摘要:本文提出一种新的带有注意机制的跟踪框架, ...

  10. [2018 ACL Short and System] 对话系统

    Short Paper(s) 1.  Task-oriented Dialogue System for Automatic Diagnosis. (Cited by 0) Zhongyu Wei, ...