如何将scss转换为css

Question

I am trying to figure it out but don't know to how to convert this SCSS file into Css file can you please help me to solve this problem any help would be appreciated i want this animation hover effect but in simple I tried to add this scss but its not working properly some

Here its codepen link: https://codepen.io/electerious/pen/qPjbGm

 body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #fcf3ec; }.button { --offset: 10px; --border-size: 2px; display: block; position: relative; padding: 1.5em 3em; appearance: none; border: 0; background: transparent; color: #e55743; text-transform: uppercase; letter-spacing: .25em; outline: none; cursor: pointer; font-weight: bold; border-radius: 0; box-shadow: inset 0 0 0 var(--border-size) currentcolor; transition: background.8s ease; &:hover { background: rgba(100, 0, 0, .03); } &__horizontal, &__vertical { position: absolute; top: var(--horizontal-offset, 0); right: var(--vertical-offset, 0); bottom: var(--horizontal-offset, 0); left: var(--vertical-offset, 0); transition: transform.8s ease; will-change: transform; &::before { content: ''; position: absolute; border: inherit; } } &__horizontal { --vertical-offset: calc(var(--offset) * -1); border-top: var(--border-size) solid currentcolor; border-bottom: var(--border-size) solid currentcolor; &::before { top: calc(var(--vertical-offset) - var(--border-size)); bottom: calc(var(--vertical-offset) - var(--border-size)); left: calc(var(--vertical-offset) * -1); right: calc(var(--vertical-offset) * -1); } } &:hover &__horizontal { transform: scaleX(0); } &__vertical { --horizontal-offset: calc(var(--offset) * -1); border-left: var(--border-size) solid currentcolor; border-right: var(--border-size) solid currentcolor; &::before { top: calc(var(--horizontal-offset) * -1); bottom: calc(var(--horizontal-offset) * -1); left: calc(var(--horizontal-offset) - var(--border-size)); right: calc(var(--horizontal-offset) - var(--border-size)); } } &:hover &__vertical { transform: scaleY(0); } }

 <button class="button"> Fancy Button <div class="button__horizontal"></div> <div class="button__vertical"></div> </button>

Answer 1

yes, try this site

 body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #fcf3ec; }.button { --offset: 10px; --border-size: 2px; display: block; position: relative; padding: 1.5em 3em; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background: transparent; color: #e55743; text-transform: uppercase; letter-spacing: 0.25em; outline: none; cursor: pointer; font-weight: bold; border-radius: 0; box-shadow: inset 0 0 0 var(--border-size) currentcolor; transition: background 0.8s ease; }.button:hover { background: rgba(100, 0, 0, 0.03); }.button__horizontal, .button__vertical { position: absolute; top: var(--horizontal-offset, 0); right: var(--vertical-offset, 0); bottom: var(--horizontal-offset, 0); left: var(--vertical-offset, 0); transition: transform 0.8s ease; will-change: transform; }.button__horizontal::before, .button__vertical::before { content: ""; position: absolute; border: inherit; }.button__horizontal { --vertical-offset: calc(var(--offset) * -1); border-top: var(--border-size) solid currentcolor; border-bottom: var(--border-size) solid currentcolor; }.button__horizontal::before { top: calc(var(--vertical-offset) - var(--border-size)); bottom: calc(var(--vertical-offset) - var(--border-size)); left: calc(var(--vertical-offset) * -1); right: calc(var(--vertical-offset) * -1); }.button:hover.button__horizontal { transform: scaleX(0); }.button__vertical { --horizontal-offset: calc(var(--offset) * -1); border-left: var(--border-size) solid currentcolor; border-right: var(--border-size) solid currentcolor; }.button__vertical::before { top: calc(var(--horizontal-offset) * -1); bottom: calc(var(--horizontal-offset) * -1); left: calc(var(--horizontal-offset) - var(--border-size)); right: calc(var(--horizontal-offset) - var(--border-size)); }.button:hover.button__vertical { transform: scaleY(0); }

 <button class="button"> Fancy Button <div class="button__horizontal"></div> <div class="button__vertical"></div> </button>

Answer 2

In this Codepen CSS code block there is a dropdown click on it and then choose view compiled CSS it will convert SCSS to CSS.

 body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #fcf3ec; }.button { --offset: 10px; --border-size: 2px; display: block; position: relative; padding: 1.5em 3em; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background: transparent; color: #e55743; text-transform: uppercase; letter-spacing: 0.25em; outline: none; cursor: pointer; font-weight: bold; border-radius: 0; box-shadow: inset 0 0 0 var(--border-size) currentcolor; transition: background 0.8s ease; }.button:hover { background: rgba(100, 0, 0, 0.03); }.button__horizontal, .button__vertical { position: absolute; top: var(--horizontal-offset, 0); right: var(--vertical-offset, 0); bottom: var(--horizontal-offset, 0); left: var(--vertical-offset, 0); transition: transform 0.8s ease; will-change: transform; }.button__horizontal::before, .button__vertical::before { content: ""; position: absolute; border: inherit; }.button__horizontal { --vertical-offset: calc(var(--offset) * -1); border-top: var(--border-size) solid currentcolor; border-bottom: var(--border-size) solid currentcolor; }.button__horizontal::before { top: calc(var(--vertical-offset) - var(--border-size)); bottom: calc(var(--vertical-offset) - var(--border-size)); left: calc(var(--vertical-offset) * -1); right: calc(var(--vertical-offset) * -1); }.button:hover.button__horizontal { transform: scaleX(0); }.button__vertical { --horizontal-offset: calc(var(--offset) * -1); border-left: var(--border-size) solid currentcolor; border-right: var(--border-size) solid currentcolor; }.button__vertical::before { top: calc(var(--horizontal-offset) * -1); bottom: calc(var(--horizontal-offset) * -1); left: calc(var(--horizontal-offset) - var(--border-size)); right: calc(var(--horizontal-offset) - var(--border-size)); }.button:hover.button__vertical { transform: scaleY(0); }