@while是一个循环指令,其后跟着一个表达式,如果表达式的返回值为false,则停止循环。

  scss代码实例如下:

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

  编译后的css代码如下:

.item-6 {
width: 12em;
}
.item-4 {
width: 8em;
}
.item-2 {
width: 4em;
}

scss-@while指令的更多相关文章

  1. SCSS 简要教程(常用指令与方法)

    Sass是成熟.稳定.强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能. 特性概览 CSS书写代码规模较大的Web应用时,容易造 ...

  2. 前端scss的使用及gulp发布方式

    如标题所述,这篇博文是说scss以及gulp发布方式: 如果你没用过scss和gulp或不甚了解,你可以看看这篇博文,叙说的水平有限,各位看官大神见谅: 说scss之前,先来说说sass,sass是一 ...

  3. scss 学习笔记

    由于没有办法在网络上找到适合顾客的模板,同时之前自己写css也没有很好的管理方式,最终选择了scss. Nested #main p { color: #00ff00; width: 97%; .re ...

  4. vue-cli 自定义指令directive 添加验证滑块

    vue项目注册登录页面遇到了一个需要滑块的功能,网上看了很多插件发现都不太好用,于是自己写了一个插件供大家参考: 用的是vue的自定义指令direcive,只需要在需要的组件里放入对应的标签嵌套即可: ...

  5. scss 编译方法

    第一种: 手动创建 scss文件夹  用Node.js command promt  进入项目目录  在项目目录下面 输入  sass scss/main.scss css/main.css    s ...

  6. Scss预处理器的使用总结

    变量 .嵌套.Mixin混合.function函数.插值 变量及文件导入 通过$定义变量 $white:#fff; $black:#000; 变量引用 .containner{ color:$blac ...

  7. css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)

    什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...

  8. Scss 与 Sass 是什么,他们的区别在哪里?

    转载自:http://yunkus.com/difference-between-scss-sass/ 要想了解Scss 与 Sass 是什么以及他们的区别又在哪里,我们不过不先从他们各自的定义说起. ...

  9. Scss - 简单笔记

    原文链接:scss 教程 手头上疯狂在用 scss,虽然可以在里面写原生的 css, 但是为了保持风格的一致性,还是滚去看了看 scss 文档. 一.变量 变量的引入是 scss 的一个核心特性,变量 ...

  10. Angular使用总结 --- 通过指令动态添加组件

    之前自己写的公共组件,都是会先引入,需要调起的时候再通过service控制公共组件状态.值.回调函数什么的.但是有一些场景不适合这种方式,还是动态添加组件更加好.通过写过的一个小组件来总结下. 创建组 ...

随机推荐

  1. linux系统安全及应用——账号安全(用户切换与提权)

    一.su命令切换用户 su uesr 和 su - user 的区别:前者只切换登录人,shell环境还是上一个人的:后者表示注销当前用户,再进入新用户的shell. 查看切换记录:/var/log/ ...

  2. Android--Apache HttpClient 的一些问题

    1,对于Android4.0之上的环境下,不能在主线程中访问网络    http://www.cnblogs.com/plokmju/p/Android_apacheHttpClient.html   ...

  3. Ajax轮询 select循环输出

    弹出层 <include file="Pub:header"/> <style> .del{color:red} .addname{color:#337ab ...

  4. 5、Numpy处理数据

    转载自:http://old.sebug.net/paper/books/scipydoc/numpy_intro.html#id9 2 NumPy-快速处理数据 标准安装的Python中用列表(li ...

  5. 绿色版NVM安装与配置详细说明

      绿色版本(不需要安装,直接解压,然后配置环境变量等) 由于最初发布的nvm并不支持window,所以如果希望可以像在*nix上一样控制node的版本,有两种选择: nvm-windows nodi ...

  6. flex布局浅谈

    flex布局浅谈和实例 阿基米德曾说给我一个支点我可以撬动地球,而拥有flex基本可以撬动所有的布局. 1.flex布局基本介绍及效果展示 工欲善其事必先利其器,来来来,一起看下基础知识先(呵~,老掉 ...

  7. Vuex 使用了 module 后的访问方法 ..

    如果 使用了  module 和 namespace state 数据:=>   this.$store.state.User.info  (user 是模块名字. info 是 state 里 ...

  8. C++_友元2-友元成员函数

    接着上一篇<友元是什么>中,我们发现Remote友元类的大多数方法都是用Tv类的公有接口实现.这意味着这些方法并不是真正需要友元. 事实上唯一直接访问Tv成员的Remote方法是Remot ...

  9. 给小程序组件创建slot

    <!--comviewonents/juan/juan.wxml--> <view class="model-wrapper" hidden="{{vi ...

  10. Oracle Date Function 讲解和事例

    1 year=1*12 months 1 day=24 hours=24*(1*60mins)=24*60*(1*60 seconds) 1 week =7 days 注意: 黑色字体是 oracle ...