0

我正在寻找一些可用于生成一些 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 表达式来实现这一目标，但其他解决方案也很好。

4

1 回答 1

1

刚刚检查了你的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 */
于 2017-03-27T19:27:50.083 回答