教程：https://www.youtube.com/watch?v=eJahtnmywMI&list=PLLnpHn493BHFWQGA1PcyQZWAfR96a4CkH

官网：https://stylus-lang.com/

中文官网：https://www.stylus-lang.cn/

stylus可以生成css

1.环境准备

1
2
3
4
5
# 安装
npm install stylus -g

# 实时查看效果
stylus -w style.styl

image-20241013193246612

注意，最基础的：

  • stylus中分号、冒号和括号是可选的。
  • 层级关系通过嵌套体现，直接嵌套的等于 a b选择器，用&:嵌套的类似a:b的选择器效果

2.变量

定义了一个变量，在其他地方可以使用

image-20241013193603573

要避免变量覆盖，比如定义的变量叫blue，那蓝色就会被覆盖了。

image-20241013193848567

推荐的做法：

一般用$命名变量，便于区分

image-20241013194025799

在属性中引用另一个属性用@：（一处定义多处使用，修改起来比较方便）

image-20241013194200092

这种引用在嵌套时也是生效的

3.mixins

类似于函数，只不过是对样式的处理，可以接受参数

image-20241013194847855

注意，这里使用的时候，括号也可以去掉

image-20241013194947123

注意，这里使用的时候，可以设置默认值，这样调用的时候 不传参也可以

image-20241013195107272

4.导入其他文件

用import导入

image-20241013200304046

导入的时候，文件后缀.styl可以省略

这个功能可以让你的文件单一原则做事情，不会太乱，可以组织自己的工程结构

导入也支持通配符*，导入所有

image-20241013200536545

+调用和直接调用的效果一样

5.function

可以定义函数，不同于mixins封装片段，函数可以有返回值

默认的rgba设置透明度的时候在CSS中要写十六进制，在stylus中，可以直接写颜色，会自动计算。

image-20241013201145723

除了内置的颜色，数学，字符串等等处理函数，也可以自己定义函数

image-20241013202947176

用return返回多个也是可以的

image-20241013204422050

6.抽象，复用

image-20241111121122455