preface

I believe we do front-end have a special headache, that is, how to define CSS names for HTML tags and avoid style conflicts, and when writing styles, there are many repetitive styles, such as margin,padding,font-size,color, etc., I recently thought of a problem, How can pages be laid out more efficiently and maintainable, and can this set of code be used quickly if it is integrated into other new projects? Less provides functions that can help you quickly define some commonly used classes. Without further ado, get to work!

Less

Less is a CSS preprocessing language, which extends the CSS language, adding variables, mixins, functions and other features, making the CSS easier to maintain and expand.

Less can run on Node or in a browser.

Specific documents can be accessed on the less official website.

Thinking to comb

color

As you can see, many UI component libraries provide five behaviour-related colors: Primary (subject), SUCCESS (success), Info (notification), Warning, and Error. We can also refer to this schema to define variables:

//variable.less: defines variable files

/* Behavior related color */
@color-primary: #4897ff;
@color-success: #4cd964;
@color-info:#007aff;
@color-warning: #f0ad4e;
@color-error: #dd524d;

// Define the following two variables to facilitate traversal processing, and then know the use of;
// The less variable can not be defined as an object, so we need to define the key and value separately.
@list:primary,success,info,warning,error;// Color list key
@colors:@color-primary.@color-success.@color-info.@color-warning.@color-error;// Color list value
Copy the code

After defining the variables, we can define some common classes according to our own needs:

The following will use some of the syntax of less, specific use can visit the official website:

  • Circulation Loops

    Example:

    .generate-columns(@n.@i: 1) when (@i= <@n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

.generate-columns(4);
Copy the code

    Output result:

    .column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}
Copy the code

  • Select the extract

    Example:

    @list: apple, pear, coconut, orange;
value: extract(@list.3);
Copy the code

    Output result:

    value: coconut;
Copy the code

  • The length of the length

    Example:

    @list: "banana"."tomato"."potato"."peach";
n: length(@list);
Copy the code

    Output result:

    n4:
Copy the code

  • Color operation Darken /lighten

//color.less: color file

@import './variable.less';// The last file to define variables

// Generate the theme font color method
.create-color(@lt.@i:1.@key:extract(@lt.@i),@val:extract(@colors.@i)) when (length(@lt) > =@i) {.color-@{key}{
        color : @val;
    }
    .create-color(@lt.@i + 1);
}
.create-color(@list);

Copy the code

For testing purposes, use the Lessc tool (NPM I less-g) to compile LESS into CSS (this step is not required if the project has a less environment) :

lessc color.less > color.css
Copy the code

Output result:

.color-primary {
  color: #4897ff;
}
.color-success {
  color: #4cd964;
}
.color-info {
  color: #007aff;
}
.color-warning {
  color: #f0ad4e;
}
.color-error {
  color: #dd524d;
}
Copy the code

In this way, we can easily define some common class, when needed in HTML tags, directly add the classname can be used, also do not worry about naming problems; Of course, there are many other classes that need to be defined, such as font, padding,margin, etc., in the same way;

padding

Let me use the padding as an example: the spacing can be named in the form of size: XS,sm,base, LG, XL, etc. Of course, you can add more if you have others;

//variable.less

/ * / * spacing
@spacing-base: 20px;
@spacing-xs: @spacing-base - 15px;//5px
@spacing-sm: @spacing-base - 10px;//10px
@spacing-lg: @spacing-base + 10px;//30px
@spacing-xl: @spacing-base + 20px;//40px

@size:xs,sm,base,lg,xl;
@spacings:@spacing-xs.@spacing-sm.@spacing-base.@spacing-lg.@spacing-xl;
Copy the code

Defines the spacing function to generate the class

//spacing.less

@import './variable.less';

//padding==================
// Generate spacing methods
.create-padding(@lt.@i:1.@key:extract(@lt.@i),@val:extract(@spacings.@i)) when (length(@lt) > =@i) {.padding-@{key}{
        padding : @val;
    }
    .create-padding(@lt.@i + 1);
}
.create-padding(@size);
Copy the code

Compile the output:

.padding-xs {
  padding: 5px;
}
.padding-sm {
  padding: 10px;
}
.padding-base {
  padding: 20px;
}
.padding-lg {
  padding: 30px;
}
.padding-xl {
  padding: 40px;
}
Copy the code

In addition to the padding,margin,font-size,border-radius, etc., you can use the size form to define, the method is the same;

conclusion

Programmers must learn to be more and more ‘lazy’, and never do repetitive work, so we need to learn and explore how to be ‘lazy’ to the extreme, just as we write style, We will find that the padding,margin,text-align,display,font-size,color,background-color and so on will be repeated in every page or even every label, which is not only annoying to write, but also extremely inefficient. So we need to find our own ways to be lazy; Of course, these classes are only part of it. I will provide the less file defined by me for everyone to download in the future. I hope you can point out the existing problems and have better suggestions.

subsequent

File name definition

Common classes are defined by required function points for easy introduction and locating and searching on demand.

–border. Less // border, rounded, etc;

–color.less // font color, background color, etc.

–font. Less //

–form.less // Form styles, input,textarea, etc.

–icon.less // Font icon and style;

–main.less // Import all of the less files, i.e. global import;

–position.less // Display,text-align,position,flex, etc

–reset.less // Resolve browser compatibility issues and some system default style resets

–size.less // width,height, etc

Less // spacing, margin,padding, etc

— the transition. Less / / animation

–variable.less // All variables

Here’s an example:

1, the button

