文档章节

stylus预处理入门(三)--插值

法斗斗
 法斗斗
发布于 2017/07/21 15:05
字数 287
阅读 35
收藏 0

stylus预处理入门(三)--插值

转载原地址:http://www.jianshu.com/p/7b8acb85f1b5

插值(interporation)

插值相当于解析表达式或者变量,让它们的值替换插值的位置。
注: 不能用于属性值的插值(但属性值可以使用变量替换)。

  • 在css属性名中使用插值
partOfProp = radius
value = 10px
div
    border-{partOfProp} value  /*切记属性值这里不可以使用插值*/

转化:

div {
  border-radius: 10px;
}
  • 在选择器中使用插值
selector = div
partOfProp = radius
value = 10px
{selector}
    border-{partOfProp} value

转化:

div {
  border-radius: 10px;
}
selectors = '#foo,#bar,.baz'

{selectors}
  background: #000

转化:

#foo,
#bar,
.baz {
  background: #000;
}

高级使用:与mixins配合使用

  vendor(prop, args)
    -webkit-{prop} args
    -moz-{prop} args
    {prop} args

  border-radius()
    vendor('border-radius', arguments)

  box-shadow()
    vendor('box-shadow', arguments)

  button
    border-radius 1px 2px / 3px 4px

转化

  button {
    -webkit-border-radius: 1px 2px / 3px 4px;
    -moz-border-radius: 1px 2px / 3px 4px;
    border-radius: 1px 2px / 3px 4px;
  }

高级使用:与循环迭代(iteration)配合使用

table
  for row in 1 2 3 4 5
    tr:nth-child({row})
      height: 10px * row

转化:

table tr:nth-child(1) {
  height: 10px;
}
table tr:nth-child(2) {
  height: 20px;
}
table tr:nth-child(3) {
  height: 30px;
}
table tr:nth-child(4) {
  height: 40px;
}
table tr:nth-child(5) {
  height: 50px;
}
 

本文转载自:

法斗斗
粉丝 23
博文 368
码字总数 17774
作品 0
杨浦
程序员
私信 提问
如何在mpvue中使用stylus,并配置全局变量文件

一、stylus的介绍 这个兄弟学名叫 stylus,是 CSS 的预处理框架。 CSS 预处理,顾名思义,预先处理 CSS。那 stylus 咋预先处理呢?stylus 给 CSS 添加了可编程的特性,也就是说,在 stylus 中...

Kevin_top
02/28
0
0
为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架。本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass、Less CSS、Stylus。 首先我们来简单介绍下...

彭博
2012/11/27
1K
0
为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架。本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass、Less CSS、Stylus。 首先我们来简单介绍下...

红薯
2012/03/13
145.5K
58
Pug+Stylus+Bootstrap入门

本文说明 博主最近在学习Express.js,里面涉及到Pug,Stylus和Bootstrap的使用。为了使文章主题专一,故而把有关这三者的基本知识点另外写成本文。 本文在写作过程中主要参阅了下面这些资料:...

桥头堡2015
2016/04/13
2.1K
0
您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架。本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass、Less CSS、Stylus。 首先我们来简单介绍下...

黄金林
2016/12/20
96
0

没有更多内容

加载失败,请刷新页面

加载更多

前端技术之:Prisma Demo服务部署过程记录

安装前提条件: 1、已经安装了docker运行环境 2、以下命令执行记录发生在MackBook环境 3、已经安装了PostgreSQL(我使用的是11版本) 4、Node开发运行环境可以正常工作 首先需要通过Node包管...

popgis
今天
5
0
数组和链表

数组 链表 技巧一:掌握链表,想轻松写出正确的链表代码,需要理解指针获引用的含义: 对指针的理解,记住下面的这句话就可以了: 将某个变量赋值给指针,实际上就是将这个变量的地址赋值给指...

code-ortaerc
今天
4
0
栈-链式(c/c++实现)

上次说“栈是在线性表演变而来的,线性表很自由,想往哪里插数据就往哪里插数据,想删哪数据就删哪数据...。但给线性表一些限制呢,就没那么自由了,把线性表的三边封起来就变成了栈,栈只能...

白客C
今天
42
0
Mybatis Plus service

/** * @author beth * @data 2019-10-20 23:34 */@RunWith(SpringRunner.class)@SpringBootTestpublic class ServiceTest { @Autowired private IUserInfoService iUserInfoS......

一个yuanbeth
今天
5
0
php7-internal 7 zval的操作

## 7.7 zval的操作 扩展中经常会用到各种类型的zval,PHP提供了很多宏用于不同类型zval的操作,尽管我们也可以自己操作zval,但这并不是一个好习惯,因为zval有很多其它用途的标识,如果自己...

冻结not
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部