stylus 安装与使用

版权声明： https://blog.csdn.net/weixin_38500689/article/details/88223882

stylus 安装与使用

安装

如果没有安装node环境，需要先去nodejs官方下载页面下载安装nodejs

$ npm install stylus

vue 中使用 stylus

安装stylus npm install stylus stylus-loader --save-dev

使用：<style scoped lang="stylus" rel="stylesheet/stylus"> </style>

语法规范

1.变量声明：

$background-color = lightblue

2.引用声明的变量：

span
    background-color: $background-color

编译css：

span{
    background-color: lightblue;
}

3.函数：

add (a, b = a)
    a = unit(a, px)
    b = unit(b, px)
    a + b

/*
代码声明了函数 add, add 接受两个参数 a 和 b，其中 b 的默认值是 a。
add 中调用了 stylus 的内置函数 unit，此处，unit 函数为 a 和 b赋予了单位 px。
最后将 a 和 b 相加，并返回结果，是的，你没有看错，没有 return，但是返回了结果。
*/
函数调用：

span
    margin: add(10)
    padding: add(10, 5)	

4.选择器：

.list-item
.text-box
    span
        background-color: $background-color
        margin: add(10)
        padding: add(10, 5)
    &:hover
        background-color: powderblue

/*
先说符号，这里提到的花括号和分号在stylus中是可以省略的，不仅如此，冒号也是可以省略的，color: powderblue 你可以写成 color powderblue,没有问题。
span 是 .text-box 的子选择器，stylus 中以缩进表示这种关系
&，这是个新鲜东西。它是父级的引用
*/
这样写：

.list-item
.text-box
    &:hover
        background-color: powderblue

翻译成css

.list-item:hover,
.text-box:hover {
  background-color: #b0e0e6;
}

本文参考：https://www.jianshu.com/p/5fb15984f22d