作为函数的mixin

在一个 mixin 内部定义的变量或 mixin,都调用者可见,因此,它们可以作为它的返回值。如,以下Less代码:

  1. .count(@x, @y) {
  2.     @sum:(@x + @y);
  3.     @average: ((@x + @y) / 2);
  4. }

上述代码在 .count 内部定义了两个变量 @sum 和 @average,则 .count 将拥有两个返回值。调用 .count 时,就可以通过变量 @sum 和 @average 来使用返回值。如:

  1. div {
  2.     .count(10px, 30px);   // 调用
  3.     margin: @sum;         // 得到返回值 @sum,即10px + 30px
  4.     padding: @average;    // 得到返回值 @average,即(10px + 30px) / 2
  5. }

编译后的CSS代码为:

  1. div {
  2.   margin: 40px;
  3.   padding: 20px;
  4. }

除了在 mixin 内部定义的变量外,还可以在一个 mixin 中定义另一个 mixin,内部的 mixin 将成为外部 mixin 的返回值。如,以下Less代码:

  1. .outerMixin(@value) {
  2.   .nestedMixin() {
  3.     line-height: @value*2;
  4.   }
  5. }
  6. p {
  7.   .outerMixin(2em);
  8.   .nestedMixin();
  9. }

编译后的CSS代码为:

  1. p {
  2.   line-height: 4em;
  3. }
 

作为函数的mixin的更多相关文章

  1. vue.js3 学习笔记 (一)——mixin 混入

    vue 2 中采用选项式API.如:data.methods.watch.computed以及生命周期钩子函数等等. mixin 混入,提供了一种非常灵活的方式,来分发 vue 组件中的可复用功能,一 ...

  2. dojo/_base/lang源码分析

    dojo/_base/lang模块是一个工具模块,但几乎用dojo开发的app都会用到这个模块.模块中的方法能够在某些开发场景中避免繁冗的代码,接下来我们一起看看这些工具函数的使用和原理(仅仅是原理的 ...

  3. sass&compass&grunt

    1. compass compile path/to/project//编译scss compass watch path/to/project//自动监视文件变化 2.mixin @include ...

  4. 用sass画蜗牛

    一.sass的好处 用css画图也算是简单的实战吧,虽然用到的东西还比较少..用过之后,发现sass主要有以下优势: 可维护性.最重要的一点,可维护性的很大一部分来自变量 嗯,最简单的例子,画图总要有 ...

  5. 160907、CSS 预处理器-Less

    CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器: ...

  6. Sass结合Modernizr的使用方法

    Modernizr在初始化的时候会首先找寻class=“no-js”的元素: <!DOCTYPE html> <html class="no-js"> &l ...

  7. javascript设计模式5

    子类引用父类 function extend(subClass,superClass){ var F=function(){}; F.prototype=superClass.prototype; s ...

  8. Compass用法指南

    Compass用法指南   Sass是一种"CSS预处理器",可以让CSS的开发变得简单和可维护.但是,只有搭配Compass,它才能显出真正的威力. 本文介绍Compass的用法 ...

  9. Sass与Compass——回顾

    compass 是sass的一个工具库 compass在sass 的基础上封装了一系列有用的模块,用来补充和丰富sass的工能, 安装: compass是用 ruby语言开发的,所以安装它之前必须安装 ...

随机推荐

  1. python3中判断字串类型

    s为字串 s.isalnum() #所有字符都是数字或者字母,为真返回 Ture,否则返回 False. s.isalpha() #所有字符都是字母,为真返回 Ture,否则返回 False. s.i ...

  2. Loadrunner Webservice接口性能测试脚本编写优化总结

    本文主要介绍使用Loadrunner Webservice接口性能测试脚本编写及优化总结. 1.Webservice协议脚本编写流程 下面介绍使用Loadrunner 11调用Webservice接口 ...

  3. Markdown不常见功能

    推荐几个Markdown不常见功能 1.表情符号 emoji表情使用:EMOJICODE:的格式,详细列表可见 https://www.webpagefx.com/tools/emoji-cheat- ...

  4. Keras学习环境配置-GPU加速版(Ubuntu 16.04 + CUDA8.0 + cuDNN6.0 + Tensorflow)

    本文是个人对Keras深度学习框架配置的总结,不周之处请指出,谢谢! 1. 首先,我们需要安装Ubuntu操作系统(Windows下也行),这里使用Ubuntu16.04版本: 2. 安装好Ubunt ...

  5. nvm进行node多版本管理

    写在前面 nvm(nodejs version manager)是nodejs的管理工具,如果你需要快速更新node版本,并且不覆盖之前的版本:或者想要在不同的node版本之间进行切换: 使用nvm来 ...

  6. VB 用代码创建的控件和接收事件

    在声明公共变量的位置加上这句就可以了 Dim WithEvents NewButton As Button form_load中添加 NewButton = New Button        New ...

  7. Machine-learning of Andrew Ng(Stanford University)

    1.基础概念 机器学习是一门研究在非特定编程条件下让计算机采取行动的学科.最近二十年,机器学习为我们带来了自动驾驶汽车.实用的语音识别.高效的网络搜索,让我们对人类基因的解读能力大大提高.当今机器学习 ...

  8. java语言将任意一个十进制数数字转换为二进制形式,并输出转换后的结果

    package com.llh.demo; import java.util.Scanner; /** * * @author llh * */ public class Test { /* * 将任 ...

  9. RxSwift 对 MJRefresh 使用的封装

    对于一个很常用的两个库, MJRefresh 如何可以像 UIButton 使用方式呢: btn.rx.tap.subscribe(...) Rxswift 中的很多类似处理的方式都使用了跟下面极为相 ...

  10. 实例理解mapreduce任务的串行运行过程

    一.准备: eclipse,hadoop集群 注意:为了方便测试和修改,我用的是 windows 连接hadoop集群,这样在windows 下直接就能够执行 mapreduce 任务,方便程序调试. ...