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

Question

我最近一直在 Codepen 上进行试验，我想知道如何自己实现网站上显示的代码。我意识到 Codepen 上使用的大多数格式都不是纯“.css”。我了解到这是一种名为“.scss”的新东西。我想知道从哪里开始，是否有人可以帮助我理解 .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

.scss代码是用SASS写的代码，基本上是CSS.

的扩展

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

Sass 是 Ruby gem，因此您需要安装 ruby 才能安装 SASS（获取 ruby here) 安装完成后，只需在终端中运行 gem install sass（例如 windows 的命令行）

您可以通过键入 sass --watch sass_folder:stylesheets_folder 来完成此操作，其中 sass_folder 是保存 sass 文件的文件夹（文件扩展名必须是 .sass) 并且 stylesheets_folder 是您的输出文件夹。
添加 --watch 意味着它会监视文件夹是否有任何进一步的更改，并在您保存它们后立即编译它们。

祝你好运。

Answer 2

SASS还是CSS

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

SASS 就像 "CSS on steroids" 一样，您可以在其中使用循环、混入和大量很酷的东西。你写 SASS，然后将它编译成 CSS，然后就到了。

获取和理解SASS

要开始，您必须从 http://sass-lang.com/install, if you're not familiar with command line you can install a separate app such as Scout or Koala 安装 SASS（sass-lang 安装页面上有更多信息）。

然后你基本上设置 application/sass 来跟踪文件 x (SASS) 并将你写入的内容输出到文件 y (CSS)，每次你更改文件 x 中的内容它正在重新编译并移至 y。

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

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

你的动画解释

关于你的第二个问题 - 提供的示例只是一个简单的 CSS3 animation 使用 @keyframes 和 animation 你可以在 css 中做到这一点 - 并且你没有'不需要 SASS。

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

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

How to implement .SCSS on my own website?

html

css

sass

web

SASS还是CSS

获取和理解SASS

你的动画解释