前端Vue框架在PostCSS怎樣使用sass

爲何要使用PostCss

衆所周知轉換 px 單位的插件有不少，知名的有 postcss-px-to-viewport 和 postcss-pxtorem，前者是將 px 轉成 vw，後者是將 px 轉成 rem，精簡了不經常使用的配置。將成爲vw優先單位使用，以rem做爲回退模式。考慮到vw在移動設備的支持度不如rem，這款插件很好的解決了該問題。而後簡單的介紹下。

安裝指令

$ npm install @ moohng / postcss-px2vw --save-dev
複製代碼

使用方法

首先建立一個.postcssrc.js文件，而後配置

module.exports = {
  plugins: {
    '@moohng/postcss-px2vw': {}
  }
}
複製代碼

例子： 使用前：

.box {
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 20px;
  line-height: 30px;
}
複製代碼

使用後：

.box{
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 0.625rem;
  font-size: 6.25vw;
  line-height: 0.9375rem;
  line-height: 9.375vw;
}
複製代碼

配置方面

viewportWidth：對應設計圖的寬度，用於計算 vw。默認 750，指定 0 或 false 時禁用 rootValue：根字體大小，用於計算 rem。默認 75，指定 0 或 false 時禁用 unitPrecision：計算結果的精度，默認 5 minPixelValue：小於等於該值的 px 單位不做處理，默認 1 注意：該插件只會轉換 px 單位。rootValue 通常建議設置成 viewportWidth / 10 的大小，將設計圖分紅10等分。因爲瀏覽器有最小字體限制，若是設置得太小，頁面可能跟預期不一致

若是要使用 rem 單位，須要本身經過 js 來動態計算根字體的大小。若是將設計圖分紅 10 等分計算，那麼根字體的大小應該是 window.innerWidth / 10。

這樣一個postCss的插件就配置完成了，但願個人總結能給予你的幫助

sass：經常使用備忘

經常使用的sass筆記，快速的開發

1、變量

全部變量以$開頭

$font_size: 12px;
.container{
    font-size: $font_size;
}
複製代碼

若是變量嵌套在字符串中，須要寫在#{}中

$side : left;
.rounded {
    border-#{$side}: 1px solid #000;
}
 
複製代碼

2、嵌套

層級嵌套

.container{
    display: none;
    .header{
        width: 100%;
    }
}
複製代碼

屬性嵌套，注意，border後須要加上冒號:

.container {
    border: {
        width: 1px;
    }
}
複製代碼

能夠經過&引用父元素，經常使用在各類僞類

.link{
    &:hover{ 
        color: green;
    }  
}
複製代碼

3、mixin

簡單理解，是能夠重用的代碼塊，經過@include 命令

// mixin
@mixin focus_style {
    outline: none;
}
div {
    @include focus_style; 
}
複製代碼

編譯後生成

div {
  outline: none; }
還可指定參數、缺省值

// 參數、缺省值
@mixin the_height($h: 200px) {
        height: $h;
}
.box_default {
        @include the_height;
}
.box_not_default{
        @include the_height(100px);
}
複製代碼

編譯後生成

.box_default {
  height: 200px; }

.box_not_default {
  height: 100px; }
 
複製代碼

4、繼承

經過@extend，一個選擇器能夠繼承另外一個選擇器的樣式。例子以下

// 繼承
.class1{
        float: left;
}
.class2{
        @extend .class1;
        width: 200px;
}
複製代碼

編譯後生成

.class1, .class2 {
  float: left; }

.class2 {
  width: 200px; }
 
複製代碼

5、運算

直接上例子

.container{
        position: relative;
        height: (200px/2);
        width: 100px + 200px;
        left: 50px * 2;
        top: 50px - 10px;
}
複製代碼

編譯後生成

.container {
  position: relative;
  height: 100px;
  width: 300px;
  left: 100px;
  top: 40px; }
複製代碼

插入文件

用@import 來插入外部文件

@import "outer.scss";
複製代碼

也可插入普通css文件

@import "outer.css";
複製代碼

自定義函數

經過@function 來自定義函數

@function higher($h){
        @return $h * 2;
}
.container{
        height: higher(100px);
}
複製代碼

編譯後輸出

.container {
  height: 200px; }
複製代碼

結語

創做不易，若是對你們有所幫助，但願你們點贊支持，有什麼問題也能夠在評論區裏討論😄～

若是你以爲這篇文章對你有點用的話，麻煩請給咱們的開源項目點點star: http://github.crmeb.net/u/defu   不勝感激 ！

 

來自 「開源獨尊 」 ，連接:   https://ym.baisou.ltd/post/822.html