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...