文档章节

stylus预处理入门(二)--变量

法斗斗
 法斗斗
发布于 2017/07/21 15:04
字数 399
阅读 17
收藏 0

stylus预处理入门(二)--变量

 

转载:原地址http://www.jianshu.com/p/836ee0254baf

变量(variables)

变量的标识符可以由$、下划线、字母、数字组成,其中数字不能作为变量的开头。其实这里的变量只是理解为单纯的字符替换

外部定义变量:

_font-size = 14px
font = _font-size "Lucida Grande", Arial

body
  font font, sans-serif

转化:

body {
  font: 14px "Lucida Grande", Arial, sans-serif;
}

下面是变量的另外一种用法,不在外部定义变量:

  • 内部重新定义当前变量
 #logo
   width: w = 150px
   height: h = 80px
   margin-left: (w / 2)
   margin-top: (h / 2) /*注意括号一定要加上*/

转化:

#logo {
  width: 150px;
  height: 80px;
  margin-left: 75px;
  margin-top: 40px;
}
  • 使用内部变量
 #logo
   width: w = 150px
   height: h = 80px
   margin-left: (@width / 2)
   margin-top: (@height / 2) /*注意括号一定要加上*/

转化:

#logo {
  width: 150px;
  height: 80px;
  margin-left: 75px;
  margin-top: 40px;
}

变量的深入用法:写在mixins里,与分支结构配合定义初始属性值等。

  position()
    position: arguments
    z-index: 1 unless @z-index /*这里是mixins,如果不懂可以先忽略。*/

  #logo
    z-index: 20
    position: absolute

  #logo2
    position: absolute

转化:

#logo {
  z-index: 20;
  position: absolute;
}
#logo2 {
  position: absolute;
  z-index: 1;
}

变量冒泡查询

先看一个栗子:

   body
    color: red
    ul
      li
        color: blue
        p
            color:black
            a
                background-color: @color

转化:

body {
  color: #f00;
}
body ul li {
  color: #00f;
}
body ul li p {
  color: #000;
}
body ul li p a {
  background-color: #000;
}

注:从当前层开始,一直往上层查询,直到找到为止,找不到则返回null。上面例子中选择器"body ul li p"就定义了color属性了,而且选择器a被"body ul li p"嵌套的。所以查询到了上层的color属性,停止查询。

 

本文转载自:

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

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

Kevin_top
02/28
0
0
Vue中使用CSS预处理器 stylus以及配置全局变量的方法

前言 不得不说CSS预处理器(Sass/Less/Stylus)极大的方便了前端研发攻城狮编写CSS样式,提供了变量定义、可嵌套的选择器、mixins混合书写、函数定义等诸多便捷的能力。 今天呢,胡哥就以stylu...

JustBeCoder
2018/07/12
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.1K
58
您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

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

黄金林
2016/12/20
95
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot-MVC RequestBody中LocalDateTime的自适应配置

请求的json报文中可能会出现 一下几种: ['2019-01-01','2019-01-01 12:03:34','20190101120334'] 但是接收的Request实体类日期字段是LocalDateTime类型 LocalDateTime applyDate; 希望的情况......

汉堡OSC
33分钟前
5
0
小招喵所在的国家正处于怪兽入侵的战场中,这个国家一共有n+1个城市

import java.util.Arrays; import java.util.Scanner; public class test3 { public static long max=0;public static void main(String[] args) { Scanner sc = new Scanner(System.i......

南桥北木
34分钟前
4
0
活动策划思维导图模板分享,怎样绘制思维导图操作方法介绍

对于一场活动的举办可以事先使用思维导图简略的将整个过程进行总结归纳使用,这样清晰的思维导图即利于工作的进行,也可以清晰明了了熟悉整个过程,下面是为大家分享的几款活动策划思维导图模...

干货趣分享
41分钟前
5
0
Android高级xml布局之输入框EditText设计

今天给大家介绍一下如何实现一款简约时尚的安卓登陆界面。大家先看一下效果图 当用户输入时动态出现删除按钮 现在先罗列一下技术点: 1.如何使用圆角输入框和按钮背景 2.如何实现“手机号”、...

shzwork
今天
4
0
RxJava进行单元测试的方式

@Test public void completeTask_retrievedTaskIsComplete() { // Given a new task in the persistent repository final Task newTask = new Task(TITLE, ""); ......

SuShine
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部