Search code examples
htmlcsscolorsnavigationless

What is @ in CSS attributes? Where it is defined on website code? (example- color:@fill;)

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.

Solution

  • 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. i.e.

    @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;
}