设置 Bootstrap 3 Sass 版本，不可能吗？答案

【问题标题】：Setting Up a Bootsrap 3 Sass version, impossible?设置 Bootstrap 3 Sass 版本，不可能吗？
【发布时间】：2014-06-29 14:54:37
【问题描述】：

在为几个小项目使用 Foundation 5 后，我想切换到 Bootstrap 3 的 Sass 版本，但我卡在设置中，无法在互联网上找到“操作方法”...

我已经下载了 bootstrap-sass-master，安装了 ruby 和 compass。然后我将 Ruby 命令提示符与“compass create MyProject”一起使用。然后我将 bootstrap-sass-master\vendor\assets 中的所有内容复制到由 compass 创建的 MyProject 文件夹中。然后我在该文件夹中创建了一个 index.html，其中包含来自引导站点的模板中的代码。头部是这样的：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="/stylesheets/screen.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="starter-template.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

基本上我遵循了这个两年前的例子： http://webdesign.tutsplus.com/articles/quick-tip-working-with-sass-and-bootstrap--webdesign-9153

但现在我卡住了，因为我没有 style.css，只有一个 screen.css，但是使用那个文件它不起作用...... 我的 index.html 显示时没有应用任何样式。

你能帮我吗，我确定我做错了什么设置一切......

【问题讨论】：

标签： html css twitter-bootstrap sass compass-sass

【解决方案1】：

首先你必须提供一个接入点。

使用 compass 你将编译 sass 文件，最后你会得到一个 .css 文件。

所以，假设您的目标是拥有一个 main.css 文件。

你必须用 compass 编译它并提供这个。在 main.scss 上，您应该导入所有引导程序 scss。您需要调用 bootstrap.scss ，该文件将负责导入所有需要的文件。（观看路线）

您可以控制所需的数量。并且始终记得在引导程序的底部编写您的代码，以便您可以覆盖它。

还可以查看 _variables.scss，这是您修改引导程序的地方。建议在导入 bootstrap 之前创建另一个 _variables.scss，因此 bootstrap 将使用您的变量而不是默认变量。

希望对你有帮助。

【讨论】：