constant.scss 852 B

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