preface

All the beautiful web pages we can see are carefully designed by the UI, built by the front-end siege lion. Web pages want to have cool style, you need to use CSS to deal with, there will be a lot of repeated, redundant code, at this time, like less, SASS, SCSS and other style preprocessor appeared, greatly streamlined CSS code, improve the efficiency of development. Take a look at how using less syntax in vue projects can penetrate effects and blend in

First, style penetration

The structure in the VUE project is composed of template, script and style. The lang property in style determines the syntax in the style, and setting the scoped property prevents the style of the current page from contaminating other pages.

1. What is style penetration?

The style you set overrides the original style

2. How to use it?

When we use a encapsulated common component, we are not satisfied with the original style provided by the component and want to adjust the style. We can’t change styles in common components, so style penetration is needed to help us solve this problem.

  • Writing in the vue2

The code is as follows (example) :

<style lang="less" scoped>
	/deep/ a {
            text-decoration: none;
	}
</style>
Copy the code
<style lang="less" scoped>
	::v-deep a {
            text-decoration: none;
	}
</style>
Copy the code
  • Writing in the vue3
<style lang="less" scoped>
	:deep(a) {
            text-decoration: none;
	}
</style>
Copy the code

Second, with

1. What is interfuse?

Similar to functions in JS, the code in the style is separated from the repeated code, when used can be introduced several times.

2. How to use it?

  • define

The code is as follows (example) :

<style lang="less" scoped>
    .abc() {
        color: skyblue
        }
</style>
Copy the code
  • use
<style lang="less" scoped>
    p {
        font-size: 20px;
        .abc();
      }
</style>
Copy the code

Three, less automatic import

1. Benefits of automated import

You can pull out the most common style files and put them in a less file. Then use it where you need it, without importing files manually

2. How to implement it?

  • Use the style-resoures-loader plug-in of VUe-CLI to complete automatic injection of style tags into each VUE component

Run vue add style-resources-loader in the terminal in the root directory of the project to add a VUE-CLI plug-in

Note: a query will pop up in the terminal window. Select less after writing y

  • It is automatically generated after installationvue.config.jsFiles that need to be imported automatically in the configurationLess File addressJust add it

The code is as follows (example) :

const path = require('path')

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less'.patterns: [
        // Configure which files need to be imported automatically
        path.join(__dirname, './src/xx/xx.less']}}}Copy the code

conclusion

Drop ~