postcss foft classes

فئات postcss-foft

البرنامج المساعد PostCSS لإضافة فئات تلقائيًا لاستراتيجيات تحميل الخطوط المختلفة. استنادًا إلى درجة كبيرة على netlify/postcss-fout-with-a-class .

الوثائق حاليًا تحتوي فقط على أمثلة تكوين Gulp ولكنها مفتوحة للمساهمات مع تكوينات أدوات البناء الأخرى! هذا يعمل في أي مكان postcss يفعل.

تثبيت

npm install postcss-foft-classes

العينة: fout ، مرحلة واحدة

راجع Full Fout مع رمز مثال الفصل الدراسي ، مع وجوه الخط ورمز JavaScript الذي يمر به.

تكوين Gulp

انظر هذا العمل في ./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 الكامل ، مع وجوه الخط ورمز JavaScript الذي يمر به.

تكوين Gulp

انظر هذا العمل في ./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;
}