Compass CSS 框架 - 使用 Bootstrap 和 SASS [英] Compass CSS framework - using Bootstrap with SASS

问题描述

我想将 Bootstrap 与 SASS 结合使用，但我找不到任何教程或解释如何将 Bootstrap 与 SASS 结合使用.我唯一发现的是通过 ruby​​ gem 安装:

I want to use Bootstrap with SASS, but I can't find any tutorials or explanation how one can use Bootstrap with SASS. The only thing I find is installatio trough a ruby gem:

compass create my-new-project -r bootstrap-sass --using bootstrap

compass create my-new-project -r bootstrap-sass --using bootstrap

这会在我的文件夹中创建以下树:

Which creates the following tree in my folder:

这是否足以让 Bootstrap 使用自己的 Grid，因为我没有看到 bootstrap.scss 文件，也没有任何与 Grid 相关的文件.但是，我在styles.css 文件中找到了网格类和所有内容.是不是有一个 bootstrap.scss 文件包含所有的 mixin 和其他所有东西?我在哪里可以找到 SASS 的 Bootstrap 混合的更广泛的使用，这里简要描述:

Is this enough for Bootstrap to use its own Grid, because I don't see the bootstrap.scss file, neither any Grid related files. However, I find the grid classes and all in a styles.css file. Isn't there a bootstrap.scss file that has all the mixins and everything else? And where can I find a more extended use of SASS's Bootstrap mixins, which are described here briefly:

http://www.hongkiat.com/blog/bootstrap-and-sass/

先谢谢大家！我真的找不到任何关于我的问题的信息.

Thank You all in advance! I really can't find nothing on my problem.

推荐答案

(我在回答中使用了 .sass 文件，但它应该适用于 .scss 文件)

(I'm using .sass files in my answer, but it should apply to .scss files, too)

难道没有一个 bootstrap.scss 文件包含所有的 mixin 和其他所有东西吗?

Isn't there a bootstrap.scss file that has all the mixins and everything else?

是的，有.这是生成的 styles.sass 文件:

Yes, there is. Here's the generated styles.sass file:

// Import Bootstrap Compass integration
@import "bootstrap-compass"
// Import custom Bootstrap variables
@import "bootstrap-variables"
// Import Bootstrap for Sass
@import "bootstrap"

bootstap_variables 指的是生成的 _bootstrap-variables.sass 文件在您的项目树中，而 bootstrap-compass 和 bootstrap 是从gem 的 stylesheets 目录.

bootstap_variables refers to the generated _bootstrap-variables.sass file in your project tree, whereas bootstrap-compass and bootstrap are imported from the gem's stylesheets directory.

后者 导入所有其他 Bootstrap文件，包括网格:

The latter imports all other Bootstrap files, including the grid:

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
@import "bootstrap/glyphicons";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";        # <-- here it is
...

这篇关于Compass CSS 框架 - 使用 Bootstrap 和 SASS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！