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端是鼠标悬浮，在移动端变成点击