Login
芋圆社区 > 编程 > CSS > 用变量控制CSS

用变量控制CSS

1158
0
2022-06-28
2022-06-28
Hey、小怪兽

  • • 用过Less和Sass都会知道,它们可以申明变量,写样式和管理样式就非常方便:
  • @width: 50px;
    @height: 100px;
    
    div {
      width: @width;
      height: @height;
    }
  • • 如果想在CSS也这样写,可以用:root,:root 这个 CSS 伪类匹配文档树的根元素,申明好,可以用var(),var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。(这样做通常会产生无效的语法或者一个没有关联到变量的值。)
  • :root {
      --main-bg-color: pink;
    }
    
    body {
      background-color: var(--main-bg-color);
    }
  • • 我的芋圆社区也是这样管理的(虽然后面写着写着就乱了),社区代码有个common.css的文件,里面就是我的公共CSS变量了
  • • 在其他地方的CSS文件可以用import引入
  • /* 公共函数样式 */
    @import './common.css';
  • • 不知道是不是我这个Pycharm自带的功能,我可以在common.css,用Ctrl+左键点击这个变量看哪些地方用到,就非常方便
  • • 在F12控制台就能看到用的是var(),然后:root里的变量都在里面
  • • 这样写的好处有很多:
  • 1. 统一管理我的芋圆社区的CSS样式,看起来非常专业,方便管理运维
  • 2. 可以做一些颜色的调配,特别是在夜间模式的时候特别好用
  • 3. 可以一次性改掉很多样式,比方说我觉得这个白色太淡了,我直接改这个变量,其他用到的地方直接全改掉了

上一篇:overscroll-behavior

下一篇:属性选择器[attribute]

Message Board
回复
回复内容不允许为空
留言字数要大于2,小于200!
提交成功,5s后刷新页面!
编程导航

overscroll-behavior

用变量控制CSS

属性选择器[attribute]

修改火狐浏览器滚动条

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功
寄,页面未加载完成或页面无锚点