作为函数的mixin
作为函数的mixin
在一个 mixin 内部定义的变量或 mixin,都调用者可见,因此,它们可以作为它的返回值。如,以下Less代码:
.count(@x, @y) {
@sum:(@x + @y);
@average: ((@x + @y) / 2);
}
上述代码在 .count 内部定义了两个变量 @sum 和 @average,则 .count 将拥有两个返回值。调用 .count 时,就可以通过变量 @sum 和 @average 来使用返回值。如:
div {
.count(10px, 30px); // 调用
margin: @sum; // 得到返回值 @sum,即10px + 30px
padding: @average; // 得到返回值 @average,即(10px + 30px) / 2
}
编译后的CSS代码为:
div {
margin: 40px;
padding: 20px;
}
除了在 mixin 内部定义的变量外,还可以在一个 mixin 中定义另一个 mixin,内部的 mixin 将成为外部 mixin 的返回值。如,以下Less代码:
.outerMixin(@value) {
.nestedMixin() {
line-height: @value*2;
}
}
p {
.outerMixin(2em);
.nestedMixin();
}
编译后的CSS代码为:
p {
line-height: 4em;
}
作为函数的mixin的更多相关文章
- vue.js3 学习笔记 (一)——mixin 混入
vue 2 中采用选项式API.如:data.methods.watch.computed以及生命周期钩子函数等等. mixin 混入,提供了一种非常灵活的方式,来分发 vue 组件中的可复用功能,一 ...
- dojo/_base/lang源码分析
dojo/_base/lang模块是一个工具模块,但几乎用dojo开发的app都会用到这个模块.模块中的方法能够在某些开发场景中避免繁冗的代码,接下来我们一起看看这些工具函数的使用和原理(仅仅是原理的 ...
- sass&compass&grunt
1. compass compile path/to/project//编译scss compass watch path/to/project//自动监视文件变化 2.mixin @include ...
- 用sass画蜗牛
一.sass的好处 用css画图也算是简单的实战吧,虽然用到的东西还比较少..用过之后,发现sass主要有以下优势: 可维护性.最重要的一点,可维护性的很大一部分来自变量 嗯,最简单的例子,画图总要有 ...
- 160907、CSS 预处理器-Less
CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器: ...
- Sass结合Modernizr的使用方法
Modernizr在初始化的时候会首先找寻class=“no-js”的元素: <!DOCTYPE html> <html class="no-js"> &l ...
- javascript设计模式5
子类引用父类 function extend(subClass,superClass){ var F=function(){}; F.prototype=superClass.prototype; s ...
- Compass用法指南
Compass用法指南 Sass是一种"CSS预处理器",可以让CSS的开发变得简单和可维护.但是,只有搭配Compass,它才能显出真正的威力. 本文介绍Compass的用法 ...
- Sass与Compass——回顾
compass 是sass的一个工具库 compass在sass 的基础上封装了一系列有用的模块,用来补充和丰富sass的工能, 安装: compass是用 ruby语言开发的,所以安装它之前必须安装 ...
随机推荐
- python3中判断字串类型
s为字串 s.isalnum() #所有字符都是数字或者字母,为真返回 Ture,否则返回 False. s.isalpha() #所有字符都是字母,为真返回 Ture,否则返回 False. s.i ...
- Loadrunner Webservice接口性能测试脚本编写优化总结
本文主要介绍使用Loadrunner Webservice接口性能测试脚本编写及优化总结. 1.Webservice协议脚本编写流程 下面介绍使用Loadrunner 11调用Webservice接口 ...
- Markdown不常见功能
推荐几个Markdown不常见功能 1.表情符号 emoji表情使用:EMOJICODE:的格式,详细列表可见 https://www.webpagefx.com/tools/emoji-cheat- ...
- Keras学习环境配置-GPU加速版(Ubuntu 16.04 + CUDA8.0 + cuDNN6.0 + Tensorflow)
本文是个人对Keras深度学习框架配置的总结,不周之处请指出,谢谢! 1. 首先,我们需要安装Ubuntu操作系统(Windows下也行),这里使用Ubuntu16.04版本: 2. 安装好Ubunt ...
- nvm进行node多版本管理
写在前面 nvm(nodejs version manager)是nodejs的管理工具,如果你需要快速更新node版本,并且不覆盖之前的版本:或者想要在不同的node版本之间进行切换: 使用nvm来 ...
- VB 用代码创建的控件和接收事件
在声明公共变量的位置加上这句就可以了 Dim WithEvents NewButton As Button form_load中添加 NewButton = New Button New ...
- Machine-learning of Andrew Ng(Stanford University)
1.基础概念 机器学习是一门研究在非特定编程条件下让计算机采取行动的学科.最近二十年,机器学习为我们带来了自动驾驶汽车.实用的语音识别.高效的网络搜索,让我们对人类基因的解读能力大大提高.当今机器学习 ...
- java语言将任意一个十进制数数字转换为二进制形式,并输出转换后的结果
package com.llh.demo; import java.util.Scanner; /** * * @author llh * */ public class Test { /* * 将任 ...
- RxSwift 对 MJRefresh 使用的封装
对于一个很常用的两个库, MJRefresh 如何可以像 UIButton 使用方式呢: btn.rx.tap.subscribe(...) Rxswift 中的很多类似处理的方式都使用了跟下面极为相 ...
- 实例理解mapreduce任务的串行运行过程
一.准备: eclipse,hadoop集群 注意:为了方便测试和修改,我用的是 windows 连接hadoop集群,这样在windows 下直接就能够执行 mapreduce 任务,方便程序调试. ...