CSS Variables Generator

CSS Variables Generator

1. မိမိ blog site ကို account အရင်ဝင်ပါ
2. dashboard ထဲက Pages(or)Posts ကိုနှိပ်
3. + အိုင်ကွန်ကိုနှိပ်
4. 🖍️ အိုင်ကွန်ကိုနှိပ်၍ < > HTML view ကိုရွေးချယ်၍နှိပ်ပါ
5. အောက်က code ကို copy ယူပြီးကူးထည့်ပေးပါ
6. save ကိုနှိပ်ပြီးပါပြီ

 

<div class="at_container">
  <div class= "at_input">
        <textarea id="inputCss" placeholder="Enter your CSS code here"></textarea>
    </div>
  <div class="at_btns">
        <button onclick="generateVariables()" class="atGenbtn">Generate Variables</button>
        
    </div>
  <div class= "at_output">
    <button id="copyButton" onclick="copyToClipboard()">Copy</button>
        <pre id="outputCss"></pre>
    
    </div>
    </div>
<style>
 :root{--background-color-fff:#fff;--display-flex:flex;--place-items-center:center;--flex-direction-column:column;--border-radius-8px:8px;--box-shadow-04px8pxrgba00001:0 4px 8px rgba(0, 0, 0, 0.1);--margin-0auto:0 auto;--padding-20px:20px;--width-100:100%;--padding-10px:10px;--box-sizing-borderbox:border-box;--border-1pxsolidccc:1px solid #ccc;--border-radius-5px:5px;--font-family-Arialsansserif:'Arial', sans-serif;--resize-vertical:vertical;--height-150px:150px;--background-color-4caf50:#4caf50;--padding-10px20px:10px 20px;--border-none:none;--border-radius-4px:4px;--cursor-pointer:pointer;--background-color-3498db:#3498db;--background-color-f9f9f9:#f9f9f9;--white-space-preline:pre-line;--font-size-14px:14px;}.at_container{background-color:var(--background-color-fff);display:var(--display-flex);place-items:var(--place-items-center);flex-direction:var(--flex-direction-column);border-radius:var(--border-radius-8px);box-shadow:var(--box-shadow-04px8pxrgba00001);margin:var(--margin-0auto);padding:var(--padding-20px);text-align:var(--place-items-center);}.at_container div{width:var(--width-100);margin:var(--margin-0auto);}.at_container .at_input{padding:var(--padding-10px);box-sizing:var(--box-sizing-borderbox);border:var(--border-1pxsolidccc);border-radius:var(--border-radius-5px);margin-bottom:var(--padding-10px);font-family:var(--font-family-Arialsansserif);resize:var(--resize-vertical);}#inputCss{width:var(--width-100);margin:var(--margin-0auto);height:var(--height-150px);}.atGenbtn, #copyButton{background-color:var(--background-color-4caf50);color:var(--background-color-fff);padding:var(--padding-10px20px);border:var(--border-none);border-radius:var(--border-radius-4px);cursor:var(--cursor-pointer);}#copyButton{background-color:var(--background-color-3498db);display:var(--border-none);}.at_container pre{background-color:var(--background-color-f9f9f9);padding:var(--padding-10px);border-radius:var(--border-radius-4px);white-space:var(--white-space-preline);font-size:var(--font-size-14px);}

  
</style>

<script>
 //code 
function generateVariables(){let e=document.getElementById("inputCss").value,t=document.getElementById("outputCss"),l=document.getElementById("copyButton"),n=/([.#\w\s\[\]\-,]+)\s*{([^}]*)}\s*;?/g,o=/\s*([\w-]+)\s*:\s*([^;]+)\s*;?/g,s=new Map,a="",d="",i;for(;null!==(i=n.exec(e));){let p=i[1].split(",").map(e=>e.trim()),r=i[2],y="",c;for(;null!==(c=o.exec(r));){let u=c[1],m=c[2].trim(),C=s.get(m);C||(C=`--${u}-${m.replace(/\W/g,"")}`,s.set(m,C),a+=`${C}:${m};`),y+=`${u}:var(${C});`}let g=p.join(", ");d+=`${g}{${y}}`}let x=`:root{${a}}${d}`;t.textContent=x,l.disabled=!1,l.style.display="block"}function copyToClipboard(){let e=document.getElementById("outputCss"),t=document.createElement("textarea");t.value=e.textContent,document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t);let l=document.getElementById("copyButton");l.innerText="Copied!",setTimeout(()=>{l.innerText="Copy"},1500)}

</script>