How do I make Sass work?

sass

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?

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.

How to compile Sass

There are two common ways to compile Sass, both of them automatically compile your code whenever you make changes to it:

Use the sass command line tool that comes with the Sass gem
Use some GUI tool like CodeKit or Compass.App

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.

How do I make Sass work?

How to compile Sass

Related

Recent Posts