gpt4 book ai didi

用于生成 Google Font css PostCSS 工件的 Bash 脚本?

转载 作者:太空宇宙 更新时间:2023-11-04 08:56:58 25 4
gpt4 key购买 nike

我正在寻找一些可用于生成一些 postcss 工件的 sed 表达式。我可能应该把它分成两个问题。请告诉我。

我正在创建这个 superfly-css-utility-fonts模块。它将具有如下字体实用程序:

.u-font-open-sans {
font-family: "Open Sans", var(--font-family-helvetica-neue) !important;
}

我计划像这样使用 PostCSS 每个循环生成这些:

@each $font in open-sans, lato, etc...

我有一个看起来像这样的所有谷歌字体的列表:

@import url('https://fonts.googleapis.com/css?family=Yeseva+One');
@import url('https://fonts.googleapis.com/css?family=Yesteryear');
@import url('https://fonts.googleapis.com/css?family=Yrsa');
@import url('https://fonts.googleapis.com/css?family=Zeyada');

使用该输入,我需要输出要在循环中使用的逗号分隔值。换句话说:

yeseva-one, yesteryear, yrsa, zeyada, etc.

我还需要生成这样的 css 变量:

--font-yeseva-one: "Yeseva One";
--font-yrsa: "Yrsa";
...

理想情况下会有 2 个 sed 表达式来实现这个目标,但其他解决方案也很好。

最佳答案

刚刚检查了你的 github 链接,所以..

...以下内容可能有所帮助:

fontlist="./fonts.css"

#loads the list of all google fonts from the $fontlist into array
#in the names are replaced the '+' with space (e.g. "Yeseva+One" -> "Yeseva One")
mapfile -t google < <(sed "s/.*=\(.*\)'.*/\1/;s/+/ /g" "$fontlist")

#functions

# gfonts returns the content of array
gfonts() { printf "%s\n" "${google[@]}"; }

#make_css_vars - greate the font lines like:
# --font-yeseva-one: "Yeseva One";
make_css_vars() {
while read -r gname; do
local lc_name="${gname,,}"
printf -- ' --font-%s: "%s";\n' "${lc_name// /-}" "$gname"
done < <(gfonts)
}

#make_the_each - create the @postCSS @each line like
# @each $font in yeseva-one, yesteryear, yrsa, zeyada
make_the_each() {
printf '@each $font in %s\n' "$(gfonts | tr '[:upper:]' '[:lower:]' | tr ' ' '-' | paste -sd, - | sed 's/,/, /g')"
}

#use the above functions as:

make_css_vars # >somefile
make_the_each # >anotherfile

make_css_vars 的输出

  --font-yeseva-one: "Yeseva One";
--font-yesteryear: "Yesteryear";
--font-yrsa: "Yrsa";
--font-zeyada: "Zeyada";

make_the_each 的输出

@each $font in yeseva-one, yesteryear, yrsa, zeyada

评论很少:

  • 您确定@each 列表中的名称可以包含- 字符,例如abhaya-libre?恕我直言,该列表只能包含 \w+ 例如仅单词字符(字母、数字、_)
  • 您可以直接从上述脚本生成整个输出文件,方法是将以下行添加到上述脚本的末尾:
cat <<INDEXCSS
/*
some static content
*/

root: {
$(make_css_vars)
}
/* other static content */
INDEXCSS

输出:

/*
some static content
*/

root: {
--font-yeseva-one: "Yeseva One";
--font-yesteryear: "Yesteryear";
--font-yrsa: "Yrsa";
--font-zeyada: "Zeyada";
}
/* other static content */

关于用于生成 Google Font css PostCSS 工件的 Bash 脚本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43053909/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com