在基本HTML/CSS站点上启用SASS

我想先看一下SASS。如何将基本CSS转换为SASS，这只是调整链接然后转换为.SASS扩展的一个例子。然后编辑SASS内容

刚刚得到一个简单的HTML/CSS站点来做一些测试。

---

我需要Ruby或任何额外的服务器配置才能安装SASS吗？

这项工作有几个工具可供您使用

示例CSS：

.alert {color: red;}

SCSS：

---

您要先安装sass！如果您在mac上，请在终端上输入以下内容：

sudo gem install sass

安装后，转到项目文件夹（在终端中），并创建扩展名为.scss的文件

然后，在终端中输入以下内容：

sass --watch styles.scss:styles.css 

（styles.scss是scss/sass文件的名称，无论您如何命名）

它的作用是将.scss文件中的所有sass代码保存到普通的.css文件中。然后在html中，将其链接到.css文件，而不是.scss文件。（因为.css文件包含.scss文件中的所有内容，但已转换为它可以读取的格式）

---

希望有帮助

CSS是从SASS编译而来的，因此您需要某种类型的编译器。您可以按照上面@matmik的指示安装SASS gem，也可以在Mac上使用CodeKit之类的工具。CodeKit为命令行提供了一个GUI，如果您是初学者，这可能会更好

SASS预编译的示例如下所示：

.intro {
  padding: 1% 1.5% 2%;
  background-color: #555;
  text-align: center;
  h1 {
    color: #fff;
    font-weight: 300;
  }
  p {
    color: #fff;
    font-weight: 300;
    width: 50%;
    margin: 0 auto 15px auto;
  }
}

注意，您可以嵌套元素，这大大减少了手工编写的代码量。这只是SASS的一大优点。无论如何，编译后的CSS是这样的：

.intro {
  padding: 1% 1.5% 2%;
  background-color: #555;
  text-align: center;
}
.intro h1 {
  color: #fff;
  font-weight: 300;
}
.intro p {
  color: #fff;
  font-weight: 300;
  width: 50%;
  margin: 0 auto 15px auto;
}

---

我在Windows PC上，所以我假设该命令可以在本地工作，但如果我要安装SASS，我的主机将需要SSH。因此，没有shell访问的标准web托管将不起作用（无法手动安装/构建文件？）如果您这样做，那么web托管与您的sass文件无关。上载文件时，只需上载.css文件，因为它已在本地从sass转换而来。您正在编写sass，并使用sass--watch命令将其自动转换为normal.css。您可以在此处阅读有关如何在windows计算机上安装sass的更多信息：因此，请将我的所有CSS代码放在scss文件中（它正在工作，但我在我的中链接到的style.CSS是空的？是的，您的所有CSS代码都放在.scss文件中（您可以在此文件中使用sass规则），并且您的style.css文件是空白的，直到您使用sass--watch styles.scss:styles.css命令，该命令会将您在scss文件中编写的内容转换为空的css文件！好的，谢谢matmik。这很有意义，最后，如果我的主机没有SSH，我假设sass不是一个选项？

.intro {
  padding: 1% 1.5% 2%;
  background-color: #555;
  text-align: center;
}
.intro h1 {
  color: #fff;
  font-weight: 300;
}
.intro p {
  color: #fff;
  font-weight: 300;
  width: 50%;
  margin: 0 auto 15px auto;
}