stylus之混合书写(Mixins)

混合书写(Mixins)

Mixins:Mixins是预处器中的函数。平时你在写样式时某段CSS样式要经常重复性的用到多个元素中,这样你就需要重复的写多次。在CSS预处器中,你可以为这些公用的CSS样式定义一个Mixin,然后在你CSS需要使用这些样式的地方直接调用你定义好的Mixin。这是一个非常有用的特性。Mixins是一个公认的选择器,还可以在Mixins中定义变量或者是默认参数

可以不使用任何符号,就是直接定义Mixins名,然后在定义参数和默认值之间用等号(=)来连接

这里写图片描述

转译后:
这里写图片描述

混入:

混入和函数定义方法一致,但是应用却大相径庭

例如下面有定义的border-radius(n)方法,其却作为一个mixin(如,作为状态调用,而非表达式)调用

当border-radius()选择器中调用时候,属性会被扩展并复制在选择器中
这里写图片描述

编译成
这里写图片描述

使用混入书写,你可以完全忽略括号,提供梦幻般私有属性的支持
这里写图片描述
注意这里我们在混合书写中的border-radius当作了属性用来给标签添加CSS样式,而并不是作为一个递归函数在调用

更进一步,我们可以利用arguments这个局部变量,传递可以包含多值的表达式
这里写图片描述
现在,我们可以像这样子传值:border-radius 1px 2px / 3px 4px!

另外一个很赞的应用是特定的私有前缀支持——例如IE浏览器的透明度
这里写图片描述

渲染为
这里写图片描述

父级引用:

混合书写可以利用父级引用字符&, 继承父业而不是自己筑巢

例如,我们要用stripe(even, odd)创建一个条纹表格。even和odd均提供了默认颜色值,每行也指定了background-color属性。我们可以在tr嵌套中使用&来引用tr,以提供even颜色
这里写图片描述

然后,利用混合书写,如下
这里写图片描述

另外,stripe()的定义无需父引用
这里写图片描述

混合书写中的混合书写:

自然,混合书写也可以再利用其它的混合书写进行组合,建立在它们自己的属性和选择器上

例如,下面我们创建内联comma-list()(通过inline-list())以及逗号分隔的无序列表
这里写图片描述

渲染
这里写图片描述

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

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

相关文章

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/ 思路:递归,依次…

硬盘安装xp

基本上没有谁从硬盘安装win系统,除非迫不得已,例如我,没有光驱。 从硬盘安装,并非ghost,有的电脑如果ghost的话,经常会提示hal.dll丢失或在载入时重启,这可能都是主板驱动问题。下面是几点要注意的事项&…

stylus之关键字参数(Keyword Arguments)

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

sql loader 参数详解

Sqlldr sql loader可以把一些以文本格式存放的数据顺利地导入到oracle数据库中,它是一种在不同数据库之间进行数据迁移非常方便而且通用的工具。缺点就是速度比较慢,另外对blob等类型的数据就有点麻烦了。一、用法: SQLLDR keywordvalue [,keywordvalue,…

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

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

php中urlencode使用

URLEncode的方式一般有两种,一种是传统的基于GB2312的Encode(Baidu、Yisou等使用),另一种是基于UTF-8的Encode(Google、Yahoo等使用)。 本工具分别实现两种方式的Encode与Decode: 中文 -> GB…

数据旋转及DB2递归的应用

前几天做一调查,需要下边这样的一个转换。求一SQL--关于数据纵横转换的假设表A中有以下数据A1 1 01A1 1 02A1 1 03A2 1 01A2 2 01A2 2 02现希望一SQL能够查出下边这样的数据(暂时假设表A中第三列只有01-03这三种可能值)A1 1 01-02-03A2 1 01A…

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

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

对进程个数计数

在linux怎么知道一个指定的“进程名”有几个在运行了呢&#xff1f; 下面这下例子演示了这个过程&#xff0c;计数函数为&#xff1a;getProcessCount() #include <stdio.h>#include <stdlib.h>#include <string.h>// 获取进程数量int getProcessCount(char…

如何设计安全的用户登录功能

用户登录功能是Web应用系统具备的最基本的功能&#xff0c;关系到用户数据和应用系统数据的安全&#xff0c;设计一个安全的用户登录功能&#xff0c;涉及到以下几个方面的内容。 (一) 老生常谈——口令 1. 口令长度与复杂度限制 限制用户输入一些非常容易被破解的口令&#xf…

可耗竭且不可回收的资源

第四章可耗竭且不可回收的资源能量是人类最关键的资源&#xff0c;没有它&#xff0c;生命将会终结。第一节天然气&#xff1a;价格控制第二节卡特尔问题• 卡特尔卡特尔是资本主义国家中的垄断组织形式之一&#xff0c;由生产同类产品的企业联合组成。卡特尔成员企业一方面为了…

stylus之其余参数(Rest Params)

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

Taro+react开发(28)本地用require线上不必

img_hongchen: require("../../assets/images/companyTitle/system_video_cover.png"),

FineUI表格模板列Undefined问题

一般是配置文件未添加ClientID"AutoID"引起转载于:https://www.cnblogs.com/fuqiang88/p/3822567.html