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 前情回顾 在上一篇博文<移动端各种各样的列表的制作方法(二)> ...
随机推荐
- 「日常训练」 Genghis Khan the Conqueror(HDU-4126)
题意 给定\(n\)个点和\(m\)条无向边(\(n\le 3000\)),需要将这\(n\)个点连通.但是有\(Q\)次(\(Q\le 10^4\))等概率的破坏,每次破坏会把\(m\)条边中的某条 ...
- Kotlin的密封(Sealed)类:超强的枚举(KAD 28)
作者:Antonio Leiva 时间:Jun 27, 2017 原文链接:https://antonioleiva.com/sealed-classes-kotlin/ Kotlin的封装类是Jav ...
- 使用python+selenium控制手工已打开的浏览器
我们可以利用Chrome DevTools协议.它允许客户检查和调试Chrome浏览器. 打开cmd,在命令行中输入命令: chrome.exe --remote-debugging-port=922 ...
- Linux命令应用大词典-第8章 日期和时间
8.1 cal:显示日历信息 8.2 date:显示和设置系统日期和时间 8.3 hwclock:查看和设置硬件时钟 8.4 clock:查看和设置硬件时钟 8.5 clockdiff:主机之间测量时 ...
- 使用getid3获取音频文件信息
今天有个需求,在上传音频文件时候自动获取音频的秒数,和大家分享一下. 首先把getid3的包下载下来 链接:https://pan.baidu.com/s/1Qmdj-I4boz9Sm9GFsON0D ...
- Python全栈 Web(HTML基础语法)
原文地址: https://yq.aliyun.com/articles/632672 .............................................. ...
- lintcode204 单例
单例 单例 是最为最常见的设计模式之一.对于任何时刻,如果某个类只存在且最多存在一个具体的实例,那么我们称这种设计模式为单例.例如,对于 class Mouse (不是动物的mouse哦),我们应 ...
- JSP页面中文乱码问题
$.get()方法到服务器端中文乱码 在jsp页面使用encodeURI(“中文”),在服务器端进行解码 String name = req.getParameter("name" ...
- [git] Git in Practice
Work flow with git and github Work with Remotes Check the current status git status Check the latest ...
- PK3Err0040
PK3Err0040 The target device is not ready for debugging. Please check your configuration bit setting ...