概述

什么是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. ASP.NET Core开发之HttpContext

    ASP.NET Core中的HttpContext开发,在ASP.NET开发中我们总是会经常用到HttpContext. 那么在ASP.NET Core中要如何使用HttpContext呢,下面就来具 ...

  2. Gym - 101102C线段树

    Judge Bahosain was bored at ACM AmrahCPC 2016 as the winner of the contest had the first rank from t ...

  3. get和post方式请求数据，jsonp

    get方式请求数据: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #289c97 } p.p2 { ma ...

  4. 详解JS对象

                                          [自定义对象] 1.基本概念 ①对象是包含一系列无序属性和方法的集合: ②键值对:对象中的数据是以键值对的形式存在的,以键取 ...

  5. 吕鑫VC6.0-VS2015 全套C/C++、MFC新手实战入门教程、Linux视频教程 最好的基础入门教程没有之一

    本课程包括:[1]C语言(1个月)[2]C++语法与数据结构(1个月)) [3]MFC项目开发(1个月)[4]Linux项目开发(1个月)往届的授课视频都已经上传到百度网盘,请同学们按照视频教程提前掌 ...

  6. linux三剑客之sed命令

    一.前言 我们都知道,在Linux中一切皆文件,比如配置文件,日志文件,启动文件等等.如果我们相对这些文件进行一些编辑查询等操作时,我们可能会想到一些vi,vim,cat,more等命令.但是这些命令 ...

  7. [linux 整理] linux启动过程3

    本文介绍linux启动过程的第三步 busybox--------------------> rc init busybox位置即内容 busybox/init/init.c 1.各种设置信号 ...

  8. /usr/lib/x86_64-linux-gnu/libopencv_highgui.so.2.4.9: undefined reference toTIFFIsTiled@LIBTIFF_4.0'

    今天编译caffe ,本来编译过无数次caffe了,基本坑都能解决的.但这次惹恼我了.一直搞不定. 错误信息是这样的: /usr/lib/x86_64-linux-gnu/libopencv_high ...

  9. JAVA栈帧

    简介 Java栈是一块线程私有的内存空间.java堆和程序数据相关,java栈就是和线程执行密切相关的,线程的执行的基本行为是函数调用,每次函数调用的数据都是通过java栈来传递的. Java栈与数据 ...

  10. JAVA 编程规范

       软件开发技术规范 PTHINK-DEVELOP-JAVA-091010         Java语言编程规范   2009-10-10发布                2009-10-11实施 ...