脚本宝典收集整理的这篇文章主要介绍了vue中使用less、scss、stylus，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

安装与引入

说明：sass从第三代开始放弃了缩进式风格，并且完全向下兼容普通的css代码，这一代的sass也被称为scss

less

//需安装 less、 less-loader
npm i less less-loader --save-dev

//style引入
<style lang=”less”></style>

//文件引入
@import './index.less'

scss

//需安装node-sass、 sass-loader
npm i node-sass sass-loader --save-dev

//style引入
<style lang=”scss”></style>

//文件引入
@import './index.scss'

stylus

//需安装 stylus 、 stylus-loader
npm i stylus stylus-loader --save-dev

//style引入
<style lang=”stylus”></style>

//文件引入
@import './index.styl'

基本语法使用

名称	less	scss	stylus
变量	@	$	不能用@开头
	@topcolor:#fff;	$topcolor:#fff;	topcolor= #fff;
语法	见语法举例	见语法举例	见语法举例
继承	见继承举例	见继承举例
mixin	见mixin举例	见mixin举例	见mixin举例

语法举例：

/* style.less */
h1 {
  color: #0982C1;
}

/* style.scss  */
h1 {
  color: #0982C1;
}

/* style.styl */
h1 {
  color: #0982C1;
}

h1
  color: #0982C1;

h1
  color #0982C1

继承举例：

//style.less
.message {
  color: #333;
}
.success {
  .message;
  border-color: green;
}

//style.scss 
.message {
  color: #333;
}
.success {
  @extend .message; //@extend
  border-color: green;
}

mixin举例:

//style.less
.error(@borderWidth: 2px) {
  border: @borderWidth solid #F00;
}
.login-error {
  left: 12px;
  .error(5px); // border:5px solid #F00;
}

//style.scss
@mixin error($borderWidth: 2px) {
  border: $borderWidth solid #F00;
}
.login-error {
  left: 12px;
  @include error(5px); // @include  border:5px solid #F00;
}

//style.styl
error(borderWidth= 2px) {
  border: borderWidth solid #F00;
}
.login-error {
  left: 12px;
  error(5px);  // border:5px solid #F00;
}

参考文章

看了这两篇文章很收益，做了以上简单总结， 需要学习的可以直接读文章原文。
https://blog.csdn.net/pedroju...
http://www.511yj.com/css-less...

脚本宝典总结

以上是脚本宝典为你收集整理的vue中使用less、scss、stylus全部内容，希望文章能够帮你解决vue中使用less、scss、stylus所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。