| 123456789101112131415161718192021 |
- // constant.scss放的是一些sass变量
- // 用法:.header{color: $theme-color1;}
- // 编译结果:.header{color: #0984e3;}
- // :root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说,:root 表示 <html> 元素,除了优先级更高之外,与 html 选择器相同。
- :root {
- --dark-primary-color: 'red'; //CSS 自定义属性(变量)
- --light-primary-color: blue; //CSS 自定义属性(变量)
- }
- $theme-color1: #0984e3;
- $theme-color2: #c92929;
- $theme-color3: #1bb61b;
- $theme-dark-btn-color: var(
- --dark-primary-color,
- 'skyblue'
- ); //使用var()函数获取变量值。有--dark-primary-color就用--dark-primary-color,否则用skyblue
- $theme-light-btn-color: var(
- --light-primary-color,
- 'green'
- ); //使用var()函数获取变量值。有--light-primary-color就用--light-primary-color,否则用green
|