Less参数混合

更新日期: 2019-10-04阅读: 1.9k标签: 参数

Mixins 具有多个参数

* 参数可以使用逗号或分号分隔。 (建议使用分号,因为逗号具有双重含义:可以将其解释为mixin参数分隔符或者是css列表分隔符);使用逗号作为mixin分隔符使不可能创建逗号分隔的列表作为参数。

  • 参数mixin使用一个或多个参数,通过参数和它的属性来扩展Less的功能,以达到在混合到另一个块时自定义mixin输出的效果。
  • 如果编译器在mixin调用中或者是声明中看到至少一个分号,那么假设这个歌参数用分号分隔的话,并且所有逗号都属于css列表,我们可以有以下几种情况:
    • 两个参数,每一个包含逗号分隔的列表:.name(1, 2, 3; something, else)
    • 三个参数,并且每个包含一个数字:.name(1, 2, 3)
    • 使用虚拟分号创建混入调用一个参数包含逗号分隔的CSS列表:.name(1, 2, 3;)
    • 逗号分隔的默认值:.name(@param1: red, blue;)


命名参数

mixin引用时可以通过名称而不是位置来提供参数值,可以通过名称来引用任何参数任何参数都可以通过它的名称来引用,而不是特定的顺序 。

    .mixin(@color: green; @font-size: 18px; @padding: 15px; @margin: 10px;) {
      color: @color;
      font-size: @font-size;
      padding: @padding;
      margin: @margin;
    }
    .name1 {
      .mixin( @color: blue; @margin: 20px;);
    }
    .name2 {
      .mixin(red; @padding: 30px; @font-size:40px;);
    }
    
    // 输出,改变后的值改变,没有重新赋值的值默认原值
    .name1 {
      color: blue;
      font-size: 18px;
      padding: 15px;
      margin: 20px;
    }
    .name2 {
      color: red;
      padding: 30px;
      font-size:40px;
      margin: 10px;
    }


@arguments 变量

@arguments 在JavaScript中代表所有的参数,在mixin内部同样有特殊含义,它包含调用mixin时传递的所有参数;如果我们不想处理单个参数,它将会非常适用。

    .box-shadow(@x: 0; @y: 0; @blur: 20px; @color: green) {
      -webkit-box-shadow: @arguments;
         -moz-box-shadow: @arguments;
              box-shadow: @arguments;
    }
    .argVar {
      .box-shadow(2px; 11px);
    }
    
    // 输出
    .argVar {
      -webkit-box-shadow: 2px 11px 20px green;
         -moz-box-shadow: 2px 11px 20px green;
              box-shadow: 2px 11px 20px green;
    }


高级参数和@rest变量

... 如果您希望mixin接受可变数量的参数,则可以使用。在变量名之后使用此命令会将这些参数分配给变量。

    // 1:匹配0-n参数
    .mixin(...) {}
    // 2:完全匹配0个参数
    .mixin() {}      
    // 3:匹配0-1个参数
    .mixin(@a: 1) {}    
    // 4:匹配0-n参数
    .mixin(@a: 1; ...) {}  
    // 5:匹配1-n个参数
    .mixin(@a; ...) {} 


模式匹配

通过将参数传递给它来改变mixin的行为。


链接: https://www.fly63.com/article/detial/5926

用js获取url地址协议,参数,端口号,锚点等方法总汇

在前端开发中,经常会遇到获取URL的相关数据,下面将总结下使用JavaScript来获取url地址的协议,参数,端口号,锚点等方法。

JavaScript深入之参数按值传递

ECMAscript中所有函数的参数都是按值传递,也就是,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。js始终是按值传递,在这里称他为共享传递。

URLSearchParams_js中快速构造和获取URL查询参数的方法

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。URLSearchParams()是个构造函数,将返回一个可以操作查询字符串的对象。

js通过arguments来获取指定参数

通过访问arguments对象的length属性可以获取有多少个参数传递给了函数。在封装函数的时候,会携带不同的参数,我们想要获取指定的参数,可以通过 arguments[ ] 来拿到,arguments对象可以与命名参数一起使用。arguments的值要永远与对应命名参数的值保持同步

如何给外部引用的js文件传递参数

给外部引用的js文件传递参数的4种方式:定义全局变量、在src后面传参、检索js文件(js文件要最后引入)、设置其他属性

jquery ajax error函数和及其参数详细说明

一般error函数返回的参数有三个: function(jqXHR jqXHR, String textStatus, String errorThrown)。常见调用代码如下:这里对这三个参数做详细说明。

vue-router动态路由设置参数可选

在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上。如下代码想要达到的效果:不传page和id,则映射到user默认list页面,传page和id,根据page不同,显示不同的页面

掌握JS函数中的几种参数形式

函数是一段结合在一起执行特定任务的代码,函数一般使用参数与外部进行交互。要编写简洁高效的JS代码,必须掌握函数参数。在本文中,会使用一些有趣的例子来解释 JS 必须有效地处理函数参数的所有特性。

你需要了解的前后端传参

前后端传参一般有两种形式:key=value 形式传参(即 parameter 形式);body 形式传参(传 json 数据给后端),如果使用的是 GET 请求,浏览器展示的 Request URL 会自动在路径后面加上 ?a=1&b=2这样的参数,这就是 key=value 形式传参

小程序获取当前路径和参数

currentPage is not defined;opyions is not defined;不细心的我少写了前两句,以为参数是可以直接引用的,注意this的使用,有时需要定义全局变量来调用

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!