less-mixin（混入）

清疚 2022-06-14 10:14 232阅读 0赞

mixin方法：一堆属性从一个规则集到另一个规则集。

1、

编辑less：

.bordered {
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    
    #menu a {
      color: #111;
      .bordered;
    }
    
    .post a {
      color: red;
      .bordered;
    }

输出css：

.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }
    #menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black; }
    .post a { color: red; border-top: dotted 1px black; border-bottom: solid 2px black; }

2、类选择器和id选择器

编辑less：

.a, #b { 
      color: red;
    }
    .mixin-class {
      .a();
    }
    .mixin-id {
      #b();
    }

生成css：

.a, #b { color: red; }
    .mixin-class { color: red; }
    .mixin-id { color: red; }

3、不输出混合

编辑less：

.my-mixin {
      color: black;
    }
    .my-other-mixin() {
      background: white;
    }
    .class {
      .my-mixin;
      .my-other-mixin;
    }

生成css：

.my-mixin { color: black; }
    .class { color: black; background: white; }

3、混合属性

编辑less：

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

生成css：

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

4、复杂选择器混合属性（减少类名冲突）

编辑less：

#outer { 
      .inner {
        color: red;
      }
    }
    
    .c {
      #outer > .inner;
    }

生成css：

#outer .inner { color: red; }
    .c { color: red; }

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue混入

混入 * 基础 * 选项合并 * 全局混入 * 自定义选项合并策略基础混入(mixin)提供了一种非常灵活的方式，来分发 Vue 组件...

小咪咪/ 2024年04月17日 05:38/ 0 赞/ 59 阅读

相关 Vue- mixin(混入)

mixin(混入) mixin：翻译过来叫混入，也有人叫混合，官方叫混入作用：两个组件共享一个配置(配置必须是一样的)，本质就是复用配置通过案例理解学习如何使用以

￡神魔★判官ぃ/ 2023年10月12日 16:32/ 0 赞/ 20 阅读

相关 VUE mixin混入

一、简介： vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。和组件的区别： 1）、组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组

朴灿烈づ我的快乐病毒、/ 2023年03月03日 08:46/ 0 赞/ 19 阅读

相关 uniapp mixin全局混入

/ 全局混入型 / module.exports = { beforeCreate() { },

你的名字/ 2022年09月07日 12:16/ 0 赞/ 259 阅读

相关 less-mixin（混入）

mixin方法：一堆属性从一个规则集到另一个规则集。 1、编辑less： .bordered { border-top: dotted 1p

清疚/ 2022年06月14日 10:14/ 0 赞/ 233 阅读

相关 Scala 混入trait特质

Scala 混入trait特质（特征） Scala程序设计第2版 - 原版.pdf 下载： [https://download.csdn.net/download/

Love The Way You Lie/ 2022年04月18日 04:29/ 0 赞/ 196 阅读

相关 vue混入的详解

简介混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入

深碍√TFBOYSˉ_/ 2021年09月19日 16:16/ 0 赞/ 337 阅读

相关 vue - minix混入

vue中混入是是实现类继承的重要方式。混入的规则实例 minix.js export default { data ()

分手后的思念是犯贱/ 2021年09月19日 00:34/ 0 赞/ 474 阅读

相关 Vue混入mixin介绍

目录 Vue混入mixin介绍一、局部组件混入二、全局组件混入三、内容冲突，听谁的 -------------------- Vue混入mixin介绍

水深无声/ 2021年07月25日 02:05/ 0 赞/ 475 阅读

相关 typescript mixins混入

每个类都只定义了一个特定的行为或功能。使用它们来创建一个新类，同时具有这两种功能。 js中实现混入: 对象混入: Object

柔情只为你懂/ 2021年07月24日 18:17/ 0 赞/ 456 阅读