概述


什么是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. poj2349,最小生成树!

    The Department of National Defence (DND) wishes to connect several northern outposts by a wireless n ...

  2. 1005 Number Sequence

    Problem Description A number sequence is defined as follows:f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1) ...

  3. hdu4171 Paper Route 树的性质+DFS

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4171 题意: 有n+1个点,这n+1个点由n条边相连,且保证连通.然后给出各个点到出口的距离,要求从 ...

  4. 超简单jQuary链式操作代码实现手风琴效果

    超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...

  5. 【JAVAWEB学习笔记】08_MySQL&JDBC回顾

    今天晨读单词: CRUD:增删改查(create/read/update/delete)create:新增项目read:查询update:修改delete:删除 desc 表名:查看表结构drop:删 ...

  6. swift学习 - collectionView

    swift CollectionView学习 效果图: 源码: ContModel.swift import UIKit class ContModel: NSObject { var title:S ...

  7. 使用 jQuery.Pin 垂直滚动时固定导航

    ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...

  8. 用scikit-learn学习LDA主题模型

    在LDA模型原理篇我们总结了LDA主题模型的原理,这里我们就从应用的角度来使用scikit-learn来学习LDA主题模型.除了scikit-learn,  还有spark MLlib和gensim库 ...

  9. The leaflet package for online mapping in R(转)

    It has been possible for some years to launch a web map from within R. A number of packages for doin ...

  10. 为什么说上ERP找死?

    长期以来,管理软件领域流行着这样一句话“不上ERP等死,上了ERP找死”.根据为十九年管理软件开发的经验来看,“不上ERP等死”这句话不敢苟同,但“上了ERP找死”这句话倒有些同感.上ERP虽然不一定 ...