css預編譯sass和stylus簡單使用 (帶node-sass安裝失敗解決方案 )

目前css 流行的三大預編譯有stylus、less 、 sass 說白了這些東西就是爲了提高編碼效率，更好的規整和簡化 css代碼的，相信大家less 就不用多說了用得都比較多了，在這裏簡單記錄下stylus, sass

stylus使用

1、首先在package.json增加依賴

  "devDependencies": {
	    "style-loader": "^0.23.1",
	    "stylus": "^0.54.5",
	    "stylus-loader": "^3.0.2",
    }
    

2、定義外部 styl

定義額外的文件是以 .styl 爲後綴 ，他可以文件中定義方法同時使用變量, 屬性與值間可以 使用空格分隔，結尾不需要分隔符
如：

	// 背景圖片
	bg-image($url)
	  background-image url($url + "@2x.png")
	  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
	    background-image: url($url + "@3x.png")

3、 文件中使用

在文件裏寫css 需要指定lang

<style lang="stylus" rel="stylesheet/stylus">

4、好處

styl 好處就是，可以定義方法，變量，元素與元素直接按html標籤順序一級一級往下寫，看起來整潔分明，操作簡單
不像普通css div>span這樣去寫子元素樣式

<style scope lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable"
  @import "~@/common/stylus/mixin"

  .add-song
    position: fixed
    top: 0
    bottom: 0
    width: 100%
    z-index: 200
    background: $color-background
    &.slide-enter-active, &.slide-leave-active
      transition: all 0.3s
    &.slide-enter, &.slide-leave-to
      transform: translate3d(100%, 0, 0)
    .header
      position: relative
      height: 44px
      text-align: center
      .title
        line-height: 44px
        font-size: $font-size-large
        color: $color-text

</style>

&就代表元素本身

sass使用

1、安裝依賴
和styl 差不多 同樣先安裝依賴

  "devDependencies": {
    "node-sass": "^4.5.0",
    "sass": "^0.5.0",
    "sass-loader": "^5.0.1"
  }
  

但：這個裏安裝node-sass 要注意，不容易成功，如下不成功，run時會報錯

解決辦法可參考：

1、安裝一個全局的 cnpm install node-sass -s -g 安裝完成
2、D:\YLKJPro\temp>rmdir node_modules /s node_modules, 是否確認(Y/N)? y
刪除原來的錯誤的node modules

3、再重新 cnpm install
成功了！

使用方法

基本和stlus 沒太大區別

指定lang

<style lang="stylus" rel="stylesheet/stylus">

按標籤層級寫 樣式即可

	<style scoped lang="scss">
	    .return-trend{
	        .infect-con{
	            width: 100%;
	            height: 200px;
	            margin-top:10px;
	            .return-panel{width: 100%;height: 100%}
	        }
	        .infect-caption{
	            font-size: 18px;
	            color: #82d4ff;
	        }
	
	    }
	</style>
	

其他具體用法可以參考官網

sass

英文文檔 https://sass-lang.com/guide

中文文檔 https://www.sass.hk/guide/

stylus

stylus官網 http://stylus-lang.com/
stylus中文網 https://stylus-lang.net/