Skip to content

Instantly share code, notes, and snippets.

@xgqfrms-GitHub

xgqfrms-GitHub/css-variables.md Secret

Last active June 3, 2017 15:15
Show Gist options
  • Save xgqfrms-GitHub/5d022a13292c615d2730e84d909e1aba to your computer and use it in GitHub Desktop.
Save xgqfrms-GitHub/5d022a13292c615d2730e84d909e1aba to your computer and use it in GitHub Desktop.
Download ZIP
css-variables
@xgqfrms-GitHub
Copy link
Author 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 @import</title>
    <link rel="stylesheet" href="dist/css/index.css">
</head>
<body>
    <div>
        <h1 class="h1">CSS3 @import</h1>
    </div>
    <section>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
    </section>
    <footer>
        <span id="xgqfrms_copyright">copyright &copy; xgqfrms 2017</span>
    </footer>
    <!-- js -->
    <script>
        let xcp = document.querySelector('#xgqfrms_copyright');
        xcp.style.color = "#fff";
        xcp.style.background = "#000";
        let x_css = `
            color: red; 
            font-size: 32px;
        `;
        console.log(`%c xcp.style\n`, x_css, xcp.style);
        console.log(`%c typeof(xcp.style)\n`, x_css, typeof(xcp.style));
        // es6-destructuring ES6 解构赋值
        const style = {
            color: 'green',
            fontSize: "32px"
        };
        // xcp.style = style;
        let js = JSON.stringify(style);
        let str = js.replace(/[{}]/g, '');
        // no useful !
        console.log(`%c js \n`, `${js}` , js);
        console.log(`%c str \n`, `${str}` , str);
        console.log(`%c xcp.style & ${JSON.stringify(style)} \n`, `${JSON.stringify(style)}` , xcp.style);
        console.log(`%c xcp.style & ${js} \n`, `${js}` , xcp.style);
        console.log(`%c xcp.style & js \n`, js , xcp.style);
    </script>
</body>
</html>

@xgqfrms-GitHub
Copy link
Author

color console.log() & ES6 Template literals 模板字面量

let x_css = `
    color: red; 
    font-size: 32px;
`;
console.log(`%c xcp.style\n`, x_css, xcp.style);
console.log(`%c xcp.style\n`, `${x_css}`, xcp.style);

@xgqfrms-GitHub
Copy link
Author

currentColor 关键字

https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value#currentColor_关键字

https://osvaldas.info/keeping-css-short-with-currentcolor

https://osvaldas.info/keeping-css-short-with-currentcolor

https://css-tricks.com/currentcolor/

The-First-CSS-Variable-currentColor

http://thenewcode.com/blog/908/The-First-CSS-Variable-currentColor

https://osvaldas.info/keeping-css-short-with-currentcolor

css var currentcolor

http://caniuse.com/#search=currentcolor

image

<div style="color:darkred">
 The color of this text is the same as the one of the line:
  <div style="background:currentcolor; height:1px"></div>
 Some more text.
</div>

https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value#currentColor_关键字

@xgqfrms-GitHub
Copy link
Author

https://gist.github.com/xgqfrms-GitHub/cc23c2cacbeb21bd6ccf36b1c6a5bf39

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment