Сергей delphinpro

В дополнение к тому, что предложил Андрей Хохлов есть еще древний способ, которым такую хрень делали еще на шестых осликах

.parent-block {
  display:inline-block;width:100%; /* или другой клирфикс*/
}
.gray-block {
  white-space: nowrap;
  float: right;
}
.purple-block {
  overflow: hidden;
}

Гугл примерно так и делает. посмотрите исходник страницы.

И вовсе это не неудобно. Разработка ведется как обычно - в разных файлах, потом все склеивается и выкатывается.
Однако, мне видится, должна быть веская причина так делать.

PS Для одностраничника вполне оправданно упаковать все в один файл. Кроме, пожалуй изображений в base64 =).

@for $i from 1 through 6 {
  .teammate-#{$i} {
    bacground-image: url('/images/teammate-#{$i}');
  }
}

Про каскад вы почти правильно знаете с азов. =)
Каскад начинает разруливать какие стили применять, когда у них оказывается одинаковая специфичность.
А это

"Избегайте каскада" иди "слишком длинный каскад".

люди путают понятия каскада и вложенных селекторов.

Разницы не будет.
Переменная задается, потому что в реальной программе редко используются числа. Данные всегда откуда-то берутся и хранятся в переменных.

Можете вообще написать

console.log("The area is: " + calculateArea (5.2) ) ;

Или даже не использовать именованную функцию =)

console.log("The area is: " + (function (r) {
  return  (r <= 0) ? 0 : Math.PI * r * r ;
})(5.2));

Тонкости терминологии. Обычному юзеру пофиг.

codepen.io/anon/pen/zomwex

следить нужно за .jade файлами

sass(scss) - как самый мощный. однако, как и у остальных, имеет свои проблемы. Самая неприятная - отсутствие встроенной опции для резолвинга url (критично при сборке вебпаком, в этом случае лучше взять стайлус).
Jade/Pug не приемлю из-за синтаксиса, основанного на отступах, предпочитаю более html-ные шаблонизаторы (twig, handlebars)
Emmet сейчас по дефолту встроен во все более или менее приличные редакторы и IDE.

upd
Главное забыл =)
Неважно что именно вы выберите. Важно то, что научитесь использовать эти инструменты в работе. А знать в той или иной степени придется всё. Никогда не знаешь, с чем придется работать.

background-size:cover
+ (опционально) разные картинки посредством медиа-запросов, если на определенных размерах выглядит совсем уж ужасно.

Можно. Используют повсеместно. Может не в таком явном виде, но в больших проектах всегда есть вложенные try на разных уровнях приложения.

Пишете маршрут '/projects/[i:id]/'
И ваш $id будет передан первым параметром в функцию/метод обработчик маршрута.
Собственно, как сказал Александр Аксентьев , об этом написано на главной странице документации роутера.

Я вижу только один вариант - писать много js =)
Т.е. ловим событие наведения мышки, генерируем блок за пределами слайдера наполняем соответствующим контентом из наведенной карточки, высчитываем и позиционируем поверх карточки. Не забываем каждый раз инициализировать и дестроить плагины/скрипты/события, которые работают внутри наведенной плашки.

Да любой. Посмотрите какой набор ui элементов имеется в составе. Если устраивает - берите.

box-sizing: border-box;

Расположите .main-item после .slider.active, поменяйте порядок флексом и обращайтесь через плюсик.

На сколько я знаю, использование ~

~ тоже работает только на последующие элементы (а + только на следующий)

UPD https://jsfiddle.net/1whm1g4o/3/

Пирожок, блин. extends - для расширения базового класса, добавления ему новых свойств. а не для дублирования одного и того же.

<input type="text" value="E-Mail"
  onfocus="if(this.value=='E-Mail') this.value=''"
  onblur="if(this.value=='') this.value='E-Mail'">