Code mystérieux (sans balise)

**friendofweb** · 11/01/2017, 22h26

Voilà, si vous êtes inscrit sur le site codepen, vous pouvez découvrir des codes qui sont partagés, c'est d'ailleurs la raison pour laquelle je poste ce message. Je viens de découvrir un code intéressant, mais c'est la première fois que je vois un code pareil dans la partie "html".

Connaissez-vous cette manière de coder, c'est à dire sans balise !?

Voici un aperçu
Je ne vais pas vous demander de m'expliquer le code évidemment, mais seulement de me guider dans mes recherches s'il vous plaît !

Voici le

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
.container
	.console
			.console-head
				.console-title Console
				.console-actions
					.console-action.console-action-min
						span.fa.fa-caret-down
					.console-action.console-action-max
						span.fa.fa-arrows-alt
					.console-action.console-action-close
						span.fa.fa-close
			.console-body
				.console-text user@PC:~$
					span.console-input _

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
//Colors
$color-body:#647a94;
$color-window:#bbb;
$color-title:#222;
$color-action-min:#eeee73;
$color-action-max:#bee07e;
$color-action-close:#e08d8d;
$color-background:#222;
$color-text:#ddd;
//Sizes
$height-window:24px;
$height-border:4px;
$height-titlebar:$height-window - $height-border;
//End Variables
html {
	box-sizing: border-box;
}
 
*,
*:before,
*:after {
	box-sizing: inherit;
}
 
body {
	background-color: $color-body;
	height: 100vh;
}
 
.container {
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 100%;
}
 
.console {
	max-width: 720px;
	min-width: 460px;
	width: 50vw;
	max-height: 540px;
	min-height: 320px;
	height: 50vh;
	border: $height-border solid $color-window;
	font-family: 'Source Code Pro', monospace;
	.console-head {
		height: $height-window;
		background-color: $color-window;
		display: flex;
		justify-content: space-between;
		border-bottom: $height-border solid $color-window;
		.console-title {
			font-weight: 600;
			color: $color-title;
		}
		.console-actions {
			display: flex;
			justify-content: space-around;
			.console-action {
				margin-left: $height-border;
				display: block;
				width: $height-titlebar;
				height: $height-titlebar;
				color: $color-title;
				text-align: center;
				font-size: 0.9em;
				.fa {
					line-height: $height-titlebar;
				}
				&.console-action-min {
					background-color: $color-action-min;
				}
				&.console-action-max {
					background-color: $color-action-max;
				}
				&.console-action-close {
					background-color: $color-action-close;
				}
			}
		}
	}
	.console-body {
		height:calc(100% - #{$height-window});
		background-color: $color-background;
		.console-text {
			padding: 4px;
			color: $color-text;
			.console-input {
				animation: 1.5s blink infinite;
				@keyframes blink {
					0% {
						opacity: 1;
					}
					50% {
						opacity: 1;
					}
					51% {
						opacity: 0;
					}
					100% {
						opacity: 0;
					}
				}
			}
		}
	}
}