结合自己多年的移动端样式经验,秉承能用css绝对不用js的原则
,累计应该写了有几万行css代码了,在庞大的css样式中,深刻体会过常规css写法的痛苦;CSS需要一个超级英雄来拯救;最终让我找到了stylus
;在研究以及结合自己的项目中,最终把css写出了极简化、智能化、组件化、函数化
等(这些都是我自吹的)
先看我在项目中的代码使用
编译后呈现的效果
可以看到优点如下: *不用你写花括号,冒号,分号;
- 数字不用
除以100再加上rem单位
; - 背景图片只需要传入图片名,不用写
width: xxrem; height:xxrem
,也不用再写庞杂的url no-repeat……
; - 三行定位一行搞定
- 宽高设置一行自动搞定
- 代码块直接引入
{fxyc}
不再需要必须在dom上绑定属性的全局的class
了
1. 最牛逼的使用法~自动读取图片宽高并自动转换成rem
比方我们要设置背景图时往往需要这样写,看图片宽高因为要适配还要写上rem单位;如下:
.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…
说明文档截取;如果要源码可以评论留言
欢迎👏大家补充和更好的建议;