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. 「日常训练」 Genghis Khan the Conqueror(HDU-4126)

    题意 给定\(n\)个点和\(m\)条无向边(\(n\le 3000\)),需要将这\(n\)个点连通.但是有\(Q\)次(\(Q\le 10^4\))等概率的破坏,每次破坏会把\(m\)条边中的某条 ...

  2. Kotlin的密封(Sealed)类:超强的枚举(KAD 28)

    作者:Antonio Leiva 时间:Jun 27, 2017 原文链接:https://antonioleiva.com/sealed-classes-kotlin/ Kotlin的封装类是Jav ...

  3. 使用python+selenium控制手工已打开的浏览器

    我们可以利用Chrome DevTools协议.它允许客户检查和调试Chrome浏览器. 打开cmd,在命令行中输入命令: chrome.exe --remote-debugging-port=922 ...

  4. Linux命令应用大词典-第8章 日期和时间

    8.1 cal:显示日历信息 8.2 date:显示和设置系统日期和时间 8.3 hwclock:查看和设置硬件时钟 8.4 clock:查看和设置硬件时钟 8.5 clockdiff:主机之间测量时 ...

  5. 使用getid3获取音频文件信息

    今天有个需求,在上传音频文件时候自动获取音频的秒数,和大家分享一下. 首先把getid3的包下载下来 链接:https://pan.baidu.com/s/1Qmdj-I4boz9Sm9GFsON0D ...

  6. Python全栈 Web(HTML基础语法)

    原文地址:           https://yq.aliyun.com/articles/632672 .............................................. ...

  7. lintcode204 单例

    单例   单例 是最为最常见的设计模式之一.对于任何时刻,如果某个类只存在且最多存在一个具体的实例,那么我们称这种设计模式为单例.例如,对于 class Mouse (不是动物的mouse哦),我们应 ...

  8. JSP页面中文乱码问题

    $.get()方法到服务器端中文乱码 在jsp页面使用encodeURI(“中文”),在服务器端进行解码 String name = req.getParameter("name" ...

  9. [git] Git in Practice

    Work flow with git and github Work with Remotes Check the current status git status Check the latest ...

  10. PK3Err0040

    PK3Err0040 The target device is not ready for debugging. Please check your configuration bit setting ...