less-高级参数和@reset变量

分手后的思念是犯贱 2022-06-12 23:16 224阅读 0赞

1、.mixin(3)

编辑less：

.mixin(@a: 3) {
        property: @a; } p{ .mixin();}

生成css：

p { property: 3; }

2、.mixin(…)

编辑less：

.mixin(@listofvariables...) {
      border: @listofvariables; } p {
      .mixin(1px; solid; red);
    }

生成css：

p { border: 1px solid red; }

3、.mixin(@a; @b)

编辑less：

.mixin(@a; @b) { 
      margin: @arguments; 
      right:extract(@arguments,2); 
      top:@b;
    }
    p {
       .mixin(1px; 2px);}

生成css：

p { margin: 1px 2px; right: 2px; top: 2px; }

4、.mixin(@a; …)

编辑less：

.mixin(@a; ...) { color: @a;}
    .mixin(@a) {  background-color: contrast(@a); width:100%;}
    .mixin(@a; @b;) { background-color: contrast(@a); width:@b;}
    div {
    .mixin(red);
    }
    div.small {
    .mixin(red,50%);
    }

生成css：

div { color: red; background-color: #ffffff; width: 100%; }
    div.small { color: red; background-color: #ffffff; width: 50%; }

5、.mixin(@a; @rest…)

编辑less：

.mixin(@color,@padding...) { 
      color: @color; 
      padding: @padding 
    }
    div {
    .mixin(red; 10px; 20px; 5px; 5px);
    }

生成css：

div { color: red; padding: 10px 20px 5px 5px; }

发表评论取消回复

表情：

评论列表（有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

相关 Less预处理——变量和嵌套

系列文章目录 -------------------- 文章目录系列文章目录一、Less 变量 1、选择器变量

野性酷女/ 2023年09月27日 11:46/ 0 赞/ 135 阅读

相关 less笔记-变量

一、less变量的直观优点比较下面CSS 写法与 less写法： css： a, .link { color: 428bca; }

柔情只为你懂/ 2022年09月25日 13:24/ 0 赞/ 232 阅读

相关 LESS详解之变量(@)

　　变量基本上是每个语言脚本上都会涉及的一个小小知识点，是学好语言脚本的必经之路。LESS中也可以设置变量，然后通过变量可以改变整个网站的设计风格。良好的掌握LESS中变量的用

亦凉/ 2022年09月17日 13:12/ 0 赞/ 461 阅读

相关 kettle 参数——变量参数和常量参数

kettle 参数——变量参数和常量参数 kettle中经常需要对sql语句进行处理，处理的时候免不了需要传递参数。下面就介绍一下kettle传递参数的两种方式，一种是常

向右看齐/ 2022年06月18日 07:59/ 0 赞/ 677 阅读

相关 less-变量

1、编辑less： @nice-blue: 5B83AD; @light-blue: @nice-blue + 111; hea

本是古典何须时尚/ 2022年06月14日 10:14/ 0 赞/ 240 阅读

相关学会如何使用LESS（一）----变量和混合

最近在学习了less，作些笔记；本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS

迈不过友情╰/ 2022年06月14日 03:57/ 0 赞/ 608 阅读

相关 less-高级参数和@reset变量

1、.mixin(3) 编辑less： .mixin(@a: 3) { property: @a; } p{ .mixin();}

分手后的思念是犯贱/ 2022年06月12日 23:16/ 0 赞/ 225 阅读

相关 less（二） less的变量和注释

上篇中，我们简单了解了less的使用环境和怎么使用less; 下面我们了解一下less 的变量和注释 less 的注释 /\这是第一种注释\/

短命女/ 2022年05月25日 23:10/ 0 赞/ 440 阅读

相关 vue 使用less全局变量

我们经常用less定义一些全局变量，比如头部的高度，比如主题的颜色，比如侧边栏的宽度，这时我们定义less 全局文件是有必要的，那如何在vue中使用呢？我首先尝试着把co

向右看齐/ 2022年05月20日 03:50/ 0 赞/ 483 阅读

相关 python 变量和参数

对于变量和参数， x=3中x是变量，它不是参数，但是在函数y=3x+4中，x是变量，也是参数。下面这一段来自[微软网站][Link 1]的比较高度抽象，而且意义涵盖深远。 >

灰太狼/ 2022年02月14日 14:29/ 0 赞/ 234 阅读