sass的循环for,while,each
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的更多相关文章
- Sass for循环中编译%时报错解决方案
sass功能强大,特别是支持for循环,节省大量开发时间,但是在开发时遇到一个问题,直接使用%时没有问题,当有变量时再加% 单位在编译时报错: 这样没有问题: @for $width from 0 t ...
- Sass 条件-循环语句
学习Sass中 @if...@else @for @while @each 一.条件判断 - @if @else 示例: @mixin blockOrHidden($boolean:true){ @i ...
- sass - for循环写法
如要设置多个li的动画延迟时间时 注:这里选择器要加#{}才行 不然就会编译成: 6.7. 插值语句 #{} (Interpolation: #{}) 通过 #{} 插值语句可以在选择器或属性名中使用 ...
- sass、less和stylus的安装使用和入门实践
刚 开始的时候,说实话,我很反感使用css预处理器这种新玩意的,因为其中涉及到了编程的东西,私以为很复杂,而且考虑到项目不是一天能够完成的,也很少是 一个人完成的,对于这种团队的项目开发,前端实践用c ...
- CSS预处理器——Sass、LESS和Stylus实践
CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风 ...
- sass和less、stylus语法(2)
6.运算符(Operations)CSS预处理器语言还具有运算的特性,其简单的讲,就是对数值型的Value(如:数字.颜色.变量等)进行加减乘除四则运算.这样的特性在CSS样式中是想都不敢想的,但在C ...
- CSS 即将支持嵌套,SASS/LESS 等预处理器已无用武之地?
最近,有一则非常振奋人心的消息,CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting,表示 CSS 嵌套规范即将进入规范的 FWPD 阶段. 目前对应的 ...
- 关于 CSS 反射倒影的研究思考
原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有 ...
- h5做列表 水平分割
移动端H5各种各样的列表的制作方法(三) by FungLeo 移动端H5各种各样的列表的制作方法(三) by FungLeo 前情回顾 在上一篇博文<移动端各种各样的列表的制作方法(二)> ...
随机推荐
- OSG-基本几何图形
本文转至http://www.cnblogs.com/shapherd/archive/2010/08/10/osg.html 作者写的比较好,再次收藏,希望更多的人可以看到这个文章 互联网是是一个相 ...
- Qt-QML-C++交互实现文件IO系统-后继-读取XML文件和创建XML文件
在前面两篇中,大致完成了一个文件IO的读和写操作.前面两篇文章链接 http://blog.csdn.net/z609932088/article/details/71488250 http://bl ...
- 通过批处理命令for提取数据
前两天有这么个小需求: 在cmd中运行某测试工具后,会返回一个json结果,其中有一个参数的值每次都变且经常要用,正常情况复制粘贴就好了,但这个值非常长,配上cmd的标记+粘贴的行为,就很酸爽了.然后 ...
- uiautomatorviewer定位App元素
这个工具是Android SDK自带的, 日常的工作中经常要使用的, 在C:\Android\sdk\tools\bin目录下: 双击之, 请注意, 我一般选择第一个机器人小图标Device Scre ...
- Java开发工程师(Web方向) - 03.数据库开发 - 第4章.事务
第4章--事务 事务原理与开发 事务Transaction: 什么是事务? 事务是并发控制的基本单位,指作为单个逻辑工作单元执行的一系列操作,且逻辑工作单元需满足ACID特性. i.e. 银行转账:开 ...
- 【转】Buff机制及其实际运用
转自 http://bbs.gameres.com/forum.php?mod=viewthread&tid=215027 首先我想说的是,这是一套机制,并不是单独的一个系统,所谓机制就是一种 ...
- python基本数据类型——元组
元组 元组是一种不可变的序列,创建后不可以修改元素值 # 创建只包含一个元素的元组 >>a = (3,) >>print(a) (3,) #使用 tuple() 转换为元组 & ...
- CSP201703-1:分蛋糕
引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...
- Java进阶知识点:并发容器背后的设计理念
一.背景 容器是Java编程中使用频率很高的组件,但Java默认提供的基本容器(ArrayList,HashMap等)均不是线程安全的.当容器和多线程并发编程相遇时,程序员又该何去何从呢? 通常有两种 ...
- c#中语句的先后顺序对结果的影响
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Test ...