如何在自己的网站上实施.SCSS？

Question

我刚刚在Codepen上进行了实验，我想知道如何才能自己实现一个显示在网站上的代码。我意识到Codepen上使用的大多数格式都不是纯“ .css”。我了解到这是一个新的名为“ .scss”的东西。我想知道从哪里开始，是否有人可以帮助我了解.scss的工作原理。特别是这个

body{
  background:black;
  font-family: 'Varela', sans-serif;
}

.glitch{
  color:white;
  font-size:0px;
  position:relative;
  width:268px;
  height:654px;
  margin:0 auto;
  text-indent:-999em;
  background:transparent url(http://cdn.hiphopwired.com/wp-content/uploads/2013/09/Vanellope-Von-Scweetz-wreck-it-ralph.png) center center no-repeat;
}
@keyframes noise-anim{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(654)+px,9999px,random(654)+px,0);
    }
  }
}
.glitch:after{
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  left:2px;
  top:0;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim 2s infinite linear alternate-reverse;
  background:inherit;
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}

@keyframes noise-anim-2{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}

.glitch:before{
  content: '';
  width:100%;
  height:100%;
  position:absolute;
  left:-2px;
  top:0;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim-2 3s infinite linear alternate-reverse;
  background:inherit;
  -webkit-filter: hue-rotate(300deg);
  filter: hue-rotate(300deg);
}

Answer 1

SASS仍然是CSS

好的，直截了当-您所看到的仍然是CSS，但是它是用SASS编写的，然后编译回CSS。

SASS就像“类固醇上的CSS”一样，您可以在其中使用循环，mixin和大量有趣的东西。您用SASS编写，然后将其编译为CSS，就可以了。

了解和了解SASS

要开始使用，您必须从http://sass-lang.com/install安装SASS ，如果您不熟悉命令行，则可以安装单独的应用程序，例如Scout或Koala（有关sass-lang install的更多信息页）。

然后，您基本上将应用程序/ ass设置为跟踪文件x（SASS）并输出写入文件y（CSS）的内容，每次更改文件x中的内容时，它都会重新编译并移至y。

虽然您将必须学习SASS语法，但是如果您已经了解CSS IMHO，那么它就非常简单明了。

更让您感到困惑的是，还有Compass，它是一个非常不错的基于SASS的框架，一旦掌握了SASS，您肯定应该尝试一下。

您的动画说明

关于你的第二个问题-所提供的例子只是一个简单的CSS3动画使用@keyframes和animation您只能在CSS-做到这一点，你不需要上海社会科学院为。

这是您的示例基本上是一些CSS代码的证明：http : //jsfiddle.net/ypq7aost/（请注意，这是纯CSS！）