PostCSSを「通常の」CSSに変換する

Question

私はPostCSSで書かれたコードを持っています。今私は、PostCSSプラグインを使用せずに「通常の」CSSで同じ効果を達成したいと思います。これは可能ですか？はいの場合、どうですか？

これはばかげた質問のように聞こえるかもしれませんが、私はHTML/CSSへの新たなんだが

コードがCodepenにここにある：https://codepen.io/MightyFool/pen/jLKVqQはここ

HTML：ここ

<p> 
    "Attractive things make people </a> <a class="link-1" href="#">feel good</a>, which in turn makes them think more</a> <a class="link-1" href="#">Creatively</a>. How does that make something easier to use? Simple, by making it easier for <a class="link-2">people</a> to find solutions to the problems they encounter." <strong>- Don Norman</strong> 
</p>\ 

がありますPostCSS CSS：

@use postcss-simple-vars; 
@use postcss-nested; 
@import 'https://fonts.googleapis.com/css?family=Open+Sans'; 

$underlineColor: #00458D; 
$underlineHeight: 1px; 

* { 
    box-sizing: border-box; 
} 

html, body { 
    font-family: 'Open Sans', sans-serif; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

body { 
    border: 8px solid $underlineColor; 
} 

a { 
    cursor: pointer; 
} 

strong { 
    margin-top: 16px; 
    display: block; 
    font-weight: 700; 
} 

p { 
    padding: 24px; 
    max-width: 760px; 
    font-size: 16px; 
    font-weight: 500; 
    line-height: 24px; 
} 

.link-1 { 
    position: relative; 
    text-decoration: none; 
    display: inline-block; 
    color: #00458D; 
    padding: 0 1px; 
    transition: color ease 0.25s; 

    &::after { 
    content: ''; 
    position: absolute; 
    z-index: -1; 
    width: 100%; 
    height: $underlineHeight; 
    left: 0; 
    bottom: 0; 
    background-color: $underlineColor; 
    transition: all ease 0.25s; 
    } 

    &:active { 
    position: relative; 
    text-decoration: none; 
    display: inline-block; 
    background-color: #D42E1C; 
     } 

    &:hover { 
    color: white; 

    &::after { 
     height: 100%; 
    } 
    } 
} 

Answer 1

ブラウザだけなので純粋なCSSを理解する。 PostCSS（またはSASS、LESS、Stylus ...）のようなプリプロセッサを使用している場合は、Language specific Style DeclarationsをプレーンCSSに変換するコンパイラが必要です。あなたがCodePenを述べているので、あなたはあなたにこの結果を与えるであろう、「CSSコンパイルビュー」を選択することができますCSSウィンドウの右上にも、ドロップダウンメニューは、そこにある：

@import 'https://fonts.googleapis.com/css?family=Open+Sans'; 

* { 
    box-sizing: border-box; 
} 

html, body { 
    font-family: 'Open Sans', sans-serif; 
    width: 100%; 
    height: 100%; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: center; 
     -ms-flex-align: center; 
      align-items: center; 
    -webkit-box-pack: center; 
     -ms-flex-pack: center; 
      justify-content: center; 
} 

body { 
    border: 8px solid #00458D; 
} 

a { 
    cursor: pointer; 
} 

strong { 
    margin-top: 16px; 
    display: block; 
    font-weight: 700; 
} 

p { 
    padding: 24px; 
    max-width: 760px; 
    font-size: 16px; 
    font-weight: 500; 
    line-height: 24px; 
} 

.link-1 { 
    position: relative; 
    text-decoration: none; 
    display: inline-block; 
    color: #00458D; 
    padding: 0 1px; 
    -webkit-transition: color ease 0.25s; 
    transition: color ease 0.25s; 
} 

.link-1::after { 
    content: ''; 
    position: absolute; 
    z-index: -1; 
    width: 100%; 
    height: 1px; 
    left: 0; 
    bottom: 0; 
    background-color: #00458D; 
    -webkit-transition: all ease 0.25s; 
    transition: all ease 0.25s; 
} 

.link-1:active { 
    position: relative; 
    text-decoration: none; 
    display: inline-block; 
    background-color: #D42E1C; 
} 

.link-1:hover { 
    color: white; 
} 

.link-1:hover::after { 
    height: 100%; 
} 

あなたはCSSプリプロセッサの使い方とその動作を理解するためにthis Articleと読んでみたいと思うかもしれません。