less使用特性-Mixins

RyanQ 发布于2019-08-29 11:13 / 3401人阅读

摘要：命名参数变量函数循环合并逗号括号

1. Mixins 1.1 Selectors in Mixins

.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

output:

button:hover {
  border: 1px solid red;
}

1.2 The !important keyword

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo();
}
.important {
  .foo() !important;
}

output:

.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}

1.3 Parametric Mixins

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

#header {
  .border-radius;
}

1.4 命名参数

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}

output: 
.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

1.5 arguments 变量

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.big-block {
  .box-shadow(2px; 5px);
}

output:

.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}

1.6 函数

.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "call" the mixin
  padding: @average;    // use its "return" value
}

output:

div {
  padding: 33px;
}

循环

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

output:

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

合并逗号

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}

output:

.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

括号

.mixin() {
  transform+_: scale(2);
}
.myclass {
  .mixin();
  transform+_: rotate(15deg);
}

output:

.myclass {
  transform: scale(2) rotate(15deg);
}

云服务器 GPU云服务器 html使用less mixins less less2

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111504.html

大话css预编译处理（三）：基础语法篇

摘要：值得庆幸的是，这三款预处理器语言的语法和语法都差不多。在这一节中，我们依次来对比一下这三款预处理器语言各种特性的异同之处，以及使用方法。预处理器语言支持任何变量例如颜色数值文本。一、Sass、LESS和Stylus的语法每一种语言都有自己一定的语法规则，CSS预处理器语言也不例外，在真正使用CSS预处器语言之前还有一个不可缺少的知识点，就是对语法的理解。值得庆幸的是，这三款CSS预...

刘东 2019-08-30 15:55 评论0 收藏0
less学习之Bootstrap（按钮篇）

摘要：学习之按钮篇如我上一篇学习之里面，介绍了的目录结构，说明了在这个文件里面，定义了主题色，也包括了按钮的主题色。伪连接，按钮的样式显示为连接的样式。接下来的安排，自己写的文章自己也会去实现它，另外关于的学习也不会停止。 less学习之Bootstrap按钮篇）如我上一篇less学习之Bootstrap里面，介绍了Bootstrap的目录结构，说明了在variables.less这个文件...

sherlock221 2019-08-30 15:55 评论0 收藏0
前端入门23-CSS预处理器（Less&Sass）

摘要：声明声明本篇内容梳理自以下几个来源网站的文档中文网感谢大佬们的分享。这个时候，预处理器就出现了，其实应该是说和这类语言出现了。声明本篇内容梳理自以下几个来源： Github:smyhvae/web Bootstrap网站的 less 文档 Sass中文网感谢大佬们的分享。正文-CSS预处理（less&Sass） CSS预处理什么是 CSS 预处理？为什么要有 CSS 预处理？这...

freecode 2019-04-23 13:07 评论0 收藏0
less 使用特性-变量

1. 变量 @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } output: #header { color: #6c94be; } 1.1. 选择器 // Variables @my-selector: banner; // Usage .@{my-select...

xbynet 2019-08-29 11:13 评论0 收藏0