• 欢迎访问佰阅部落
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

开发工具 佰阅 4年前 (2020-04-24) 2887次浏览 0个评论

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


佰阅部落 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:VUE中使用Stylus语法:让代码书写飞起
喜欢 (0)

您必须 登录 才能发表评论!