Sometimes in websites while inspecting the codes, I come across CSS properties that I don't understand. Like the "@" in CSS. What @ stands for, and where are its values defined?
For example: I was inspecting the navigation of a website(which I don't remember now) and saw the following CSS code:
.nav{
position: relative;
top: 0;
z-index: 12;
width: 100%;
max-width: 100%;
padding: 20px 40px;
color: @fill;
background: @bg;
}
In the code above, I can't understand @fill or @bg for color and background respectively. Where can be the value of @fill or @bg defined in the website code? Is it the external script or within the javascript or the main CSS file?
I came across @fill and @bg type CSS mainly in a Weebly subdomain site.
Your help is appreciated. Thank you.
The @
symbol in terms of assigning and consuming variables is used in the LESS language (which is a CSS preprocessor language, it compiles to CSS). It isn't part of CSS. ie
@fill: red;
.nav {
background: @fill;
}
You can read more here about LESS variables: https://lesscss.org/features/
Running this through the LESS compiler will compile the above to css:
.nav {
background: red;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.