CODEWITHSUNDEEP
javascripthtmlcss
peluargo
peluargo

Reputation: 139

CSS @media in the element class - working with CSS variables

I'm creating a script that allows me to give a media size and a value for pading/margin right in the class, instead of creating a class inside each @media in the .css file.

So far, this:

<div class="s-padding-0-30-60-0">Test</div>

sould work like this:

@media (max-width: 600px) {
    .s-padding-0-30-60-0 {
        padding: 0px 30px 60px 0px !important;
    }
}

Here is all my code:

index.html:

   <html>
   <head>

      <title>Index</title>

      <!-- Viewport -->
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <!-- Fonts -->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

      <!-- CSS -->
      <link rel="stylesheet" href="../Nucleo/css/materialize/materialize.css">
      <link rel="stylesheet" href="../Nucleo/css/default.css">

      <!-- JS -->
      <script src="../Nucleo/javascript/jquery/v3.1/jquery-3.1.1.js"></script>
      <script src="../Nucleo/javascript/glass/v0.1/glass.js"></script>
      <script src="../Nucleo/javascript/smartjs/v0.1/smartjs.js"></script>
      <script src="../Nucleo/javascript/respmjs/v0.2/respmjs.js"></script>
      <script src="../Nucleo/javascript/default.js"></script>

   </head>

   <body>

      <div class="red s-padding-30">red</div>
      <div class="green s-padding-0-30-60-0">green</div>
      <div class="blue s-padding-0-10-20-0">blue</div>

   </body>

   <script src="../Nucleo/javascript/materialize/v1.0/materialize.js"></script>

</html>

default.css:

:root {
   --padding_value: 0px;
   --margin_value: 0px;

   --s_padding_value: 0px;
   --s_margin_value: 0px;

   --m_padding_value: 0px;
   --m_margin_value: 0px;

   --l_padding_value: 0px;
   --l_margin_value: 0px;

   --xl_padding_value: 0px;
   --xl_margin_value: 0px;

   --cor: #ff0000;

}

@media (max-width: 600px) {

   .s-padding {padding: var(--s_padding_value)}
   .s-margin  {margin : var(--s_margin_value)}

}

@media (min-width: 601px) {

   .m-padding {padding: var(--m_padding_value)}
   .m-margin  {margin : var(--m_margin_value)}

}

@media (min-width: 993px) {

   .l-padding {padding: var(--l_padding_value)}
   .l-margin  {margin : var(--l_margin_value)}

}

@media (min-width: 1281px) {

   .xl-padding {padding: var(--xl_padding_value)}
   .xl-margin  {margin : var(--xl_margin_value)}

}

script.js:

$(document).ready(function() {

   var media_sizes = ["s", "m", "l", "xl"];

   $('[class*="padding-"]').each(function() {

      var class_name = "padding";
      var element_class_list = String($(this).attr('class')).split(' ');
      var css = get_value_from_class_name(media_sizes, element_class_list, class_name);
      var variable_name = css[0] ? css[0] + "_" + class_name : class_name;
      var variable_value = css[2];

      console.log(css);

      set_css_of_class(variable_name, css[2]);

   });

});

function set_css_of_class(variable_name, variable_value) {

   var root = document.documentElement;
   var root_style = getComputedStyle(root);

   variable_name = "--" + variable_name;

   root.style.setProperty(variable_name, variable_value, "important"); 

   console.log(variable_name + ": " + root_style.getPropertyValue(variable_name));

}

function get_value_from_class_name(media_sizes, element_class_list, class_name) {

   for (var i in element_class_list) {

      /**
       * if it's "padding" or "margin": create the css property
       * else if it's a valid screen size: insert the css into the correct @media 
       */
      if (element_class_list[i].includes(class_name)) {
         var media_size = "";
         var class_name = element_class_list[i];

         //console.log(class_name);

         /**
          * check if the class has any media size in it
          */
         if (media_sizes.includes(element_class_list[i].substring(0, element_class_list[i].indexOf("-")))) {
            media_size = element_class_list[i].substring(0, element_class_list[i].indexOf("-"));
            // console.log("media_size: " + media_size);
            for_a_specific_media = true;
            element_class_list[i] = element_class_list[i].slice(media_size.length + 1, element_class_list[i].length);
         }         

         var css_property = element_class_list[i].substring(
            0,
            element_class_list[i].indexOf("-"));
         var css_value = element_class_list[i].substring(
            element_class_list[i].indexOf("-") + 1, 
            element_class_list[element_class_list.lenght - 1]
            );

         css_value = css_value.replace(/-/g, "px ") + "px";

         //console.log("element_class_list[i]: " + element_class_list[i]);
         //console.log("css_value: " + css_value);

         var css_final_property = css_property + ": " + css_value;

         //console.log(css_final_property);

      }
   }

   var array_return = [media_size, class_name, css_value];
   return array_return;

}

The script works, but the div does not get the new padding value. Do I need to "reload" the .css file? Shouldn't the div have the new padding because of the class?

Upvotes: 5

Views: 160

Answers (3)

Hien Nguyen
Hien Nguyen

Reputation: 18975

You should wrap it inside document ready. I tried set interval for testing, you dont need refresh css.

document.addEventListener('DOMContentLoaded', function(){

var padding = 10;
setInterval(function(){ 
    var root = document.documentElement;
var root_style = getComputedStyle(root);

root.style.setProperty("--example_var", (++padding) + "px", "important");

console.clear();
console.log("--var_teste: " + root_style.getPropertyValue("--example_var"));

//returns "100px"

}, 1000);

}, false);
:root {
    --example_var : 50px;
}

.example_class {
    padding: var(--example_var);
    border: 1px solid red;
}
<div class="example_class">Lorem Ipsum</div>

Upvotes: 0

franksands
franksands

Reputation: 2013

I made your example work adding a <script> tag to index.html:

<html>
    <head>
        <link rel="stylesheet" href="default.css">
        <script src="default.js"></script>
    </head>
    <body>
        <div class="example_class">Lorem Ipsum</div>
    </body>
</html>

Then I created a default.js with your script. The only other change was I used background-color because I think it's easier to see the difference.

default.css:

:root {
    --example_var : red;
}

.example_class {
    background-color: var(--example_var);
}

default.js:

var root = document.documentElement;
var root_style = getComputedStyle(root);

root.style.setProperty("--example_var", "blue");

console.log("--var_teste: " + root_style.getPropertyValue("--var_teste"));

Upvotes: 1

Andy Hoffman
Andy Hoffman

Reputation: 19109

You're logging a property (--var_teste) that does not exist. Instead, log the existing variable that you are actually using (--example_var).

console.log("--var_teste: " + root_style.getPropertyValue("--example_var"));

Demo

var root = document.documentElement;
var root_style = getComputedStyle(root);

root.style.setProperty("--example_var", "100px", "important");

console.log("--var_teste: " + root_style.getPropertyValue("--example_var"));
:root {
  --example_var: 50px;
}

.example_class {
  padding: var(--example_var);
  background-color: salmon;
}
<div class="example_class">Lorem Ipsum</div>

jsFiddle

Upvotes: 1

Related Questions