css-stylus
程序员文章站
2022-06-28 13:10:29
1.stylus 1.1用法 注意: &:hover 在pc端是鼠标悬浮,在移动端变成点击 ......
1.stylus
对定义CSS的方式进行了改变,允许我们简化CSS的书写格式,同时允许我们定义变量、定义函数来操作CSS CSS处理器类型: sass/less/stylus stylus结构
1.1用法
<style lang="stylus"> /*引入外部css文件*/ @import 'assets/css/reset.css' /*定义变量 这个颜色的值不能加引号*/ $bgColor = #ccc; body background:$bgColor; .header weight:100%; height:50px; background:#1c6132; display:flex; justify-content:center; align-items:center; /*img是.header的子级,直接缩进写*/ img height:40px; /*.title是.header的子级,和img同级,并且写*/ .title color:#fff margin-left: 10px /*&:hover是.title的鼠标悬浮 &表示一个引用,引用自身*/ &:hover color:yellow </style>
注意:
&:hover 在pc端是鼠标悬浮,在移动端变成点击
推荐阅读