CSS$變數？沒有標簽的HTML？-有解無憂

我正在通過 codepen 平臺查找一些示例，并發現了一個具有不同 HTML 樣式的專案并且 CSS 具有 $ 可變顏色？我從未見過這樣的代碼，也無法將其應用于我的本地專案，因為它無法讀取 HTML 和 CSS。我查找了諸如“CSS $ variables”之類的東西，但沒有找到任何示例或解釋。我需要查找什么來告知自己這一點？……

HTML：

aside
    h1.title — Stopwatch —
    p.subtitle Pure CSS
    p.description
        | Inspired by this 
        a href="" target="_blank" Dribbble

main
    .wrapper
        .button.button--left
        .button.button--center
        .button.button--right
        .stopwatch
            .points
                - for i in (1..18)
                    .point
            .pointer
            .stamp
            .glass

CSS：

////////////////////////////////////////////
// COLORS VARIABLES
////////////////////////////////////////////
$COLOR-BLUE: #00c5d1;
$COLOR-BLUE-DARK: #00b5c7;
$COLOR-BLACK: #2c2c2c;
$COLOR-GRAY: #404f50;
$COLOR-BROWN: #74685d;
$COLOR-ORANGE: #bc563a;
$COLOR-WHITE: #ffffff;


////////////////////////////////////////////
// Wrapper - wrap stopwatch and buttons
////////////////////////////////////////////
.wrapper {
    position: relative;
}


////////////////////////////////////////////
// Stopwatch - most external rounded part
////////////////////////////////////////////
.stopwatch {
    position: relative;
    padding: 15px;
    width: 200px;
    height: 200px;
    border-radius: 200px;
    background-image: linear-gradient(
        to bottom,
        $COLOR-GRAY 50%,
        $COLOR-BLACK 50%
    );
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, .12), 
        0 1px 2px rgba(0, 0, 0, .24);
    
    // INNER AREA
    &::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 10px;
        width: 180px;
        height: 180px;
        border-radius: 180px;
        background-color: $COLOR-BLUE-DARK;
        box-shadow: 
            inset 0 1px 3px rgba(0, 0, 0, .12), 
            inset 0 1px 2px rgba(0, 0, 0, .24);
    }
}


////////////////////////////////////////////
// Points - all small white marks
////////////////////////////////////////////
.points {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 180px;
    height: 180px;
    border-radius: 180px;
    
    .point {
        position: absolute;
        top: 89px;
        width: 100%;
        height: 2px;
        
        &::before,
        &::after {
            content: '';
            position: absolute;
            width: 12px;
            height: 2px;
            border-radius: 4px;
            background-color: $COLOR-WHITE;
        }
        
        &::before { left: 4px }
        &::after { right: 4px }
        
        &:nth-of-type(1) { transform: rotate(0deg) }
        &:nth-of-type(2) { transform: rotate(10deg) }
        &:nth-of-type(3) { transform: rotate(20deg) }
        &:nth-of-type(4) { transform: rotate(30deg) }
        &:nth-of-type(5) { transform: rotate(40deg) }
        &:nth-of-type(6) { transform: rotate(50deg) }
        &:nth-of-type(7) { transform: rotate(60deg) }
        &:nth-of-type(8) { transform: rotate(70deg) }
        &:nth-of-type(9) { transform: rotate(80deg) }
        &:nth-of-type(10) { transform: rotate(90deg) }
        &:nth-of-type(11) { transform: rotate(100deg) }
        &:nth-of-type(12) { transform: rotate(110deg) }
        &:nth-of-type(13) { transform: rotate(120deg) }
        &:nth-of-type(14) { transform: rotate(130deg) }
        &:nth-of-type(15) { transform: rotate(140deg) }
        &:nth-of-type(16) { transform: rotate(150deg) }
        &:nth-of-type(17) { transform: rotate(160deg) }
        &:nth-of-type(18) { transform: rotate(170deg) }
    }
}


////////////////////////////////////////////
// Stamp - stopwatch background stamps
////////////////////////////////////////////
.stamp {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 180px;
    height: 180px;
    border-radius: 180px;
    
    &::before {
        content: '';
        position: absolute;
        top: 25px;
        left: calc(50% - 25px);
        width: 50px;
        height: 50px;
        border-radius: 50px;
        background-color: rgba(0, 0, 0, .2);
    }
    
    &::after {
        content: '';
        position: absolute;
        bottom: 30px;
        left: calc(50% - 30px);
        width: 60px;
        height: 25px;
        border-radius: 3px;
        background-color: rgba(0, 0, 0, .2);
    }
}


////////////////////////////////////////////
// Glass - a filter to looks like glass
////////////////////////////////////////////
.glass {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 180px;
    height: 180px;
    border-radius: 180px;
    background-image: 
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.15),
            rgba(0, 0, 0, 0.25)
        ),
        linear-gradient(
            to bottom,
            // to right bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0) 50%,
            rgba(255, 255, 255, 0)
        );
}


