zoukankan      html  css  js  c++  java
  • LESS嵌套中的Mixins和classes

    less的嵌套规则对于有效组织你的css代码有较好的作用。其中使用mixin或者class都可以作为被嵌套的实体,但是二者还是有区别的:

    • mixin必须由.name+(){}的pattern来定义,而class则只需.name{}来定义(注意:class依然可以通过.name直接在less源文件中引入该class的所有rule)
    • mixin本身并不会在最终编译输出的css文件中以类出现,而class最终会以.name{}输出该class
    .class-1{
    property-1: a;
    }
    .class-2{
    .class-1;
    property-2: b;
    }

    上面的less代码最终将输出以下的css代码:

    .class-1 {
    property-1: a;
    }
    .class-2 {
    property-1: a;
    property-2: b;
    }

    再来看看下面的less代码:

    .class-1-mixin(){
    property-1: a;
    }
    .class-2{
    .class-1-mixin();
    property-2: b;
    }

    上面这段代码由于.class-1-mixin只是一个mixin,被调用编译后并不输出.class-1-mixin这个class!!!

    .class-2 {
    property-1: a;
    property-2: b;
    }
  • 相关阅读:
    关于input()
    HDU 3746
    HDU 4335 Contest 4
    HDU 4418 高斯消元法求概率DP
    HDU 4339 Contest 4
    HDU 4334 Contest 4
    HDU 4333 Contest 4
    HDU 4332 Contest 4
    HDU 4035
    HDU 4336
  • 原文地址:https://www.cnblogs.com/kidsitcn/p/4914064.html
Copyright © 2011-2022 走看看