PrefaceThe beautiful web pages we can see are all carefully designed by UI and built by front-end engineers. If you want a web page to have a cool style, you need to use CSS to process it, which will inevitably result in a lot of repeated and redundant code. At this time, style preprocessors such as less, sass, and scss appear, which greatly simplifies the CSS code and improves development efficiency. Today, let’s follow this article to see how to use less syntax in Vue projects to penetrate effects and mixins~ 1. Style penetrationThe structure of the vue project consists of three parts: template, script, and style. The lang attribute in style determines the syntax of the style. Setting the scoped attribute can prevent the style of the current page from polluting other pages. 1. What is pattern penetration?The style you set overrides the original style 2. How to use?When we use a packaged public component, we are not satisfied with the original style provided by the component and want to adjust the style. We cannot modify the styles in public components, so we need to use style penetration to help us solve this problem. Writing in vue2 The code is as follows (example): <style lang="less" scoped> /deep/ a { text-decoration: none; } </style> <style lang="less" scoped> ::v-deep a { text-decoration: none; } </style> Writing in Vue3 <style lang="less" scoped> :deep(a) { text-decoration: none; } </style> 2. Mixing 1. What is a mixin?Similar to the function in js, it extracts the repeated code in the style and can be introduced multiple times when used. 2. How to use?definition The code is as follows (example): <style lang="less" scoped> .abc() { color: skyblue } </style> use <style lang="less" scoped> p { font-size: 20px; .abc(); } </style> 3. Less automatic import 1. Benefits of automated importYou can extract frequently appearing style files and put them into a less file. Then you can use it directly where you need it, without manually importing the file 2. How to achieve it?
Run vue add style-resources-loader in the terminal in the project root directory to add a vue-cli plug-in Note: A query will pop up in the terminal window. Type y and select less.
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 automatically imported path.join(__dirname, './src/xx/xx.less') ] } } } SummarizeThis is the end of this article about some tips for using less in vue projects. For more information about using less in vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: VMware virtual machine to establish HTTP service steps analysis
>>: How to gracefully and safely shut down the MySQL process
Regarding the high-performance distributed memory...
1. Create a runner container mk@mk-pc:~/Desktop$ ...
Introduction The mysql-utilities toolset is a col...
Start the centos8 virtual machine and press the u...
Table of contents 1. switch 2. While Loop 3. Do/W...
Nginx Rewrite usage scenarios 1. URL address jump...
Table of contents 1. What is Set 2. Set Construct...
Copy code The code is as follows: <html> &l...
If the table is wide, it may overflow. For exampl...
This article shares the specific code of JS to ac...
1. Nginx status monitoring Nginx provides a built...
On Linux, bash is adopted as the standard, which ...
Table of contents Function Introduction function ...
Everyone has played the pinball and brick-breakin...
In daily operation and maintenance work, backup o...