vue中使用CSS预处理器

常见的stylus、sass、LESS
vue中常用的是stylus，因为来源于node.js，与JS关系密切，语法灵活、方便易用。使用stylus可以使用变量、函数、循环来编写CSS样式文件。

stylus使用方法：

npm install stylus
编辑器中按照stylus插件
初次使用stylus命令 vue init webpack stylus----cd stylus----cnpm install----cnpm install stylus --save-dev -----cnpm install stylus-loader --save-dev -----cnpm run dev
.vue文件中使用stylus
HTML页面中 < style lang=“stylus”>
引入单独的.styl文件：
< script> import './文件夹名/xxx. styl’< /script>
xxx.styl中是编写好的CSS样式
可以是变量如： $background-color = lightblue
可以是函数如：

add (a, b = a)     //当只有一个参数时，b的默认值为aa = unit(a, px)b = unit(b, px)a + b

CSS调用

spanmargin: add(2)padding: add(15, 5)

附： https://www.zhangxinxu.com/jq/stylus/ 张鑫旭的stylus中文文档
为什么用stylus https://www.cnblogs.com/panew/p/4478663.html

vue中使用CSS预处理器相关推荐

移动端适配方案(rem和vw vh适配)(css预处理器-less)
适配方案: 目前移动端适配方案有两种: 1.flex+rem单位当前市面上用的比较多相对主流(比如小米和淘宝移动端) 2.flex+viewport width/viewport height(v ...
前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
2019独角兽企业重金招聘Python工程师标准>>> CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS ...
初识css预处理器：Sass、LESS
这篇文章是初步介绍css预处理的,详细学习请移步官网~ sass中文文档:https://www.sass.hk/docs less中文文档:http://lesscss.cn/ 什么是css预处理器 ...
使用CSS预处理器Less
前天写了一篇文章,关于如何使用Harp来加快人的开发效率,在Mac系统和Linux系统上测试是没有问题的,但没有在Windows上测试,使用Windows的刚入门的前端工程师,安装Harp失败后,不知 ...
再谈 CSS 预处理器
CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器: ...
css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
Sass：一种CSS预处理器语言
http://sass-lang.com/ Sass是一种CSS预处理器语言,通过编程方式生成CSS代码.因为可编程,所以操控灵活性自由度高,方便实现一些直接编写CSS代码较困难的代码. 同时,因为S ...
009 - CSS预处理器less sass SAML SSO 单点登录 websocket socket.io
009_css预处理器less sass saml sso 单点登录 websocket## less 安装: npm install -g less 命令: lessc style.less sty ...

vue中使用CSS预处理器

vue中使用CSS预处理器相关推荐

最新文章

热门文章