阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Less 混合

      混合类似于编程语言中的函数。 Mixins是一组CSS属性,允许您将一个类的属性用于另一个类,并且包含类名作为其属性。 在LESS中,可以使用类或 id选择器 以与CSS样式相同的方式声明mixin。 它可以存储多个值,并且可以在必要时在代码中重复使用。

      下表详细说明了LESS mixin的使用。

      S.N.混合使用及描述
      1不输出mixin
      混合可以通过简单地将括号放在输出中消失。
      2Mixins中的选择器
      mixin不仅可以包含属性,还可以包含选择器。
      3命名空间
      命名空间用于在通用名称下对mixin进行分组。
      4保护的命名空间
      当保护应用于命名空间时,它定义的mixins只有在保护条件返回真时才使用。
      5!important关键字
      !important 关键字用于覆盖特定属性。

      例子

      以下示例演示如何在LESS文件中使用 mixins :

      <html>
      <head>
        <link rel="stylesheet" href="style.css" type="text/css" />
        <title>LESS Mixins</title>
      </head>
      <body>
      <h1>Welcome to Tutorialspoint</h1>
      <p class="p1">LESS is a CSS pre-processor that enables customizable, 
        manageable and reusable style sheet for web site.</p>
      <p class="p2">LESS is a dynamic style sheet 
        language that extends the capability of CSS. </p>
      <p class="p3">LESS is cross browser friendly.</p>
      </body>
      </html>
      

      接下来,创建文件 style.less

      style.less

      .p1{
        color:red;
      }
      .p2{
        background : #64d9c0;
        .p1();
      }
      .p3{
         background : #DAA520;
        .p1;
      }
      
      

      您可以使用以下命令将 style.less 编译为 style.css :

      lessc style.less style.css
      

      接下来执行上面的命令,它将用下面的代码自动创建 style.css 文件:

      style.css

      .p1 {
        color: red;
      }
      .p2 {
        background: #64d9c0;
        color: red;
      }
      .p3 {
        background: #DAA520;
        color: red;
      }
      

      输出

      让我们执行以下步骤,看看上面的代码如何工作:

      • 将以上html代码保存在 less_mixins.html 文件中。

      • 在浏览器中打开此HTML文件,将显示输出。

      调用mixins时,括号是可选的。 在上面的例子中,语句 .p1();.p1; 都做同样的事情。


      目录
      目录