postcss foft classes

Postcss-foft-Classes

PostCSS插件將自動添加類別的各種字體加載策略的類。大力基於netlify/postcss-fout-with-a-class 。

文檔當前僅具有Gulp配置示例，但可以使用其他構建工具配置進行貢獻！這在PostCSS都可以的任何地方都起作用。

安裝

npm install postcss-foft-classes

樣本：福特，單階段

請參閱具有類示例代碼的完整福特，並帶有字體面和隨附的JavaScript代碼。

Gulp Config

請參閱此功能./gulp-test/

 . pipe (
  postcss ( [
    foftLoadedClasses ( {
      groups : [
        {
          families : [ "Lato" ] ,
          classNames : [ "fonts-loaded" ]
        }
      ]
    } )
  ] )
)

輸入CSS

 body {
  font-family : Lato , sans-serif;
}

輸出CSS

 body {
  font-family : sans-serif;
}

. fonts-loaded body {
  font-family : Lato;
}

樣本：Foft，兩個階段

請參閱完整的Foft示例代碼，帶有字體面和隨附的JavaScript代碼。

Gulp Config

請參閱此功能./gulp-test/

 . pipe (
  postcss ( [
    foftLoadedClasses ( {
      groups : [
        {
          families : [ "LatoInitial" , "Lato" ] ,
          classNames : [ "fonts-loaded" , "fonts-loaded-2" ]
        }
      ]
    } )
  ] )
)

輸入CSS

 body {
  font-family : Lato , sans-serif;
}

輸出CSS

 body {
  font-family : sans-serif;
}

. fonts-loaded body {
  font-family : LatoInitial;
}

. fonts-loaded-2 body {
  font-family : Lato;
}