Question

我最近刚在Codepen上进行过实验，我想知道如何实现我自己的网站上显示的代码。我意识到Codepen上使用的大多数格式都不是纯粹的＆＃34; .css＆＃34;。我学到了一些名为＆＃34; .scss＆＃34;的新东西。我想知道从哪里开始，如果有人可以帮助我理解.scss是如何工作的。特别是This

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就像＆＃34;类固醇的CSS＆＃34;你可以在哪里使用循环，mixins和很多很酷的东西。你在SASS中编写，然后将其编译为CSS，就在这里。

获取＆amp;了解SASS

为了让您前进，您必须从http://sass-lang.com/install安装SASS，如果您不熟悉命令行，则可以安装单独的应用，例如Scout或Koala（ sass-lang安装页面上还有更多内容）。

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

虽然你必须学习SASS语法，但如果你已经知道CSS恕我直言，它会非常清晰和容易。

为了让你更加困惑，还有Compass这是一个非常酷的基于SASS的框架，一旦你掌握了SASS，你一定要试一试。

你的动画解释了

关于您的第二个问题 - 提供的示例只是一个简单的CSS3 animation使用@keyframes和animation您可以在css中执行此操作，而您不需要SASS这一点。

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

Answer 2

.scss代码是用SASS编写的代码，基本上是CSS的扩展。

有关如何安装的更多信息和帮助，请参阅http://sass-lang.com/install，但我将从下面开始...

Sass是一个Ruby宝石，因此您需要安装ruby来安装SASS（获取ruby here）安装完成后，只需在终端中运行gem install sass（例如Windows的命令行。）

您可以通过输入sass --watch sass_folder:stylesheets_folder来执行此操作，其中sass_folder是保存sass文件的文件夹（文件扩展名必须为.sass），stylesheets_folder是输出文件夹。
将--watch添加到它意味着它会查看文件夹以进行任何进一步的更改，并在保存后立即编译它们。

祝你好运。

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

2 个答案:

SASS仍然是CSS

获取＆amp;了解SASS

你的动画解释了