Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.