个人认为,相对于css原始样式而言,stylus的先进性主要体现在:yaml格式的书写,更符合人脑逻辑。
1. 在VUE中安装,并在webpack里使用
npm install -D stylus
在webpack里设置如下:
module: {
rules:[
{
test: /\.styl(us)?$/,
use: ['style-loader', 'css-loader','postcss-loader', 'stylus-loader']
}]
2.VUE书写示例(一段header)
<template lang="pug">
div.header
img(src='../../assets/images/web/logo.svg')
p 佰阅部落
span DEMO
ul
li: a(href='/auth/register') 注册
li: a(href='/auth/login') 登陆
</template>
<style lang="stylus" scoped>
.header
display flex
justify-content space-between
width 90%
max-width 1183px
margin auto
margin-top 5px
img
height 40px
p
font-size 20px
font-weight bold
letter-spacing 5px
span
color red
ul
display flex
justify-content space-between
li
a
font-weight bold
border 2px solid red
border-radius 4px
margin 2px 10px
padding 2px
@media(max-width 539px)
.header
img
display none
</style>
直观的感受就是,各种花括号、冒号、分号可有可无,这就看起来非常干净,写代码查找优化也更容易。如果将上一段转义成正常的html文本,会是如下效果:
<div class="header"><img src="../../assets/images/web/logo.svg"/>
<p>佰阅部落<span>DEMO</span></p>
<ul>
<li><a href="/auth/register">注册</a></li>
<li><a href="/auth/login">登陆</a></li>
</ul>
</div>
<style>
.header {
display: flex;
justify-content: space-between;
width: 90%;
max-width: 1183px;
margin: auto;
margin-top: 5px;
}
.header img {
height: 40px;
}
.header p {
font-size: 20px;
font-weight: bold;
letter-spacing: 5px;
}
.header p span {
color: #f00;
}
.header ul {
display: flex;
justify-content: space-between;
}
.header ul li a {
font-weight: bold;
border: 2px solid #f00;
border-radius: 4px;
margin: 2px 10px;
padding: 2px;
}
@media (max-width: 539px) {
.header img {
display: none;
}
}
</style>
3.Stylus 特性
- 冒号可有可无
- 分号可有可无
- 逗号可有可无
- 括号可有可无
- 变量
- 插值(Interpolation)
- 混合(Mixin)
- 数学计算
- 强制类型转换
- 动态引入
- 条件表达式
- 迭代
- 嵌套选择器
- 父级引用
- Variable function calls
- 词法作用域
- 内置函数(超过 60 个)
- 语法内函数(In-language functions)
- 压缩可选
- 图像内联可选
- Stylus 可执行程序
- 健壮的错误报告
- 单行和多行注释
- CSS 字面量
- 字符转义
- TextMate 捆绑
- 以及更多!
4. 学习地址
官方文档: https://stylus-lang.com/
stylus转css:https://www.beautifyconverter.com/stylus-compiler.php#
5.小结
在学习vue之后,编写网页代码不再是原始html编写了,因此速度更快,尤其是第一次写完后,如果遇到类似的模块,可以直接复用,而原始的html编写的代码,要想复用,简直大海捞针。组件化的构建思维,使得每个页面元素都相互独立,维护非常容易。这几天vue3.0的预览版也发布了,看介绍说,可以做到更具体详细的代码块,使得组件内部的修改维护更容易。