如何更改 scs？

Question

我正在学习 scss 并找到了这个示例：

https://github.com/jasonsanjose/bourbon-example

当我尝试更改 app.scss 文件使按钮的颜色变为绿色时，它并没有从红色变为：

@import "../bower_components/bourbon";
@import "partial";

* {
    font-family: $helvetica;
}

button {
    @include button(pill, green);
}

如何才能成功运行 index.html 页面？

Answer 1

您需要将 SASS 文件编译为 CSS 文件才能使用 Ruby..
如果您不想使用 Ruby 那么您需要下载第三方应用程序来为您编译代码。以下是您可以使用的一些应用程序：

CodeKit（付费）混合物（免费）
http://mixture.io/
Prepros（Paid/Also 可试用一个月）
https://prepros.io/

Answer 2

的确，您应该先将 SCSS 代码编译成 CSS。

要学习和理解 Sass 你可以使用 SassMeister 来编译你的 SCSS 代码：http://sassmeister.com/gist/59b634f15fb98d630173

此文件编译以下 SCSS 代码：

@import "bourbon/bourbon";
* {
    font-family: $helvetica;
}

button {
    @include button(pill, green);
}

以上应该编译成CSS代码如下：

* {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

button {
  border: 1px solid #082c08;
  border-color: #082c08 #021303 black;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 0 #04a301, 0 1px 2px 0 #b3b3b3;
  color: white;
  display: inline-block;
  font-size: 11px;
  font-weight: normal;
  line-height: 1;
  background-color: green;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, green), color-stop(100%, #004d0a));
  background-image: -webkit-linear-gradient(green, #004d0a);
  background-image: linear-gradient(green, #004d0a);
  padding: 5px 16px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 1px #052f08;
  background-clip: padding-box;
}
button:hover:not(:disabled) {
  border: 1px solid #021302;
  border-color: #021302 black black;
  box-shadow: inset 0 1px 0 0 #018f01;
  cursor: pointer;
  background-color: #006900;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #006900), color-stop(100%, #013007));
  background-image: -webkit-linear-gradient(#006900, #013007);
  background-image: linear-gradient(#006900, #013007);
  text-shadow: 0 -1px 1px #000f02;
  background-clip: padding-box;
}
button:active:not(:disabled) {
  background: #054809;
  border: 1px solid black;
  border-bottom: 1px solid black;
  box-shadow: inset 0 0 6px 3px #001203, 0 1px 0 0 #fff;
  text-shadow: 0 -1px 1px #011102;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

现在您应该可以将 green 更改为 red:

button {
    @include button(pill, red);
}

或者为你的颜色使用一个变量：

$color: red;
button {
    @include button(pill, $color);
}

我也认为你不需要 @import "partial"; 代码。

请注意，@include button 包含来自 Bourbon 代码的 mixin，该代码已使用 @import "bourbon/bourbon"; 导入 Mixins 可用于设置选择器的属性。例如下面的 SCSS 代码：

@mixin button($type,$color) {
background-color: $color;
}  

$color: red;
button {
      @include button(pill, $color);
 }

会编译成CSS代码如下：

button {
  background-color: red; }

How can I run the index.html page successfully?

您可以在控制台中通过运行以下命令使用 sass.js to compile Sass in browser. Do not use this method for production code. You can install the bourdon file with bower：

bower install bourbon

前面的命令将文件安装在 bower_components/bourbon 目录中。将此目录及其内容上传到您的文档根目录，并确保 @import "../bower_components/bourbon"; 指向此目录。

如何更改 scs？

how to change the scss?

html

sass

bourbon