Question: During our page development, we need to modify the style. Some styles are global public styles, and some are local styles. Sometimes public styles are required for local style adjustments, so how to flexibly adjust styles?
1. Use scoped attribute in Vue
1. Principles of scoped attributes
1. Add the scoped attribute to the style tag, css only acts on the elements in the current component, forming an independent scope and making the style privatized.
2. After scoped is added, a unique attribute data-v-hash (hash is a random hash value) will be automatically added to the DOM node to ensure its uniqueness. At the same time, at the end of the corresponding css selector, the data-v-hash attribute of the current component is also added to make it private.
1. Normal code
<template>
<div class="example" >hi</div>
</template>
<style scoped>
.example{<!-- -->
color: red;
}
</style>
2. Compiled code
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
<style>
.example[data-v-f3f3eg9]{<!-- -->
color: red;
}
</style>
2. scoped rendering rules
1. Add a unique data attribute to the HTML dom node to uniquely identify the dom element
2. At the end of each css selector (css statement generated after compilation), add a data attribute selector of the current component (for example: [data-v-5558831a]) to privatize the style
3. If the component contains other components inside, only the data attribute of the current component will be added to the outermost label of other components
3. Penetrating scoped attributes
After using scoped, although the component style is privatized, in our actual project, when using repeated subcomponents or other style libraries in many places, we need to fine-tune the style in some places. At this time, we cannot directly change the subcomponent Style, and the style in the parent component cannot penetrate to the child component.
A child component’s root node will be affected by both its parent’s scoped CSS and the child’s scoped CSS. This design is to allow the parent component to adjust the style of the root element of its child components from the perspective of layout.
When we want a selector in the scoped style of the parent component to act “deeper” and affect the child component, we can use the **penetration (>>>, /deep/, ::v-deep)** method, after compilation Unique attributes will be added after the corresponding selector; as follows:
1. Before compiling
1. No precompiler used >>>
<style scoped>
.a >>> .b {<!-- --> /* ... */ }
</style>
2. Use precompilers less, Sass, scss
<style lang="scss" scoped>
-----------------::v-deep------------
/*Usage 1*/
.a{<!-- -->
::v-deep.b {<!-- -->
/* ... */
}
}
/*Usage 2*/
.a ::v-deep .b {<!-- -->
/* ... */
}
---------------------/deep/---------
/*Usage 1*/
.a {<!-- -->
/deep/.b {<!-- -->
/* ... */
}
}
/*Usage 2*/
.a /deep/ .b {<!-- -->
/* ... */
}
</style>
Versions above vue-cli3 cannot use /deep/
Second, after compilation
/*After compilation*/
.a[data-v-f3f3eg9].b {<!-- --> /* ... */ }
</style>
4. Penetration demo
1. Parent component App.vue
<template>
<div class="container">
<h3 class="title">Hello >Vue</h3>
<card/>
<div>
</template>
<script>
import Card from './Card.vue';
export default {<!-- -->
components: {<!-- --> Card }
}
</script>
<style scoped>
.container {<!-- --> /* ... */ }
.title {<!-- --> /* ... */ }
.card {<!-- --> /* ... */ }
</style>
2. Subcomponent Card.vue
<template>
<div class="title">Vue Cli</div>
<div class="list">
<div class="item">vue serve</div>
<div class="item">vue build</div>
</div>
</div>
</template>
<style scoped>
.card {<!-- --> /* ... */ }
.title {<!-- --> /* ... */ }
.item {<!-- --> /* ... */ }
</style>
3. After compilation
<div data-v-4fe14a3c="" class="container">
<h3 data-v-4fe14a3c="" class="title">Hello Vue</h3>
// Subassembly
<div data-v-119ff0e6="" data-v-4fe14a3c="" class="card">
<div data-v-119ff0e6="" class="title">Vue Cli</div>
<div data-v-119ff0e6="" class="list">
<div data-v-119ff0e6="" class="item">vue serve</div>
<div data-v-119ff0e6="" class="item">vue build</div>
</div>
</div>
</div>
//style
<style>
.card[data-v-119ff0e6] {<!-- --> /* ... */ }
.title[data-v-119ff0e6] {<!-- --> /* ... */ }
.item[data-v-119ff0e6]{<!-- --> /* ... */ }
.container[data-v-4fe14a3c]{<!-- --> /* ... */ }
.container .title[data-v-4fe14a3c] {<!-- --> /* ... */ }
.card[data-v-4fe14a3c] {<!-- --> /* ... */ }
</style>
4. Directly modify the style of the (non-outermost) element in the child component in the parent component
.card.title {<!-- -->
color: #eee;
}
after compilation
<div data-v-7a169200="" class="container">
<h3 data-v-7a169200="" class="title">Hello Vue</h3>
<div data-v-119ff0e6="" data-v-7a169200="" class="card">
<div data-v-119ff0e6="" class="title">Vue Cli</div>
<div data-v-119ff0e6="" class="list">
<div data-v-119ff0e6="" class="item">vue serve</div>
<div data-v-119ff0e6="" class="item">vue build</div>
</div>
</div>
</div>
<style>
.card[data-v-119ff0e6] {<!-- --> /* ... */ }
.title[data-v-119ff0e6] {<!-- --> /* ... */ }
.item[data-v-119ff0e6]{<!-- --> /* ... */ }
.container[data-v-4fe14a3c]{<!-- --> /* ... */ }
.container .title[data-v-4fe14a3c] {<!-- --> /* ... */ }
.card[data-v-4fe14a3c] {<!-- --> /* ... */ }
.card .title[data-v-7a169200] {<!-- -->
color: #eee
}
//should be:
//.card[data-v-dba577b2].title {<!-- -->
// color: #eee
//}
</style>
The style written in the parent component will be compiled with the same data-v-hashxxxx as the parent component element, which only works on the elements within the scope of the parent component, and cannot touch the inside of the imported child component, that is to say, it cannot Override the styles of child components.
5. Use Penetration
.card >>> .title {<!-- -->
color: #eee;
}
.container .card >>> .list .item {<!-- -->
color: #FF6347;
}
6. It worked this time
<div data-v-dba577b2="" class="container">
<h3 data-v-dba577b2="" class="title">Hello Vue</h3>
<div data-v-119ff0e6="" data-v-dba577b2="" class="card">
<div data-v-119ff0e6="" class="title">Vue Cli</div>
<div data-v-119ff0e6="" class="list">
<div data-v-119ff0e6="" class="item">vue serve</div>
<div data-v-119ff0e6="" class="item">vue build</div>
</div>
</div>
</div>
<style>
.card[data-v-119ff0e6] {<!-- --> /* ... */ }
.title[data-v-119ff0e6] {<!-- --> /* ... */ }
.item[data-v-119ff0e6] {<!-- --> /* ... */ }
.container[data-v-dba577b2] {<!-- --> /* ... */ }
.container .title[data-v-dba577b2] {<!-- --> /* ... */ }
.card[data-v-dba577b2] {<!-- --> /* ... */ }
.card[data-v-dba577b2] .title {<!-- -->
color: #eee
}
.container .card[data-v-dba577b2] .list .item {<!-- -->
color: tomato
}
</style>
It can be seen that the data-v-hashxxxx attribute is not added at the end of the selector after compiling using style penetration, but the data-v-hashxxxx is added to the position of >>>, so that the elements in the subcomponent can be selected .
2. Problem solving
① Why does using >>> not work?
Because of the scss used in this project, >>> cannot be parsed normally, so it does not penetrate into the parent component.
②Why did I use /deep/ but failed to modify the style on the phone?
Two /deep/ are used, one does not compile, blocking error
/*Error code: wrote /deep twice */
.pop-content {<!-- -->
/deep/ .input-wrapper /deep/ .form-item {<!-- -->
...
}
}
// After changing the code seen in the browser, I found that the second one cannot be converted.
//.pop-content[data-v-b93cf8e0].input-wrapper /deep/ .form-item {}
/*modified code*/
.pop-content {<!-- -->
.input-wrapper /deep/ .form-item {<!-- -->
}
}?
/* Compile the converted code */
.pop-content .input-wrapper[data-v-b93cf8e0] .form-item
③ Then comes the third question, if I only write one /deep/, where should I write it, can I write it anywhere, and what is the difference between them.
1. After adding /deep/ to that class, add the corresponding unique data-v attribute value behind it.
2. Note that it should be placed on the outer layer of the subcomponent, otherwise it will not play the role of penetrating the private domain of the component
3. If it is written in front of the overall style of the parent component, the styles in the parent component can penetrate the private domain of the child component and affect the style of the self-component.
3. The difference between Sass/Scss and Less
1. Sass (Syntactically Awesome Stylesheets) is a dynamic style language. Sass syntax is an indentation syntax, which has more functions than CSS (such as variables, nesting, operations, mixing (Mixin), inheritance, color processing, functions, etc. ), which is easier to read.
2. The indentation syntax of Sass is very unintuitive for web developers who are accustomed to writing CSS front-ends, and they cannot add CSS code to Sass, so the Sass syntax has been improved, and Sass 3 has become Scss (Sassy CSS ). SCSS (Sassy CSS) is an extension of CSS syntax. This means that every valid CSS is also a valid SCSS statement, compatible with the original syntax, except that the original indentation is replaced by {}.
3. Less is also a dynamic style language. CSS is endowed with dynamic language features, such as variables, inheritance, operations, and functions. Less can run on the client (supporting IE 6 + , Webkit, Firefox), or in The server runs (with Node.js).
Reference link:
https://www.cnblogs.com/songForU/p/11176696.html
https://www.cnblogs.com/wangpenghui522/p/5467560.html