Объясни это

Объясни это

Как уменьшить количество чезахерня/час в CSS. 6 слайдов с CSS и всего одна смешная картинка.

Василий Половнёв, Flatstack

Вначале была ось

				<div class="axis">
				  <span class="point point--scored_3">
				    3
				  </span>
				</div>
			

CSS: ось

				.axis {
				  position: relative;
				  height: 20px;
				  width: 200px;
				}
			

CSS: точка

				.point {
				  position: absolute;
				  left: 0;
				  height: 20px;
				  width: 20px;
				  margin-left: -10px;
				  border-radius: 100%;
				  line-height: 20px;
				  text-align: center;
				}
			

И еще немного CSS для точки

				.point--scored_3 {
				  left: 60px;
				}
			

Давайте объясним

  			$point-diameter: 20px;
  			$max-point-count: 10;
  			 

  			
.axis {
  			  position: relative;
  			  height: $point-diameter;
  			  width: $max-point-count * $point-diameter;
  			}
  		

  			.point {
  			  position: absolute;
  			  left: 0;
  			  height: $point-diameter;
  			  width: $point-diameter;
  			  margin-left: -($point-diameter / 2);
  			  border-radius: 100%;
  			  line-height: $point-diameter;
  			  text-align: center;
  			}
  		

				.point--scored_3 {
				  left: 3 * $point-diameter;
				}
			

Теперь ясно. Ясно, Карл!

• Ось в длину 200px, чтобы вместить десять меток;
• Отрицательный отступ слева в половину метки нужен, чтобы отцентрировать ее;
• Высота строки в 20px центрирует текст метки по вертикали.

Спасибо

• Презентация: kurskmeetup.github.io/explain-this-keynote
• Рефакторинг: Introduce Explaining Variable
• Твиттер: @vazilla