postcss foft classes

postcss-foft-classes

ปลั๊กอิน PostCSS เพื่อเพิ่มคลาสโดยอัตโนมัติสำหรับกลยุทธ์การโหลดแบบอักษรต่างๆ ขึ้นอยู่กับ netlify/postcss-fout-with-a-class เป็นอย่างมาก

เอกสารปัจจุบันมีตัวอย่างการกำหนดค่าของ Gulp เท่านั้น แต่เปิดให้มีการมีส่วนร่วมกับการกำหนดค่าเครื่องมือบิลด์อื่น ๆ ! สิ่งนี้ใช้ได้ทุกที่ postcss ทำ

การติดตั้ง

npm install postcss-foft-classes

ตัวอย่าง: fout, ขั้นตอนเดียว

ดู fout เต็มด้วยรหัสตัวอย่างคลาสโดยมี font faces และรหัส JavaScript ที่ไปด้วย

gulp config

ดูการทำงานนี้ใน ./gulp-test/ 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 เต็มรูปแบบโดยมี Font Faces และรหัส JavaScript ที่ไปด้วย

gulp config

ดูการทำงานนี้ใน ./gulp-test/ 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;
}