<h2>button</h2>
<div class="padding-l-base">
<h3>Behavior of color</h3>
<div class="padding-l-base">
  <button class='bgcolor-primary highlight me-button'>primary</button>
  <button class='bgcolor-success highlight me-button'>success</button>
  <button class='bgcolor-info highlight me-button'>info</button>
  <button class='bgcolor-warning highlight me-button'>warning</button>
  <button class='bgcolor-error highlight me-button'>error</button>
</div>
<h3>Behavior color gradient</h3>
<div class="padding-l-base">
  <button class='linear-g-primary highlight me-button'>primary</button>
  <button class='linear-g-success highlight me-button'>success</button>
  <button class='linear-g-info highlight me-button'>info</button>
  <button class='linear-g-warning highlight me-button'>warning</button>
  <button class='linear-g-error highlight me-button'>error</button>
</div>
<h3>Different sizes</h3>
<div class="padding-l-base">
  <button class='linear-g-primary highlight me-button small'>Small 28 px</button>
  <button class='linear-g-primary highlight me-button'>The default 34 px</button>
  <button class='linear-g-primary highlight me-button large'>40 px.</button>
</div>
<h3>Hollow out</h3>
<div class="padding-l-base">
  <button class='me-button bgcolor-inverse highlight color-primary border-primary'>primary</button>
  <button class='me-button bgcolor-inverse highlight color-success border-success'>success</button>
  <button class='me-button bgcolor-inverse highlight color-info border-info'>info</button>
  <button class='me-button bgcolor-inverse highlight color-warning border-warning'>warning</button>
  <button class='me-button bgcolor-inverse highlight color-error border-error'>error</button>
  <button class='me-button bgcolor-inverse highlight text-c-pri border-base'>inverse</button>
</div>
</div>
Copy the code

Results:

Add: Some people might say that this looks like a bunch of classes, code can be more cumbersome and inefficient; In fact, many of our reusable components are packaged separately, so when we maintain them, you’ll find that it’s much more convenient and maintainable, and the common styles that we define can also be used by other tags, like I defined a button

<template>
  <button
    class='me-button'
     :class="[ (gradient&&!disabled)?'linear-g-'+color:(inverse?'bgcolor-inverse':'bgcolor-'+color), (inverse&&! disabled)?('color-'+color+' border-'+color):'', disabled?'bg-c-dis':(loadingShow?'me-loading':'highlight'), size ]" @click='buttonClick'>
     <i v-show='loadingShow' class="meiconfont meicon-loading margin-r-xs"></i>
     <span>
       <span v-if='! $slots.default'>buttonName</span>
       <slot></slot>
     </span>
  </button>
</template>

<script>
export default {
  name:'meButton', props:{// Whether to load'loading': {type:Boolean,
      default:false}, // Delay time'duration': {type:Number, default:2}, // Whether gradient'gradient': {type:Boolean,
      default:false}, // Color theme'color':{
      default:'primary'}, // Whether the inverse is hollow :{type:Boolean,
      default:false}, // Size dimensions'size': {type:String,
      default:' '}, // Whether to disable'disabled': {type:Boolean,
      default:false}, // Whether to delay'timeout': {type:Boolean,
      default:true
    }
  },
  watch:{
    loading:{
      handler:function(n,o){
        if(! n){ clearTimeout(this.clickTimer) this.clicked =false
          clearTimeout(this.loadingTimer)
          this.loadingShow = false
        }else{
          this.loadingTimer =setTimeout(() => {
            this.loadingShow = true}, 1000); }}}},data () {
    return {
      clicked:false,
      clickTimer:null,
      loadingShow:false,
      loadingTimer:null
    };
  },
  methods: {
     buttonClick(e){
      if(this.clicked || this.disabled) return
      this.$emit('click',e)
      if(this.isTimeout){
        this.clicked = true
        this.clickTimer = setTimeout(()=>{
          this.clicked = false
        },this.duration*1000)
      }
     }
  }
}
</script>
Copy the code

Then we can use it like this:

<template>
<div class="padding-base bg-c-inv margin-b-base"> <h3> Behavior color </h3> <div class="padding-l-base">
      <me-button v-for="item in lists" :key='item' :color='item' class='margin-r-xs'>{{item}}</me-button>
      <me-button :disabled='true'>disabled</me-button> </div> <h3> Behavior color gradient </h3> <div class="padding-l-base">
      <me-button v-for="item in lists" :key='item' :color='item' :gradient='true' class='margin-r-xs'> {{item}} < / me - button > < / div > < h3 > different size < / h3 > < div class ="padding-l-base">
      <me-button v-for="item in sizes" :key='item.size' color='primary':gradient='true' :size='item.size' class='margin-r-xs'. > {{item name}} < / me - button > < / div > < h3 > hollow out < / h3 > < div class ="padding-l-base">
      <me-button v-for="item in lists" :key='item' :color='item' :inverse='true' class='margin-r-xs'>{{item}}</me-button>
      <button class='me-button bgcolor-inverse highlight text-c-pri border-base'> Inverse </button> </div> <h3> with Loading effect </h3> <div class="padding-l-base">
      <me-button :loading='btnLoading' @click='changebtnLoading'Loading </me-button> </div> </div> </template> <script>export default {
    data() {return {
            lists:[
                'primary'.'success'.'info'.'warning'.'error'
            ],
            btnLoading:false,
            sizes:[
                {size:'small',name:'small 28px'},
                {size:' ',name:'normal 34px'},
                {size:'large',name:'large 40px'},
            ],
        }
    }
}
</script>
Copy the code

github

The project has been updated to Github, click me-Project to jump to it. Interested code friends can download it and try it. I am just a rookie who has been working for more than one year, and the code is very low.