less-mixin（混入）

清疚 2022-06-14 10:14 207阅读 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 条评论，207人围观）

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

相关阅读

相关 Vue混入

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

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

相关 uniapp mixin全局混入

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

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

相关 less-mixin（混入）

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

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

相关 Scala 混入trait特质

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

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

相关 Vue之混入(mixins)

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

青旅半醒/ 2022年04月18日 01:48/ 0 赞/ 253 阅读

相关 vue系列_混入（mixin）

一、混入的理解： 1、混入（mixin）就是一个vue对象，你可以认为，混入是把每个vue组件的公共部分的内容抽取出来了。即提高了代码的复用性。

逃离我推掉我的手/ 2021年11月19日 14:14/ 0 赞/ 346 阅读

相关 vue混入的详解

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

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

相关 vue - minix混入

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

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

相关 Vue混入mixin介绍

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

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

相关 typescript mixins混入

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

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