How to define variables in CSS and use the
Editor to share with you how to define variables and use CSS, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
The native variable definition syntax in CSS is:--, variable use syntax is: var (- -), where * represents our variable name
If the css global variable is defined in the vue project:
1. First create a new index.css file in the assets directory: (
: the root element of the root document, which is a good place to put custom attributes, because we can override custom attributes according to the selectivity of other specific styles)
2, and then introduce into the main.js file:
3, use: use in style in .vue file:
Background:var (--baseBackground)
More introduction: defining variables in css can be divided into a variety of situations: 1. Define global variables: root {--borderColor: # ccc;} use: width:var (--borderColor); 2. Define variables under an element. Look {--borderColor: # ccc;} 3, define variables @ media screen and (min-width: 1025px) {: root {- borderColor: # ccc under media query }} use: .has-border-table > tr > td {border-right: 1px solid var (--borderColor);} less define variable definition: @ bg-color: # d9d9d9; use: .has-border-table > tr > td {border-right: 1px solid var (@ bg-color);} sass define variable definition: $bg-color: # d9d9d9; use: .has-border-table > tr > td {border-right: 1px solid var ($bg-color) } these are all the contents of the article "how to define variables and use them in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
