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
I used to think that script could be placed anywh...
I have been studying the source code of Vue recen...
I used the dialog in closure and drew a dialog wit...
As a backend programmer, you deal with Linux in m...
History of ZFS The Z File System (ZFS) was develo...
1: Download MySql Official website download addre...
Table of contents Components - Timeline Custom no...
Common comments in HTML: <!--XXXXXXXX-->, wh...
Recently I used MySQL to export table data to an ...
This article shares the installation tutorial of ...
This article shares the specific code of React+ts...
This article example shares the specific code of ...
Upgrade process: Original system: CentOS7.3 [root...
I saw a good idea and recorded it. I have used jQ...
Pixel Resolution What we usually call monitor res...