CSS $变量？ HTML 没有标签？

Question

我正在浏览 codepen 平台以查找一些示例，发现一个项目具有不同的 HTML 风格并且 CSS 具有 $ 可变颜色？我从未见过这样的代码，我无法将它应用到我的本地项目中，因为它无法读取 HTML 和 CSS。我查找了诸如“CSS $ 变量”之类的内容，但没有找到任何示例或解释。我需要查找什么来告知自己这件事？ ....

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

我在 Google 上搜索了代码风格，希望得到一些解释，以便我可以了解这一点。

Answer 1

这不是 HTML 和 CSS，而是一些生成 HTML 和 CSS 的“pre-processing”系统。您需要找出正在使用的语法，然后运行服务器上的一个程序将自定义标记转换为真正的 HTML 和 CSS.

它在 Codepen 上运行的原因是 Codepen 运行在他们的服务器上为您安装该程序。

如果您在 Codepen 中点击“设置”，您可以 select 来自 4 HTML pre-processors、5 CSS pre-processors 和 4 JS pre-processors。其中每一个都会读取不同形式的源代码，并生成浏览器可以理解的HTML、CSS和JS。

查看它们中的每一个以了解它们的功能，以及您需要安装什么才能自己使用它们。

Answer 2

所见即所得Compiled Languages。在浏览器可以解释它们之前，他们需要另一个软件将它们转换为 HTML/CSS。

重点是使用变量和循环来提高大型项目源代码的可维护性和一致性。

HTML 看起来像 Pug.js，这是一种模板语言，可以配置为从服务器即时接受变量，并将不同文件的多个部分编译成一个 HTML 轻松记录。

看起来 CSS 的是 Scss，Sass 的一种方言，其用途相似。

如果您想在您的项目中使用它们，您可以使用众多在线编译器之一：

或者设置一个工具链在本地编译这些语言（这是用 node.js 完成的）。有关设置的详细信息，请参阅相应语言的入门页面。

CSS $变量？ HTML 没有标签？

CSS $ variable ? HTML without tags?

html

css

variables