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
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • 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

css :root

:root { 
    background: #ff0000;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:root

https://css-tricks.com/almanac/selectors/r/root/

https://www.w3schools.com/cssref/sel_root.asp

@xgqfrms-GitHub
Copy link
Author

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

@xgqfrms-GitHub
Copy link
Author

https://github.com/xgqfrms-GitHub/node-express4-restful-api

@xgqfrms-GitHub
Copy link
Author

xgqfrms-GitHub commented May 15, 2017 •
edited

CSS Custom Properties for Cascading Variables Module Level 1

W3C Candidate Recommendation, 03 December 2015

https://www.w3.org/TR/css-variables-1/

https://drafts.csswg.org/css-variables/

CSS Custom Properties for Cascading Variables Module Level 1 (Editor’s Draft, 15 May 2017)

http://www.zhangxinxu.com/wordpress/2016/11/css-css3-variables-var/

@xgqfrms-GitHub
Copy link
Author 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
          --深蓝: #369;
          background-color: var(--深蓝);
        }
    </style>
</head>
<body>
    <div>
        <h1>CSS变量var()语法和用法和特性</h1>
        <p>不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”, “字母[a-zA-Z]” ,“下划线_” 和 “短横线-”这些组合，但是可以是中文，日文或者韩文</p>
    </div>
</body>
</html>

@xgqfrms-GitHub
Copy link
Author

CSS counter计数器(content目录序号自动递增)

http://www.zhangxinxu.com/wordpress/2014/08/css-counters-automatic-number-content/

@xgqfrms-GitHub
Copy link
Author

CSS font-family常见中文字体对应的英文名称

http://www.zhangxinxu.com/wordpress/2017/03/css-font-family-chinese-english/

@xgqfrms-GitHub
Copy link
Author

http://www.zhangxinxu.com/wordpress/2017/03/canvas-2d-cool-affect-skills-technology/

@xgqfrms-GitHub
Copy link
Author

http://www.yolinux.com/TUTORIALS/Subversion.html

@xgqfrms-GitHub
Copy link
Author 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 变量</title>
    <style>
        body {
          --深蓝: #369;
          background-color: var(--深蓝);
        }
    </style>
</head>
<body>
    <div>
        <h1>CSS变量var()语法和用法和特性</h1>
        <p>不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”, “字母[a-zA-Z]” ,“下划线_” 和 “短横线-”这些组合，但是可以是中文，日文或者韩文</p>
    </div>
</body>
</html>

@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