stylus之变量(Variables)

变量(Variables):

变量:

我们可以指定表达式为变量,然后在我们的样式中贯穿使用
这里写图片描述

编译为
这里写图片描述

变量甚至可以组成一个表达式列表
这里写图片描述

标识符(变量名,函数等),也可能包括$字符
这里写图片描述

属性查找:

Stylus有另外一个很酷的独特功能,不需要分配值给变量就可以定义引用属性。下面是个很好的例子,元素水平垂直居中对齐(典型的方法是使用百分比和margin负值)
这里写图片描述

我们不使用这里的变量w和h, 而是简单地前置@字符在属性名前来访问该属性名对应的值
这里写图片描述

另外使用案例是基于其他属性有条件地定义属性。在下面这个例子中,我们默认指定z-index值为1,但是,只有在z-index之前未指定的时候才这样
这里写图片描述
这里”logo”因为已经设置了z-index属性,所以通过unless关键字确定最后的z-index的值是20,但是”logo2”因为没有定义z-index的属性,所以最终的值是1

属性会“向上冒泡”查找堆栈直到被发现,或者返回null(如果属性搞不定)。下面这个例子,@color被弄成了blue
这里写图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407618.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

你还不会ant design中的拖拽table实现吗

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 微信公众号关注小歌谣 前言 首先刚开始知道要书写一个这样的功能我的内心是比…

Sharepoint的文档库用资源管理器方式浏览报错“Explorer View ”解决方案。

最近在安装Wss3.0时候,在拷贝已存在资料到客户电脑上时,打开客户的文档库的资源管理器的时候,提示Explorer view 错误,而且客户端访问的时候也报错。 在经过N多的查询和搜索之后终于找到的了解决方法。原来如此http://207.46.19.1…

stylus之插值(Interpolation)

插值(Interpolation): 插值: Stylus支持通过使用{}字符包围表达式来插入值,其会变成标识符的一部分。例如,-webkit-{‘border’ ‘-radius’}等同于-webkit-border-radius 比较好的例子就是私有前缀属性扩展 变身 选择器…

iOS 两个tableview的 瀑布流

iOS 两个tableview的 瀑布流1. [代码]Objective-C //// DocViewController.m// getrightbutton//// Created by 隋文涛 on 12-12-9.// Copyright (c) 2012年 隋文涛. All rights reserved.//#import "DocViewController.h"#define heightofimage(image) imag…

javascript学习系列(4):数组中的some方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说s…

stylus之运算符(Operators)

运算符(Operators): 运算符优先级: 下表运算符优先级,从最高到最低 一元运算符: 以下一元运算符可用”!”,”not”,”-“,””以及”~” 逻辑运算符not的优先级较低,因此,下面这个例子可以替换 用 二元运算符: 下标运算符[]允…

javascript学习系列(5):数组中的reduce方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说f…

oracle数据导入sqlldr小例子

表结构:emp Sql代码 create table EMP ( empno NUMBER(4) not null, ename VARCHAR2(10), job VARCHAR2(9), mgr NUMBER(4), hiredate DATE, sal NUMBER(7,2), comm NUMBER(7,2), deptno NUMBER(2) …

stylus之混合书写(Mixins)

混合书写(Mixins) Mixins:Mixins是预处器中的函数。平时你在写样式时某段CSS样式要经常重复性的用到多个元素中,这样你就需要重复的写多次。在CSS预处器中,你可以为这些公用的CSS样式定义一个Mixin,然后在你CSS需要使用这些样式的…

javascript学习系列(6):数组中的pop等方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说f…

Android -- 发送Broadcast、有序无序

普通广播 优缺点:和有序广播的优缺点相反!发送广播的方法:sendBroadcast()有序广播 …

sqlldr导入数据到数据库

1. 建立一张测试表T_Test create table T_TEST (ID INTEGER,UNAME VARCHAR2(50),AGE INTEGER ) 2. 建立数据文件infile.data(文本文件), 内容如下: 1,张明,20 2,zhou ming, 22 3, 王华good, 25 3. 建立控制文件: T_Test.ctl,文件内容如下&am…

javascript学习系列(7):数组中的concat方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说c…

stylus之方法(Functions)

方法(Functions): 函数:Stylus强大之处就在于其内置的语言函数定义。定义与混入(mixins)一致却可以返回值 返回值: 很简单的例子,两数值相加的方法 我们可以在特定条件下使用该方法,如在属性值中 渲染 默认参数: 可选参数往往有个默认的给定…

[leetcode] Combinations

Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. For example,If n 4 and k 2, a solution is: [[2,4],[3,4],[2,3],[1,2],[1,3],[1,4], ]https://oj.leetcode.com/problems/combinations/ 思路:递归,依次…

stylus之关键字参数(Keyword Arguments)

关键字参数(Keyword Arguments) 关键字参数: Stylus支持关键字参数,或”kwargs”. 允许你根据相关参数名引用参数 下面这些例子功能上都是一样的。但是,我们可以在列表中的任何地方放置关键字参数。其余不键入参数将适用于尚未得到满足的参…

javascript学习系列(8):数组中的splice方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说s…

stylus之内置方法(Built-in Functions)

内置方法(Built-in Functions) red(color):返回color中的红色比重 green(color):返回color中的绿色比重 blue(color):返回color中的蓝色比重 alpha(color):返回color中的透明度比重 dark(color):检查color是否是暗色 …

stylus之其余参数(Rest Params)

其余参数(Rest Params) 其余参数: Stylus支持name…形式的其余参数。这些参数可以消化传递给混写或函数的参数们。这在处理浏览器私有属性,如-moz或-webkit的时候很管用 下面这个例子中,所有的参数们(1px, 2px, …)都被一个args参数给简单…