Report

Привет!
Недавно проходила первый этап на собесе с заданием и провалила. Нужно было создать копию отправленного изображения (прикреплено). Предполагаю, что ошибка была изначально в том, что требование "Use SASS variables by changing width and background, it has to change completely, the shape must be responsive (all its parts grow or shrink respectively)" не было выполнено. Фидбека не было, к сожалению. Работа проделана была только с html css. Но быть может были допущены другие другие ошибки? Буду признательна, если кто-нибудь укажет на них.
Код ниже и по ссылке: https://codepen.io/qizqepml-th... ls/LYeYqjX
 
<div class="wrapper"> <div class="circle"> <div class="panel panel--1"> </div> <div class="panel panel--2"> </div> <div class="panel panel--3"> </div> <div class="panel panel--4"> </div> <div class="circle--2"> </div> </div> </div>  
* { box-sizing: border-box; } body { background-color: #2b2b2b; } .wrapper { background-color: #2b2b2b; position: absolute; display: flex; align-items: center; justify-content: center; top: 50%; left: 50%; transform: translate(-50%, -50%); } .circle { height: 29vw; width: 29vw; border-radius: 50%; position: absolute; transform: rotateZ(25deg); background-color: #333333; } .panel { height: 17.5vw; width: 17.5vw; border-radius: 50%; border: 1.5vw solid #f14100; } .panel--1 { float: left; position: absolute; } .panel--2 { float: right; position: relative; } .panel--3 { bottom: 0; position: absolute; } .panel--4 { bottom: 0; right: 0; position: absolute; } .circle--2 { border: 1.5vw solid #f14100; position: relative; border-radius: 50%; height: 25vw; width: 25vw; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); outline: 10vw solid #2b2b2b; }  

Всем привет народ! Очень надеюсь на вашу помощь! Дело в том что я создавал сайты по видео урокам некого Михаила Базарова. Вот собственно его видео уроки https://camouf.ru/video/new_store/phpstorm.html?PAGEN_2=2
Теперь конкретно о проблеме: Дело в том, что данный человек использует bootstrap и sass. Он компилирует все стили в сжатый css. В этом то и проблема. У меня не компилируется, а стили на сайте не работают.
Что я сделал: установил Ruby, прописал в командной строке gem install sass, успешно установился. Перезагрузил компьютер и подключился к своему удаленному серверу через PhpStorm. Обмен между локальным и удаленным сервером идет успешно. Но на сайте не работают стили прописанные в sass
Скрин https://imgur.com/a/vV6QZBV
 
UPD: Оказалось что путь к файлам неверный, мог бы кто нибудь помочь настроить?

Здравствуйте! Не могу сделать импорт в sass. Не могу понять в чем дело? По урокам делал, как все показывали, но не выходит! Импорт для оптимизаций и адаптаций сайта 

Заранее прошу прощения если этот вопрос уже задавался, но, несмотря на обширное кол-во информации по теме, найти ответа на свой вопрос я не смогла.

Суть в следующем:
Например, у меня есть два отдельных scss файла - header.scss и footer.scss. Стили футера почти полностью совпадают со стилями хедера, за исключением пары свойств.
Но если я прописываю в файле footer.scss @extend header - стили хедера не могут использоваться, т.к. это другой файл.

Подскажите, как идеологически вернее делать в данной ситуации? Чтобы новый класс/элемент получал стили существующего класса из другого файла + добавлял свои или менял некоторые стили на свои.

Первый вопрос: - Нужно ли использовать эти кроссбраузерные плюшки для стилизации placeholder'a? Не устарели ли они?
::-webkit-input-placeholder {color:#c0392b;} ::-moz-placeholder {color:#c0392b;}/* Firefox 19+ */ :-moz-placeholder {color:#c0392b;}/* Firefox 18- */ :-ms-input-placeholder {color:#c0392b;} Второй вопрос - Использую Sass, как правильно стилизовать placeholder? Не могу понять куда писать этот код и как правильно он оформляется в sass
&-form margin-top: 98px &_main-form input display: block margin: 0 auto height: 67px width: 370px padding: 29px 0 29px 36px По идее он должен писаться под паддингами, но коала ругается, так как у кроссбраузерных плюшек скобки и тд