Stylus-css的超级英雄-使用封装

155 阅读3分钟

结合自己多年的移动端样式经验,秉承能用css绝对不用js的原则,累计应该写了有几万行css代码了,在庞大的css样式中,深刻体会过常规css写法的痛苦;CSS需要一个超级英雄来拯救;最终让我找到了stylus;在研究以及结合自己的项目中,最终把css写出了极简化、智能化、组件化、函数化等(这些都是我自吹的)

先看我在项目中的代码使用

image.png

编译后呈现的效果

image.png

可以看到优点如下: *不用你写花括号,冒号,分号;

  • 数字不用除以100再加上rem单位
  • 背景图片只需要传入图片名,不用写width: xxrem; height:xxrem,也不用再写庞杂的url no-repeat……
  • 三行定位一行搞定
  • 宽高设置一行自动搞定
  • 代码块直接引入{fxyc}不再需要必须在dom上绑定属性的全局的class

1. 最牛逼的使用法~自动读取图片宽高并自动转换成rem

比方我们要设置背景图时往往需要这样写,看图片宽高因为要适配还要写上rem单位;如下:

image.png

.container {
  width: 13.16rem;
  height: 7.5rem;
  background: url('./img/bg.png') center/contain no-repeat;
}

现在你只需要这样一行代码即可搞定你会不会很惊讶😺???? 核心代码揭秘:=》

// fn.styl
// 这里使用的函数,会自动将px转换成rem
notConverts = 'vw' 'vh' 'auto' 'rem' '%' 'em'
unitCover(val)
  if val is a 'ident' || unit(val) in notConverts
    val
  else
    unit(val / 100, 'rem')
wh() {
  width: unitCover(arguments[0])
  height  unitCover(arguments[1])
}

base = './img/'
// 《----------背景图的宽高尺寸设置------》
bg(img) {
  url = getFullPath(base + img)
  background url(url) center / contain no-repeat
}
// 自动读取并设置宽高和背景图 =》 bgi 'bg'
bgi(img) {
  url = getFullPath(base + img)
  width = unitCover(image-size(url)[0])
  height = unitCover(image-size(url)[1])
  wh width height
  background-size: width height
  background url(url) center / contain no-repeat
}

2. css的for循环,让你写同类样式如js削白菜,chua~chua的

<template lang="pug">
    // 动态设置class
    .seed-icon.relative(
      v-for="(item, index) in seedList"
      :class="`seed-${item.num ? 'atv' : 'gray'}-${index}'`" 
      :key="index"
     )
</template>

// main.styl
.seed-icon
  wh 656 80
// 关键设置
for $num in 0..7
  &.seed-atv-{$num}
    bg('seeds/'+ $num +'_atv')
  &.seed-gray-{$num}
    bg('seeds/'+ $num +'_gray')
 
// 等同于
.seed-icon {
    width 0.656rem;
    height: 0.8rem;
    &.seed-atv-0 {
        background: url('./img/seeds/0_atv.png') center / contain no-repeat;
    }
    &.seed-gray-0 {
        background: url('./img/seeds/0_gray.png') center / contain no-repeat;
    }
    ...中间省略
    &.seed-atv-7 {
        background: url('./img/seeds/7_atv.png') center / contain no-repeat;
    }
    &.seed-gray-7 {
        background: url('./img/seeds/7_gray.png') center / contain no-repeat;
    }
        
}

3. css样式块,让css也有组件一样的感觉

// absolute水平居中
pxc = @block {
  position absolute
  left 50%
  transform transleteX(-50%)
}

使用时
.btn
    {pxc}

你可以自由的封装你的css块,不再需求全局class类了;

4. 释放我们需要三行写定位的过程

.btn
    absolute left 10 top 100

===> 最终效果
.btn {
    position: absolute;
    left: 0.1rem;
    top: 1rem;
}
-pos(type, args)
  i = 0
  position: unquote(type)
  {args[i]}: args[i + 1] is a 'unit' ? unit(args[i += 1] / 100, rem) : 0
  {args[i += 1]}: args[i + 1] is a 'unit' ? unit(args[i += 1] / 100, rem) : 0

absolute()
  -pos('absolute', arguments)
fixed()
  -pos('fixed', arguments)

5. 自由简写CSS属性;

我们有时写总是需求自己记忆一些属性,虽然有工具自带提示,但是写起来也是很累的;比方margin-left: 0.1rem => 我希望我只用写ml: 10

// 封装
ml() {
  margin-left: unitCover(arguments[0])
}
// 使用
.btn
    ml 10
===> 最终效果
.btn {
    margin-left: 0.1rem
}

获取项目文档git地址github.com/ajl512/styl…

说明文档截取;如果要源码可以评论留言

image.png 欢迎👏大家补充和更好的建议;