I was looking through the codepen platform to look up some examples and discovered a project having different HTML style and the CSS has $ variable colors ? I've never seen such Code and I can't apply it to my local project, because it can't read the HTML and CSS. I looked up something like "CSS $ variables" etc. but didn't find any examples or explanation. What do I need to lookup to inform myself about this ? ....
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;
}
I googled the Code style and was expecting some explanation so I can learn about this.
CodePudding user response：
What you see there are Compiled Languages. They need another piece of software to transform them into HTML/CSS before the browser can interpret them.
The point is the usage of variables and loops to increase maintainability and consistence in the source code on bigger projects.
The HTML one looks like Pug.js, which is a templating language that can be configured to accept variables from the server on the fly and compile multiple parts from different files together into one HTML document easily.
The CSS looking one is Scss, a dialect of Sass, which serves a similar purpose.
If you'd like to use them on your project, you can use either one of the many online compilers:
Or set up a toolchain to compile these languages locally (this is done with node.js). For more information on the setup, please see the respective getting started pages for the languages.
CodePudding user response：
This isn't HTML and CSS, but some "pre-processing" system that generates HTML and CSS. You need to find out what syntax is being used, and then run a program on your server that converts the custom markup into real HTML and CSS.
The reason it works on Codepen is that Codepen is running that program for you on their servers.
If you hit "Settings" in Codepen, you can select from 4 HTML pre-processors, 5 CSS pre-processors , and 4 JS pre-processors. Each of these will read a different form of source code and generate HTML, CSS, and JS that the browser can understand.
Look up each of them to learn what their features are, and what you'd need to install to use them yourself.