VUE中使用Stylus语法：让代码书写飞起

个人认为，相对于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的预览版也发布了，看介绍说，可以做到更具体详细的代码块，使得组件内部的修改维护更容易。