Mixins通过使用它们的名称提供参数值而不是位置。 参数没有放置值的任何顺序,它们可以通过名称引用。 命名参数的结果更容易阅读,并提供清晰的代码。
下面的例子演示了在LESS文件中使用命名参数:
<!doctype html> <head> <title>Named Parameters</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <h2>Example of Named Parameters</h2> <p class="class1">Hello World...</p> <p class="class2">Welcome to Tutorialspoint...</p> </body> </html>
接下来,创建文件 style.less 。
.mixin(@color: black; @fontSize: 10px) { color: @color; font-size: @fontSize; } .class1 { .mixin(@fontSize: 20px; @color: #F5A9D0); } .class2 { .mixin(#F79F81; @fontSize: 20px); }
您可以使用以下命令将 style.less 编译为 style.css :
lessc style.less style.css
接下来执行上面的命令,它将用下面的代码自动创建 style.css 文件:
.class1 { color: #F5A9D0; font-size: 20px; } .class2 { color: #F79F81; font-size: 20px; }
让我们执行以下步骤,看看上面的代码如何工作:
将以上html代码保存在 named_param.html 文件中。
在浏览器中打开此HTML文件,将显示如下输出。
描述通过仅给出引用,规则集不访问任何新的范围。例子下面的例子演示使用给引用将不会修改LESS文件中的分离规则集范围:passing_...
描述Screen功能使用两种颜色作为参数,并输出较亮的颜色。参数: color1:颜色对象。 color2:颜色对象。返回:颜色。例子下面的...
描述它动态构建选择器,并使用属性或变量值作为任意字符串。例子下面的例子演示了在Less文件中使用转义:htmlhead titleLess Esca...
CSS3多列布局允许我们轻松创建多列。以下三个属性用于在CSS3中配置列布局。column-countcolumn-gapcolumn-rule设置列计数!DOCTYP...
使用 form 标签可以向服务器传输数据,该标签的使用示例如下:实例带有两个输入字段和一个提交按钮的 HTML 表单:form action="d...
ruby 标签是当作注释标签使用的,可以对文本进行注音或者字符,请参考下述示例: 实例一个 ruby 注释:ruby汉 rp(/rprtHan/rtrp)...
span 元素是无语义的行内元素,它可以对元素进行分组,使它们以不同的样式显示,请参考下述示例:实例使用 span 元素对文本中的...