How to use CSS variables

Home Forums Web Design CSS How to use CSS variables

  • This topic is empty.
  • Creator
    Topic
  • #6436
    designboyo
    Keymaster
      Up
      0
      Down
      ::

      CSS variables, also known as custom properties, allow you to define reusable values and make your stylesheets more maintainable and easier to read.

      1. Defining CSS Variables

      CSS variables are defined within a selector and can be scoped to specific elements or global to the entire document. The most common place to define global variables is within the :root selector.

      Syntax:

      css
      :root {
      --variable-name: value;
      }

      Example:

      css
      :root {
      --primary-color: #3498db;
      --secondary-color: #2ecc71;
      --font-size-base: 16px;
      }

      2. Using CSS Variables

      Once defined, you can use CSS variables by referencing them with the var() function.

      Syntax:

      css
      property: var(--variable-name);

      Example:

      css
      body {
      background-color: var(--primary-color);
      color: var(--secondary-color);
      font-size: var(--font-size-base);
      }

      3. Local Scope

      CSS variables can also be defined within a specific element’s scope, making them available only within that element and its descendants.

      Example:

      css
      .container {
      --container-padding: 20px;
      }

      .container {

      padding: var(--container-padding);
      }

      .container .content {

      margin: var(--container-padding);
      }

      4. Fallback Values

      You can provide a fallback value in case the variable is not defined.

      Syntax:

      css
      property: var(--variable-name, fallback-value);

      Example:

      css
      p {
      color: var(--text-color, black);
      }

      5. Changing Variables Dynamically

      CSS variables can be updated dynamically using JavaScript, which is useful for theming or responding to user interactions.

      Example:

      html
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>CSS Variables Example</title>
      <style>
      :root
      {
      --main-bg-color: lightblue;
      }
      body {
      background-color:
      var(--main-bg-color);
      }
      </style>
      </head>
      <body>
      <button id="changeColorBtn">Change Background Color</button>

      <script>
      const button = document.getElementById('changeColorBtn');
      button.addEventListener('click', () =>
      {
      document.documentElement.style.setProperty('--main-bg-color', 'lightgreen');
      }
      );
      </script>
      </body>
      </html>

      6. Nested Variables

      You can use CSS variables within other variables.

      Example:

      css
      :root {
      --base-spacing: 10px;
      --container-padding: calc(var(--base-spacing) * 2);
      }
      .container {
      padding: var(--container-padding);
      }

      7. Theming with CSS Variables

      CSS variables make it easy to implement theming in your application. You can define theme-specific variables and switch between themes by changing the values of these variables.

      Example:

      css
      :root {
      --background-color: white;
      --text-color: black;
      }
      [data-theme="dark"] {
      --background-color: black;
      --text-color: white;
      }
      body {
      background-color: var(--background-color);
      color: var(--text-color);
      }

      HTML:

      html
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <title>Theming with CSS Variables</title>
      <style>
      :root {
      --background-color: white;
      --text-color: black;
      }
      [data-theme="dark"] {
      --background-color: black;
      --text-color: white;
      }
      body {
      background-color: var(--background-color);
      color: var(--text-color);
      }
      </style>
      </head>
      <body>
      <button id="themeToggleBtn">Toggle Theme</button>
      <script>
      const button = document.getElementById('themeToggleBtn');
      button.addEventListener('click', () =>
      {
      document.documentElement.toggleAttribute('data-theme');
      });
      </script>
      </body>
      </html>

      So:

      • Defining Variables: Use :root for global variables.
      • Using Variables: Apply variables with the var() function.
      • Local Scope: Define variables within a specific element for local use.
      • Fallback Values: Provide fallback values for variables.
      • Dynamic Updates: Change variables dynamically with JavaScript.
      • Nested Variables: Use variables within other variables.
      • Theming: Implement themes by defining and switching variable values.
    Share
    • You must be logged in to reply to this topic.
    Share