To może być głupie pytanie, ale natknąłem się na ten niesamowity CodePen, który chciałem dostosować i użyć. Uruchomiłem szybkie demo na własnym serwerze, ale nie zadziałało. Potem uświadomiłem sobie, że obok CodePen mówi SCSS, którego używałem w Google. Rozumiem, ale nie wiem jak sprawić, by ten konkretny kod działał.Jak sprawić, aby Sass działał?
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;
}
}
Jest też przykładem tego, co staram się osiągnąć w CodePen: http://codepen.io/CoffeeCupDrummer/pen/FqChm
Pomyślałem, że może problem tkwi w mojej składni linków, więc chan wyglądało to tak, ale to też nie działało. Próbowałem style.css, a następnie przełączyłem się na style.scss w nadziei, że go naprawię.
<link rel="stylesheet" href="stylesheet/style.scss">
Więc moje pytanie brzmi: Co tak różne o SCSS i dlaczego nie mogę zmusić go do pracy, kiedy to działa dobrze na CodePen?