Chuyển đến nội dung chính

Variable in CSS

     We can use variables in css. CSS Variables are entities defined by authors, or users, of Web pages to contain specific values throughout a document. They are set using custom properties and are accessed using a specific functional notation var().

syntax

   :root

   {

     --variable_name_1:value_1;

     --variable_name_2:value_2;

     ....

     ....

     ....

     --variable_name_n:value_n;

   }

Example

   :root

   {

     --clr:red;

     --mrgn:50px;    

   }



   div

   {

     background:var(--clr);

     margin-top:var(--mrgn);

   }

Problems to solve
     When building large sites, authors often face a maintainability challenge. In such websites, the size of the CSS is quite large and a lot of information may be repeated in multiple places. For example, maintaining a coherent color scheme throughout a document implies reusing a few color values at numerous positions in the CSS files. Altering the scheme, whether tweaking a single color or completely rewriting it, therefore becomes a complex task requiring precision, as a single find and replace often isn't enough.

     The situation gets worse with CSS frameworks, where changing colors requires editing the framework itself. Preprocessors like LESS or Sass are quite helpful in these situations, but may increase the complexity of the creation system, by adding an extra processing step. CSS variables help by employing some of the low-hanging benefits of a preprocessor, without the compilation overhead.

     A second advantage of these variables is that the name itself contains semantic information. CSS files become easier to read and understand: main-text-color is easier to understand than the reuse of #00ff00 throughout the text, especially if this same color is also used in another context.

How CSS Variables can help
     In imperative programming languages, like Java, C++, or even JavaScript, the state can be tracked through the notion of variables. Variables are symbolic names associated with a given value that can vary with the time.

     In a declarative language like CSS, time-changing values are not common, and the concept of variables is also uncommon.

     Nevertheless, CSS introduces the notion of cascading variables in order to help solve the maintainability challenge. This allows for symbolically refering to a value throughout the CSS tree.

What are CSS VariableS
     CSS Variables currently have two forms:

     Variables, which are an association between an identifier and a value that can be used in place of any regular values, using the var() functional notation: var(--example-variable) returns the value of the --example-variable value.
     Custom properties, which are special properties of the form --* where * represents the variable name. These are used to define the value of a given variable: --example-variable: 20px; is a CSS declaration, using the custom --* property to set the value of the CSS variable --example-variable to 20px.


Example Program:- (Editor)


Editor is Loading...

Advertisement

Nhận xét

Popular Posts

Autodesk ArtCAM 2017 Crack + Patch + Full Version

Autodesk ArtCAM 2017 Crack + Patch + Full Version ArtCAM is, in fact, a design tool designed more for designers than engineers, and allows designers to showcase their creativity. The software delivers a CNC modeling CAD that can be used for a variety of industries. For example, designers of signs, woodcutters, jewelry designers and many others who can produce high-quality products before they can deliver their products in two-dimensional and three-dimensional form. It's easier with this software than ever. Features and Features of ArtCAM 2017 Crack + Patch + Full Version: Support for 64-bit systems Ability to mount jewelry pieces The ability to create complex shapes Ability to cut different pieces of pages The ability to create floating vectors Save layers and shapes that you must use Availability of ready-made models available System Requirements for ArtCAM 2017 full Crack for 2017, 2018: OS: Windows 7 SP1 / 8.x / 10 for 2012: Processor Type & Speed: Intel Core 2 Duo (or equiv...

SAS Secure Tomorrow Free Download

SAS: Secure Tomorrow is a tactical first-person shooter videogame for PC, The player is in command of two SAS units, the main goal of which is to secure the British government from terrorist threat. Meanwhile, a notorious criminal and leader of a terrorist group, escapes with his rescuers from a high security prison. The SAS team is on their toes, and in hot pursuit, to bring him and other terrorists to justice. The SAS team is chasing the fugitives in London, Greenland, and finally in an underground nuclear reactor, and rescuing hostages on the way. Some Screens From SAS Secure Tomorrow Trailer Windows Xp,7,Vista,8 Ram: 512 MB, 1 GB For Vista or Win 7 Video Memory: 128 MB CPU: Intel Pentium 4 2.0 GHz Hard Space: 6 GB Free Download Torrent