Это может быть глупый вопрос, но я наткнулся на этот удивительный CodePen, который я хотел настроить и использовать. Я запустил быструю демонстрацию на моем собственном сервере, но это не сработало. Затем я понял, что рядом с CodePen он сказал SCSS, который я googled. Я разбираюсь, но я не знаю, как сделать этот конкретный код работой.Как заставить Сасса работать?
HTML-:
<body>
<div id="paper"> </div>
<div class="wrap">
<a class="two" href="http://db.tt/vkXgwK2P">
<img class="round" src="http://db.tt/vkXgwK2P" alt="">
</a>
<a class="three" href="http://db.tt/Lrtnc768">
<img class="round" src="http://db.tt/Lrtnc768" alt="">
</a>
<a class="one" href="http://db.tt/CSVy5HNR">
<img class="round" src="http://db.tt/CSVy5HNR" alt="">
</a>
<figure>
<img src="http://db.tt/FveX1nYo" alt="">
</figure>
</div>
SCSS:
body {
margin: 0;
}
#paper {
height: 120px;
margin: 0;
background: #303535;
}
.wrap {
margin: 0 auto;
width: 180px;
height: 180px;
border-radius: 50%;
box-shadow: 0 0 0 10px white;
position: relative;
top: -80px;
background: #fff;
a {
margin: 0;
position: absolute;
.round {
border-radius: 50%;
width: 180px;
height: 180px;
box-shadow: 0 0 0 10px white;
}
}
figure img {
margin: 0;
-webkit-transition: top 0.4s ease-out;
-moz-transition: top 0.4s ease-out;
transition: top 0.4s ease-out;
position: absolute;
top: 200px;
left: 77px;
}
.two {
margin: 0;
-webkit-transition: top 0.4s ease-out;
-moz-transition: top 0.4s ease-out;
transition: top 0.4s ease-out;
opacity: 0.8;
top: 0;
}
.three {
margin: 0;
-webkit-transition: top 0.4s ease-out;
-moz-transition: top 0.4s ease-out;
transition: top 0.4s ease-out;
opacity: 0.8;
top: 0;
}
&:hover .one {
opacity: 0.8;
}
& a.one:hover {
opacity: 1;
z-index: 2;
}
:hover .two {
top: 300px;
}
& a.two:hover {
opacity: 1;
z-index: 2;
}
&:hover .three {
top: 150px;
}
& a.three:hover {
opacity: 1;
z-index: 2;
}
&:hover figure img {
top: 500px;
}
}
Существует также пример того, что я пытаюсь добиться в CodePen: http://codepen.io/CoffeeCupDrummer/pen/FqChm
Я подумал, может быть, проблема была в синтаксисе ссылок, поэтому я chan чтобы это выглядело так, но это тоже не сработало. Я попробовал style.css, затем переключился на style.scss в надежде на его исправление.
<link rel="stylesheet" href="stylesheet/style.scss">
Так что мой вопрос, Что так сильно отличается о SCSS и почему я не могу заставить его работать, когда он прекрасно работает на CodePen?