////////////////////////////////////////////
// Pointer - moving pointer
////////////////////////////////////////////
.pointer {
    position: absolute;
    top: 99px;
    left: 14px;
    width: 106px;
    height: 3px;
    border-radius: 4px;
    background-color: $COLOR-ORANGE;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, .12), 
        0 1px 2px rgba(0, 0, 0, .24);
    transform-origin: 86px 50%;
   animation: spin 15s infinite linear;
    
    // BULLET POINTER
    &::before {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 20px;
        right: 10px;
        top: -9px;
        border: 3px solid $COLOR-BLACK;
        background-color: $COLOR-GRAY;
    }
}


////////////////////////////////////////////
// Button - stopwatch buttons
////////////////////////////////////////////
.button {
    position: absolute;
    width: 20px;
    height: 30px;
    background-color: $COLOR-BLACK;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, .12), 
        0 1px 2px rgba(0, 0, 0, .24);
    
    &::before {
        content: '';
        position: absolute;
        top: -20px;
        left: -5px;
        width: 30px;
        height: 25px;
        border-radius: 4px;
        background-color: $COLOR-BLACK;
        box-shadow: 
            0 1px 3px rgba(0, 0, 0, .12), 
            0 1px 2px rgba(0, 0, 0, .24);   
    }
    
    // STATES
    &.button--left {
        top: 15px;
        left: 15px;
        transform: rotate(-45deg);
        
        &::before {
            background-color: $COLOR-ORANGE;
        }
    }
    
    &.button--center {
        top: -20px;
        left: calc(50% - 10px);
        
        &::before {
            background-image: linear-gradient(
                90deg,
                transparent 75%,
                rgba(255, 255, 255, .2) 25%
            );
            background-size: 3px 3px;
        }
        
        &::after {
            content: '';
            position: absolute;
            top: -35px;
            left: -15px;
            width: 50px;
            height: 50px;
            border-radius: 50px;
            border: 4px solid $COLOR-BLACK;
            box-shadow: 
                inset 0 1px 3px rgba(0, 0, 0, .12), 
                inset 0 1px 2px rgba(0, 0, 0, .24);
            z-index: -1;
        }
    }
    
    &.button--right {
        top: 15px;
        right: 15px;
        transform: rotate(45deg);
        
        &::before {
            background-color: $COLOR-WHITE;
        }
    }
}


////////////////////////////////////////////
// Spin - pointer animation
////////////////////////////////////////////
@keyframes spin {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(360deg) }
}


////////////////////////////////////////////
// Base - Some base styles
////////////////////////////////////////////
html,
body {
    height: 100%;
}

body {
    display: flex;
    background-color: $COLOR-BLUE-DARK;
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
    font-family: Georgia, Serif;
}

a {
    padding-bottom: 2px;
    border-bottom: 1px solid #f4f4f4;
    color: #f4f4f4;
    text-decoration: none;
    
    &:hover {
        border-bottom: 1px solid #ff3c41;
        color: #ff3c41;
        font-weight: bold;
    }
}

*,
*::after,
*::before {
    box-sizing: border-box;
}


////////////////////////////////////////////
// Structure
////////////////////////////////////////////
aside {
    flex-basis: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    line-height: 1.5;
    
  .title,
  .subtitle,
  .description {
    font-style: italic;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  }
  
  .title {
    font-weight: bold;
    font-size: 2em;
  }
  
  .subtitle {
    font-size: 1.5em;
  }
  
  .description {
    margin-top: 24px;
    font-size: 1.2em;
  }
}

main {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

我用谷歌搜索了代碼風格并期待一些解釋，這樣我就可以了解這一點。

uj5u.com熱心網友回復：

你看到的是Compiled Languages。他們需要另一款軟體將它們轉換為 HTML/CSS，然后瀏覽器才能解釋它們。

關鍵是使用變數和回圈來增加更大專案源代碼的可維護性和一致性。

HTML 看起來像Pug.js，它是一種模板語言，可以配置為即時接受來自服務器的變數，并將來自不同檔案的多個部分輕松地編譯成一個 HTML 檔案。

看起來的 CSS 是 Scss，Sass 的一種方言，用于類似的目的。

如果你想在你的專案中使用它們，你可以使用許多在線編譯器之一：

https://pughtml.com/
https://www.sassmeister.com/

或者設定一個工具鏈來在本地編譯這些語言（這是用 node.js 完成的）。有關設定的更多資訊，請參閱相應語言的入門頁面。

uj5u.com熱心網友回復：

這不是 HTML 和 CSS，而是一些生成 HTML 和 CSS 的“預處理”系統。您需要找出正在使用的語法，然后在您的服務器上運行一個程式，將自定義標記轉換為真正的 HTML 和 CSS。

它在 Codepen 上運行的原因是 Codepen 在他們的服務器上為您運行該程式。

如果您在 Codepen 中點擊“設定”，您可以從 4 個 HTML 前處理器、5 個 CSS 前處理器和 4 個 JS 前處理器中進行選擇。它們中的每一個都將讀取不同形式的源代碼并生成瀏覽器可以理解的 HTML、CSS 和 JS。

查看它們中的每一個以了解它們的功能是什么，以及您需要安裝什么才能自己使用它們。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/449977.html

標籤：html css 变量

上一篇：如何從位于同一檔案中的JS腳本更新EJS中的變數？

下一篇：如何使用迭代設定類變數的名稱？