概述

什么是Stylus

  • Stylus是一个CSS预处理器。

什么是CSS预处理器

选型

  • 那么在SaaS，Less和Stylus中，为什么选择后者呢？因为Stylus是来源于Node.js社区，与js关系密切，所以基于Vue.js的开发，我们选择使用Stylus。

配置Stylus环境

安装

  • 命令行中打cnpm install stylus

image.png

在让编辑器支持Stylus

编辑器选型

对于编辑器的选择之前一直没有单独说过，这里稍微提一下，对于写Vue或者前端代码，这里推荐的有三个编辑器

  • WebStorm
  • VSCode
  • Sublime Text

对于电脑配置较高的内存较大的，推荐使用WebStorm，这个编辑器很智能也很庞大，对于电脑配置稍低的，推荐使用后面两个。
另外，在编辑代码时，当时用后两种编辑器时，很依赖各种各样的插件
当你觉得使用的时候很不爽的时候
就去网上搜相应的插件
比如我需要Vue高亮语法的插件，就去搜索安装Vue插件
那么对于Stylus，我们也只需要安装Stylus的插件就可以了。
关于安装插件，这里有几个连接

在编辑器安装支持Stylus

  • 这个就是在编辑器安装Stylus高亮插件，sublime直接在搜索安装Stylus，WebStorm不需要单独安装插件，新建Stylus文件是，只需要New->stylesheet->stylus即可

    PS.Stylus的拓展名是.styl

初次使用

初始化项目

  • vue init webpack stylus
  • cd stylus
  • cnpm install
  • cnpm install stylus --save-dev
  • cnpm install stylus-loader --save-dev

image.png
  • cnpm run dev

使用Stylus

在.vue文件中使用

image.png

引入单独的.styl文件

在写css之前，我新建了几个div

  • 新建.styl文件

image.png
  • 编写Stylus

image.png
  • 引入文件

image.png
  • 查看效果

image.png

你要做的

  • 配置好环境，保证能正常使用Stylus
  • 学习Stylus的基础语法
  • 在开发中使用Stylus的便捷特性

参考教程

在vue 中使用Stylus的更多相关文章

  1. vue中使用stylus

    1.创建完成一个初始项目后,通过 npm install stylus -D命令,在项目内安装stylus.(注意:命令结尾 -D 即是 --save-dev 的简写形式) 2.需要安装loader, ...

  2. vue中使用stylus编写css

    安装步骤 cnpm install stylus --save-dev cnpm install stylus-loader --save-dev 写法如下: <style lang=" ...

  3. stylus入门教程，在webstorm中配置stylus

    转载:https://www.cnblogs.com/wenqiangit/p/9717715.html#undefined   stylus特点 富于表现力.具有健壮性.功能丰富.动态编码 不需要写 ...

  4. 在vue中使用css预编辑器

    vue中使用less 安装less依赖,npm install less less-loader --save vue中使用sass npm install --save-dev sass-loade ...

  5. 在vue组件的stylus样式总 取消search类型的input按钮中默认样式

    在vue组件的stylus样式中 取消search类型的input按钮中默认样式 记录一个坑 环境 Vue组件 使用了Stylus的CSS风格. 问题 input输入框使用了 type="s ...

  6. 在vue项目中使用stylus来实现移动端的1px

    1.目录结构(vue项目,但是并不局限于vue) 2.首先定义一个mixin.styl文件 border-1px($color) position: relative &:after disp ...

  7. 在vue中引入scss

    先npm安装stylus和stylus-loader  (我安装后,报错提示缺少stylus,所以第一步安装stylus,如果没有提示可省略第一步) 1.到 package.json ----- de ...

  8. Vue中使用webpack别名的方法

    在工作中,我们经常会写出这种代码: import MHeader from '../../components/m-header/m-header' @import "../../commo ...

  9. 解决Vue中"This dependency was not found"的方法

    今天在初始化项目中,出现了一个奇怪的情况:明明路径是对的,但是编译的时候,一直报"This dependency was not found"的错. 代码如下: import Vu ...

随机推荐

  1. PHPMailer 命令执行漏洞（CVE-2016-10033）分析（含通用POC）

    对比一下新老版本:https://github.com/PHPMailer/PHPMailer/compare/v5.2.17…master 其实答案呼之欲出了——和Roundcube的RCE类似,m ...

  2. Chrome DevTools 的 Queueing、Stalled解析

    https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-t ...

  3. React入门---基础知识-大纲-1

    -----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...

  4. XML编辑工具

    [标题]XML编辑工具 [开发环境]Qt 5.2.0 [概要设计]使用QT的视图/模型结构.treeview控件以树形结构显示所要操作的XML文件,并实现xml的相关操作 [详细设计] 主要包含 no ...

  5. Word Ladder 2015年6月3日

    Given two words (beginWord and endWord), and a dictionary, find the length of shortest transformatio ...

  6. XML文件生成

    import java.io.* ; import org.w3c.dom.* ; import javax.xml.parsers.* ; import javax.xml.transform.* ...

  7. WannaflyUnion每日一题

    ---恢复内容开始--- 1. http://www.spoj.com/problems/KAOS/ 题意:给定n个字符串,统计字符串(s1, s2)的对数,使得s1的字典序比s2的字典序要大,s1反 ...

  8. 《JAVA与模式》之简单工厂模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述简单工厂模式的:简单工厂模式是类的创建模式,又叫做静态工厂方法(Static Factory Method)模式.简单工厂模式是由一个工厂 ...

  9. 019 关联映射文件中集合标签中的lazy(懒加载)属性

    <set>.<list>集合上,可以取值:true/false/extra,(默认值为:true) 实例一:(集合上的lazy=true(默认))class默认lazy=tru ...

  10. 002---第一个Hibernate示例

    Hibernate压缩文件结构 下载Hibernate压缩文档,下面为文件结构: Hibernate3.jar:为Hibernate的核心jar包: build.xml:重新打包配置文件 build. ...