概述

什么是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. 1012 u Calculate e

    A simple mathematical formula for e iswhere n is allowed to go to infinity. This can actually yield ...

  2. description方法的介绍及重写

    Dog *d = [Dog new]; //查看对象地址 NSLog(@"\n d= %p ",d);//打印的为地址 例:0x1001002e0 //查看对象实例变量的值 NSL ...

  3. 常用js功能函数汇总（持续更新ing）

    ////////////////////获取元素属性/////////////////// function getStyle(obj,name) { if(obj.currentStyle) { r ...

  4. A*算法的理解与简单实现

    基本定义 一种寻路算法,特点是:启发式的,效率高,基本思路比较简单. 用途 寻路.在指定的地图上,考虑到地图上的移动代价,找到最优的路径. 核心概念 开表,闭表,估值函数. 开表 开表,记录了当前需要 ...

  5. mysql获取当前日期的周一和周日的日期

    ,,date_format(curdate(),)//获取当前日期 在本周的周一 的日期 ,,date_format(curdate(),)//获取当前日期 在本周的周日 的日期

  6. [刷题]算法竞赛入门经典(第2版) 4-3/UVa220 - Othello

    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 代码:(Accepted,0 ms) //UVa 220 - Othello #include<iostream ...

  7. MyEclipse修改项目名称后，部署到tomcat问题。

    1.问题描述: 修改项目名称后,部署到tomcat server,部署出来的文件夹名还是旧的名称. 2.解决方案: 光把项目重命名是不够的,还要修改一下Myeclipse里面的配置. a). 工程名- ...

  8. Java学习笔记——排序算法之简单排序

    男儿何不带吴钩,收取关山五十州.请君暂上凌烟阁,若个书生万户侯? --南园十三首 三种排序法: 1.冒泡法 2.简单选择法 3.直接插入法   上代码: 1.冒泡排序 public class Bub ...

  9. window配置临时环境变量

    使用背景: 使用A电脑开发java程序或者运行java程序,但是A电脑上没有装JDK OR JRE.又不能污染A系统. 解决技巧:在windows系统中可以使用set命令配置临时环境变量.注:临时环境 ...

  10. 如何使用RSYNC搭建备份服务器

    1. RSYNC介绍 RSYNC是一款开源的,快速的,多功能的,可实现全量及增量的本地或远程数据同步备份的优秀工具.Rsync软件适用于unix/linux/windows等多种操作系统平台. 远程数 ...