我如何让Sass工作？

Question

我如何让Sass工作？

这可能是一个愚蠢的问题,但我偶然发现了我想要调整和使用的这个令人敬畏的CodePen.我在自己的服务器上启动了一个快速演示,但它没有用.然后我意识到在CodePen旁边它说SCSS,我用Google搜索.我得到了它,但我不知道如何使这个特定的代码工作.

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>

Run Code Online (Sandbox Code Playgroud)

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;     
  }
}

Run Code Online (Sandbox Code Playgroud)

还有一个我想在CodePen上实现的例子:http://codepen.io/CoffeeCupDrummer/pen/FqChm

我想也许问题出在我的链接语法中,所以我将其改为看起来像这样,但这也不起作用.我试过style.css然后切换到style.scss希望修复它.

<link rel="stylesheet" href="stylesheet/style.scss">

Run Code Online (Sandbox Code Playgroud)

所以我的问题是SCSS有什么不同,为什么我不能在CodePen上运行得很好的时候让它工作？

Answer 1

And*_*aus 6

问题是你必须将你的SCSS编译成CSS.没有支持Sass的浏览器:您必须首先使用Sass编译器对其进行编译,然后链接到已编译的CSS.Codepen会自动为您完成这项工作.

如何编译Sass

编译Sass有两种常用方法,每当您对其进行更改时,它们都会自动编译代码:

使用Sass gemsass附带的命令行工具
使用一些GUI工具,如CodeKit或Compass.App

值得注意的是,Codepen使用Compass编译,我建议使用Compass,而不是使用vanilla Sass编译器.除了提供额外的函数和有用的mixin库之外,它还使用配置文件(config.rb)文件,这样您只需运行compass watch命令即可在编码时动态编译.

这听起来有点麻烦,但值得你这么做.Compass利用它的mixins库和Compass扩展生态系统将Sass提升到一个全新的水平:网格系统,使您的站点响应的工具,方便的快捷方式和工具.

归档时间：	12 年，6 月前
查看次数：	4206 次
最近记录：	9 年，7 月前