正文 

当前位置： 首页 > 程序 > java教程

stylus安装使用图解

jtlgb jtlgb     2023-04-09     282

关键词：

Stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以 Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。比较年轻，其本质上做的事情与 SASS/LESS 等类似，应该是有很多借鉴，所以近似脚本的方式去写CSS代码。

小编这里分享一下如何安装及使用Stylus

工具/原料

 
  • nodeJS

方法/步骤

 
  1.  

    首先，我们确认已经安装nodeJS，如果没有或不会的话查看一下我的其他经验文档；

    首先在【开始】选择Node.js command prompt

    技术图片
  2.  

    弹出的命令框中输入【npm install stylus -g】,出现如图显示内容，显示出版本表示安装完成

    技术图片
  3.  

    小编这里在E盘，新建了【stylusexample】文件夹，在里面有新建了【src】文件夹，最后在src中新建了一个【example.styl】

    在example.styl中编写stylus代码：

    header

        #logo

            border:1px solid red

    h1

        margin:0

        padding:0

    是的你没有看错，没有分号也没与括号，stylus的语法非常灵活多变

    技术图片
  4.  

    然后在命令框中进入stylusexample文件夹，输入编译命令把.styl文件编译成.css文件

    stylus --compress src

    注意：有些小伙伴们不知道如何进入E盘的话，很简单，只要在命令行中输入（e:）回车就可以了

    技术图片
  5.  

    然后在查看一下我们的文件夹中是否已经出现了一个新编译的.css文件？

    技术图片

stylus在静态页面上的使用经验

前段时间做vue项目，用到了css的提升开发效率的工具stylus，感觉很好用。现在又开始写静态页面了，于是将强大的stylus拿过来继续用。于是就写了这篇使用经验，算是自己总结一下。stylus的安装使用前，我们需要在终端里面进行... 查看详情

stylus基本使用(代码片段)

...开始一顿搜索。发现文件后缀是.styl的这个哥们儿学名叫stylus，是CSS的预处理框架。CSS预处理，顾名思义，预先处理CSS。那stylus咋预先处理呢？stylus给CSS添加了可编程的特性，也就是说，在stylus中可以使用变量、函数、判断、循... 查看详情

vue使用jade模板写html，stylus写css

vue使用Jade模板写html，stylus写css日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式，所以使用了jade写html，stylus写css，省了很多的步骤和提高了效率。安装包//安装jade包npminstalljadejade-loader--save-dev//如果使用... 查看详情

使用stylus

  1.首先确保 node+npm 环境一切正常。 2.全局安装 stylus：　　在命令行中：      npmi[email protected]-g 3.此时可以创建 .styl文件，并进行编辑。 4.使用命令将.styl文件编译为& 查看详情

vue使用jade模板写html，stylus写css

vue使用Jade模板写html，stylus写cssvue使用Jade模板写html，stylus写css日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式，所以使用了jade写html，stylus写css，省了很多的步骤和提高了效率。安装包://安装jade包npminst... 查看详情

vue-cli中使用stylus

 1、在package.json文件中写入依赖："stylus-loader":"^2.5.0","stylus":"0.52.4", 2、在命令行运行npminstall安装插件。 或者直接运行：$npmistylus-loaderstylus--save3、运行 $npmrundev 查看详情

vue中使用stylus报错问题(代码片段)

已安装stylus-loader、css-loader、style-loaderwebpack已配置：test:/\.css$/,loader:‘style-loader!css-loader!stylus-loader‘.vue文件使用<stylelang="stylus">.containerwidth:1100pxmargin:0auto</style>  查看详情

npm安装stylus和stylus-loader

在package.json dependencies添加如下代码"stylus-loader":"^3.0.1","stylus":"0.52.4",后面对应的是版本号，可以在npm官网上搜索然后在命令行执行（也可以用淘宝镜像cnpm）npminstall同理可以安装其他依赖，比如less，sass等  查看详情

stylus入门使用大纲

简书：简书stylus入门使用大纲 查看详情

vue使用stylus

在package.json中添加 stylus-loader"css-loader":"^0.28.0","stylus-loader":"^2.1.1","eventsource-polyfill":"^0.9.6", 再重建创建依赖包cnpminstall 查看详情

css预处理器（框架）初探：sassless和stylus

...在最为普遍的三款CSS预处理器框架，分别是Sass、LessCSS、Stylus。拿less来说，可以在页面上直接使用less文件，但要引用less.js进行解析；同时也可以直接将less输出为css文件。推荐使用后者。最常用的less编译输出css工具：与node.js关... 查看详情

如何在 calc 中使用 Stylus 变量？

】如何在calc中使用Stylus变量？【英文标题】：HowtouseaStylusvariableincalc?【发布时间】：2015-11-2304:20:14【问题描述】：在Stylus中，如何在calc表达式中使用variable？例如，以下内容不起作用（arrow-size是一个变量）：arrow-size=5pxleftcalc(50... 查看详情

如何在 calc() 中使用多个变量 Stylus？

】如何在calc()中使用多个变量Stylus？【英文标题】：HowtousemultiplevariablesStylusincalc()?【发布时间】：2016-02-1520:17:15【问题描述】：一切都在标题中。我无法在函数CSScalc()中合并多个Stylus变量。我创建了一个代码Sass，我会在Stylus下... 查看详情

androidstudio安装和使用教程(全文图解)

目录JDK安装与配置一、下载JDK二、JDK安装三、JDK的环境配置四、JDK的配置验证Androidstudio安装Androidstudio连接手机真机调试（以华为鸿蒙为例）一、新建一个android项目二、进入项目面板三、配置AndroidStudio四、安装手机驱动... 查看详情

vue使用stylus样式预处理器

vue使用stylus样式预处理器,样式总是报错，需要从上一行的样式回车换行才不会报错 <stylelang="stylus"scoped>.navbar 　　margin-bottom:1rem 　　&>.nav 　　　　padding:20px </style> 查看详情

在vue中使用stylus

概述什么是StylusStylus是一个CSS预处理器。什么是CSS预处理器关于CSS预处理器，推荐先行阅读这篇文章：为您详细比较三个CSS预处理器（框架）：Sass、LESS和Stylus现在你应该对CSS预处理器有个大概的认识了，总的来说，CSS预处理器... 查看详情

在vue中使用stylus

概述什么是StylusStylus是一个CSS预处理器。什么是CSS预处理器关于CSS预处理器，推荐先行阅读这篇文章：为您详细比较三个CSS预处理器（框架）：Sass、LESS和Stylus现在你应该对CSS预处理器有个大概的认识了，总的来说，CSS预处理器... 查看详情

vue和stylus在subline中显示高亮

...两个插件  VueSyntaxHighlight  和   stylus1.按住ctrl+shift+p2.输入:installPackage3.输入:VueSyntaxHighlight   / 输入： stylus4.重新打开.vue的文件就可以了 安装完毕后：这里还有一个小点要注意，我... 查看详情