Menu
This might be a dumb question but I stumbled upon this awesome CodePen that I wanted to adjust and use. I launched a quick demo on my own server but it didn't work. Then I realized that next to CodePen it said SCSS, which I googled. I sorta get it but I don't know how to make this particular code work.
The 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>
The 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;
}
}
There is also an example of what I'm trying to achieve at CodePen: http://codepen.io/CoffeeCupDrummer/pen/FqChm
I thought maybe the problem was in my link syntax so I changed it to look like this, but that didn't work either. I tried style.css then switched to style.scss in hopes of fixing it.
<link rel="stylesheet" href="stylesheet/style.scss">
So my question is whats so different about SCSS and why can't I get it to work when it works just fine on CodePen?
844
The matter is that you have to compile your SCSS into CSS. There are no browsers that support Sass: you must compile it first with a Sass compiler and then link to the compiled CSS. Codepen does that for you automatically.
There are two common ways to compile Sass, both of them automatically compile your code whenever you make changes to it:
sass command line tool that comes with the Sass gem
It's worth noting that Codepen compiles using Compass, which I recommend using rather than the vanilla Sass compiler. In addition to providing extra functions and a library of useful mixins, it uses a configuration file (config.rb) file so that you just have to run the compass watch command to compile on the fly as you code.
This sounds like a bit of a hassle, but it's worth your while. Compass leverages Sass to a whole new level with it's library of mixins and an ecosystem of Compass extensions: grid systems, tools to make your site responsive, handy shortcuts and tools.
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
