我如何让 Sass 工作? [英] How do I make Sass work?

查看：50
本文介绍了我如何让 Sass 工作?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这可能是一个愚蠢的问题，但我偶然发现了这个很棒的 CodePen，我想对其进行调整和使用.我在自己的服务器上启动了一个快速演示，但没有用.然后我意识到 CodePen 旁边写着 SCSS，我用谷歌搜索了它.我有点明白，但我不知道如何使这个特定的代码工作.

html:

<div id="纸">

<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><图><img src="http://db.tt/FveX1nYo" alt=""></图>

SCSS:

body {边距:0；}#纸 {高度:120px；边距:0；背景:#303535；}.裹 {边距:0 自动；宽度:180px；高度:180px；边界半径:50%；框阴影:0 0 0 10px 白色；位置:相对；顶部:-80px；背景:#fff;一种 {边距:0；位置:绝对；.圆形的 {边界半径:50%；宽度:180px；高度:180px；框阴影:0 0 0 10px 白色；}}图 img {边距:0；-webkit-transition:前 0.4 秒缓出；-moz-transition:前 0.4 秒缓出；过渡:前 0.4 秒缓出；位置:绝对；顶部:200px；左:77px；}.二 {边距:0；-webkit-transition:前 0.4 秒缓出；-moz-transition:前 0.4 秒缓出；过渡:前 0.4 秒缓出；不透明度:0.8；顶部:0；}.三 {边距:0；-webkit-transition:前 0.4 秒缓出；-moz-transition:前 0.4 秒缓出；过渡:前 0.4 秒缓出；不透明度:0.8；顶部:0；}&:hover .one {不透明度:0.8；}&a.one:悬停{不透明度:1；z-索引:2；}:hover .二{顶部:300px；}&a.二:悬停{不透明度:1；z-索引:2；}&:悬停.三{顶部:150px；}&a.三:悬停{不透明度:1；z-索引:2；}&:悬停图img {顶部:500px；}}

还有一个我正在 CodePen 尝试实现的示例:http://codepen.io/CoffeeCupDrummer/pen/FqChm

我想问题可能出在我的链接语法上，所以我将其更改为如下所示，但这也不起作用.我尝试了 style.css 然后切换到 style.scss 希望能修复它.

所以我的问题是 SCSS 有什么不同，为什么我不能让它在 CodePen 上正常工作?

解决方案

问题是你必须把你的 SCSS 编译成 CSS.没有支持 Sass 的浏览器:你必须先用 Sass 编译器编译它，然后链接到编译后的 CSS.Codepen 会自动为您执行此操作.

如何编译Sass

有两种常见的编译 Sass 的方法，它们都会在您对代码进行更改时自动编译:

值得注意的是，Codepen 使用 Compass 进行编译，我建议使用它而不是普通的 Sass 编译器.除了提供额外的功能和有用的 mixin 库之外，它还使用一个配置文件 (config.rb) 文件，因此您只需运行 compass watch 命令即可在编写代码时即时编译.

这听起来有点麻烦，但值得您花时间.Compass 通过其 mixin 库和 Compass 扩展生态系统将 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:

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.

这篇关于我如何让 Sass 工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