VUE项目学习——stylus语言

最新推荐文章于 2023-07-06 23:05:00 发布

森林独角兽

最新推荐文章于 2023-07-06 23:05:00 发布

阅读量308

点赞数

分类专栏： vue项目学习前端知识点总结文章标签： stylus css html

本文链接：https://blog.csdn.net/weixin_43749381/article/details/120734714

版权

vue项目学习同时被 2 个专栏收录

2 篇文章

订阅专栏

前端知识点总结

2 篇文章

订阅专栏

本文介绍了如何在项目中使用Stylus，包括安装依赖、引入语法、省略花括号、层次结构、变量定义、混合与函数，以及父级引用。通过实例展示Stylus如何提升CSS编写体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

流行的css预编译语言：less、sass、stylus
（可以理解成css的加强版，更方便，更简洁。无论是使用那种语言最后都会转换成css）

stylus的使用

1、先下载需要用的依赖包

npm install stylus stylus-loader

2、在需要使用的html中引入stylus

<style lang="stylus">
#appcontain
  .noshipei
    height 100px
    background red
</style>

3、stylus使用方法

a.省略花括号{} 冒号： 分号；
b.具有明显的层级关系，和dom结构一致
c.可以定义变量 $clolor = red
d.定义混合(minixs)，等同于之前的函数能够，能够复用代码
e.定义函数，可以用来做内部计算
f.父级引用 &==当前位置的父级元素

<style lang="stylus">
$color = blue
#appcontain
  .noshipei
    height 100px
    background red
  .shipei
    width 10rem
    height 100px
    background $color
</style>