It’s not unusual to hear people ask whether to build a responsive web site using Vue, Bootstrap or Elemental-UI or Ant Design Vue or some other component library. Vuetify is great, of course, but sometimes we or our bosses don’t like Material Design. And to be honest, the Vuetify documentation and the design of some of the components make me feel stupid (and probably stupid).

So write a set of we need a responsive CSS tool class, at least let us develop a responsive website to be much more convenient and fast, and want to use what component library is good.

1. Determine breakpoints

Let’s use the Bootstrap response breakpoint as an example, or at least the raster system of Ant Design Vue uses this by default.

Define breakpoints variables:

@breakpoints: {
  xs: 0px; // Set the minimum to 0px for convenience
  sm: 576px;
  md: 768px;
  lg: 992px;
  xl: 1200px;
  xxl: 1600px;
};
Copy the code

Because we need keys and values, breakpoints are a map type.

2. Create a mixin function

.breakpoints-properties(@prefix.@properties.@value) {
  .@{prefix}@{value} {
    @{properties}: @value;
  }
  each(@breakpoints, .(@v.@k.@i) {.@{prefix}@{k}-@{value} {
      @media (min-width: @v) {
        @{properties}: @value! important; }}}); };Copy the code
  • @prefixIs the prefix of class
  • @valueIs the specific value of the attribute
  • @propertiesFor attributes

3. Define the attribute-value mapping table

@properties: {
  @display: {
    @key: display;
    @values: block, inline, inline-block, none, flex, inline-flex, table, table-cell, table-row;
    @prefix: d-;
  };
  @flex-direction: {
    @key: flex-direction;
    @values: row, row-reverse, column, column-reverse;
    @prefix: direction-;
  };
  @flex-wrap: {
    @key: flex-wrap;
    @values: nowrap, wrap, wrap-reverse;
    @prefix: wrap-;
  };
  @justify-content: {
    @key: justify-content;
    @values: flex-start, flex-end, center, space-between, space-around;
    @prefix: justify-;
  };
  @align-items: {
    @key: align-items;
    @values: flex-start, flex-end, center, baseline, stretch;
    @prefix: align-;
  };
  @order: {
    @key: order;
    @values: 0.1.2.3.4.5.6.7.8.9.10.11.12.13.14;
    @prefix: order-;
  };
  @flex-grow: {
    @key: flex-grow;
    @values: 0.1;
    @prefix: grow-;
  };
  @flex-shrink: {
    @key: flex-shrink;
    @values: 0.1;
    @prefix: shrink-;
  };
  @flex: {
    @key: flex;
    @values: auto, 1, none;
    @prefix: flex-;
  };
  @align-self: {
    @key: align-self;
    @values: flex-start, flex-end, center, baseline, stretch;
    @prefix: align-self-;
  };
  @float: {
    @key: float;
    @values: left, right, none;
    @prefix: float-;
  };
  @text-align: {
    @key: text-align;
    @values: left, center, right;
    @prefix: text-;
  };
  @font-weight: {
    @key: font-weight;
    @values: 400.500.700.900;
    @prefix: font-;
  };
  @font-style: {
    @key: font-style;
    @values: normal, italic, oblique;
    @prefix: font-;
  };
  @text-decoration: {
    @key: text-decoration;
    @values: none, overline, underline, line-through;
    @prefix: text-decoration-;
  };
  @text-transform: {
    @key: text-transform;
    @values: uppercase, lowercase, capitalize;
    @prefix: text-;
  };
};
Copy the code

4. Traversal generation

each(@properties, {
  each(@value[@values]. (@v.@k.@i) {.breakpoints-properties(@value[@prefix].@value[@key].@v);
  });
});
Copy the code

Of course, these are not enough, there are text truncation, spacing… There are also some attributes that we don’t need that we can delete.

See @convue-lib/styles for the final code

Ziping-li.github. IO /convue-lib/…