Convertir PostCSS en CSS 'normal'

Question

J'ai un code avec PostCSS. Maintenant, je veux obtenir le même effet dans les CSS 'normaux' sans utiliser le plugin PostCSS. Est-ce possible et si oui, comment?

Cela peut sembler une question stupide, mais je suis nouveau HTML/CSS

Le code est ici Codepen: https://codepen.io/MightyFool/pen/jLKVqQ

Voici le code 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>\ 

Voici le CSS de PostCSS:

@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

Il doit être possible, puisque les navigateurs seulement Comprendre le CSS pur. Si vous utilisez un préprocesseur comme PostCSS (ou SASS, LESS, Stylus ...), vous aurez besoin d'un compilateur qui traduira les déclarations de style spécifiques au langage en CSS simple. Puisque vous avez mentionné CodePen, il y a même un menu déroulant en haut à droite de la fenêtre CSS, où vous pouvez choisir « View Compilé CSS », qui vous donnera ce résultat:

@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%; 
} 

Vous peut vouloir lire this Article pour obtenir une meilleure compréhension sur la façon d'utiliser les préprocesseurs CSS, et ce qu'ils font.