资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/less使用特性-Mixins

less使用特性-Mixins

RyanQ / 3490人阅读

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

1. Mixins 1.1 Selectors in Mixins 
</>复制代码 
  1. .my-hover-mixin() {
  2.   &:hover {
  3.     border: 1px solid red;
  4.   }
  5. }
  6. button {
  7.   .my-hover-mixin();
  8. }

output:

</>复制代码 
  1. button:hover {
  2.   border: 1px solid red;
  3. }
1.2 The !important keyword 
</>复制代码 
  1. .foo (@bg: #f5f5f5, @color: #900) {
  2.   background: @bg;
  3.   color: @color;
  4. }
  5. .unimportant {
  6.   .foo();
  7. }
  8. .important {
  9.   .foo() !important;
  10. }

output:

</>复制代码 
  1. .unimportant {
  2.   background: #f5f5f5;
  3.   color: #900;
  4. }
  5. .important {
  6.   background: #f5f5f5 !important;
  7.   color: #900 !important;
  8. }
1.3 Parametric Mixins 
</>复制代码 
  1. .border-radius(@radius) {
  2.   -webkit-border-radius: @radius;
  3.      -moz-border-radius: @radius;
  4.           border-radius: @radius;
  5. }
  6. #header {
  7.   .border-radius(4px);
  8. }
  9. .button {
  10.   .border-radius(6px);
  11. }
  12. .border-radius(@radius: 5px) {
  13.   -webkit-border-radius: @radius;
  14.      -moz-border-radius: @radius;
  15.           border-radius: @radius;
  16. }
  17. #header {
  18.   .border-radius;
  19. }
1.4 命名参数 
</>复制代码 
  1. .mixin(@color: black; @margin: 10px; @padding: 20px) {
  2.   color: @color;
  3.   margin: @margin;
  4.   padding: @padding;
  5. }
  6. .class1 {
  7.   .mixin(@margin: 20px; @color: #33acfe);
  8. }
  9. .class2 {
  10.   .mixin(#efca44; @padding: 40px);
  11. }
  12. output: 
  13. .class1 {
  14.   color: #33acfe;
  15.   margin: 20px;
  16.   padding: 20px;
  17. }
  18. .class2 {
  19.   color: #efca44;
  20.   margin: 10px;
  21.   padding: 40px;
  22. }
1.5 arguments 变量 
</>复制代码 
  1. .box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  2.   -webkit-box-shadow: @arguments;
  3.      -moz-box-shadow: @arguments;
  4.           box-shadow: @arguments;
  5. }
  6. .big-block {
  7.   .box-shadow(2px; 5px);
  8. }

output:

</>复制代码 
  1. .big-block {
  2.   -webkit-box-shadow: 2px 5px 1px #000;
  3.      -moz-box-shadow: 2px 5px 1px #000;
  4.           box-shadow: 2px 5px 1px #000;
  5. }
1.6 函数 
</>复制代码 
  1. .average(@x, @y) {
  2.   @average: ((@x + @y) / 2);
  3. }
  4. div {
  5.   .average(16px, 50px); // "call" the mixin
  6.   padding: @average;    // use its "return" value
  7. }

output:

</>复制代码 
  1. div {
  2.   padding: 33px;
  3. }
循环 
</>复制代码 
  1. .generate-columns(4);
  2. .generate-columns(@n, @i: 1) when (@i =< @n) {
  3.   .column-@{i} {
  4.     width: (@i * 100% / @n);
  5.   }
  6.   .generate-columns(@n, (@i + 1));
  7. }

output:

</>复制代码 
  1. .column-1 {
  2.   width: 25%;
  3. }
  4. .column-2 {
  5.   width: 50%;
  6. }
  7. .column-3 {
  8.   width: 75%;
  9. }
  10. .column-4 {
  11.   width: 100%;
  12. }
合并 逗号 
</>复制代码 
  1. .mixin() {
  2.   box-shadow+: inset 0 0 10px #555;
  3. }
  4. .myclass {
  5.   .mixin();
  6.   box-shadow+: 0 0 20px black;
  7. }

output:

</>复制代码 
  1. .myclass {
  2.   box-shadow: inset 0 0 10px #555, 0 0 20px black;
  3. }
括号 
</>复制代码 
  1. .mixin() {
  2.   transform+_: scale(2);
  3. }
  4. .myclass {
  5.   .mixin();
  6.   transform+_: rotate(15deg);
  7. }

output:

</>复制代码 
  1. .myclass {
  2.   transform: scale(2) rotate(15deg);
  3. }
GPU云服务器 云服务器 html使用less mixins less less2

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

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

相关文章

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

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

    刘东 评论0 收藏0

  • less学习之Bootstrap（按钮篇）

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

    sherlock221 评论0 收藏0

  • 前端入门23-CSS预处理器（Less&Sass）

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

    freecode 评论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 评论0 收藏0

发表评论

登陆后可评论

0条评论

RyanQ

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<