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/
预备（付费/也可用于一个月的试用）
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包含来自波旁代码的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; }

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

您可以使用sass.js在浏览器中编译Sass。不要将此方法用于生产代码。您可以在控制台中运行以下命令，使用bower安装bourdon文件：

bower安装波本威士忌

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

如何改变scss？

2 个答案: