首页 > Web开发 > 详细

css预编译器stylus

时间:2019-09-06 16:31:30      阅读:72      评论:0      收藏:0      [点我收藏+]

一、stylus是什么?

  stylus是css预处理框架。在stylus中可以使用函数、变量、判断、循环等css没有的东西来编写样式文件,执行这一套骚操作后,这个文件可以编译成css文件。

 

二、如何安装stylus?

  • 在用vue-cli搭建的项目中,(前提是已经安装了node环境,可以使用npm命令)在终端输入:
npm i stylus stylus-loader --save-dev

  (如果安装了淘宝镜像,可使用cnpm安装)

 

三、如何使用stylus?

方式一:引入外部的stylus文件

@import ‘vendor‘

方式二:在.vue文件的style里,直接使用

<style lang="stylus">
  add(a, b=a)
    a = unit(a, px)
    b = unit(b, px)
    a + b
  $font = Helvetica
  .upload
    width 100px
    height 100px
    border 1px solid red
    border-radius add(6)
    font 18px bold $font
    &:hover
      border 3px solid blue
      cursor pointer
</style>

想要更详细了解的朋友,可以看这里 =>

给大家分享一个介绍得更详细的文章,链接

css预编译器stylus

原文:https://www.cnblogs.com/caoxueying2018/p/11474709.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!