Question

我对SASS和bootstrap相对较新。我在SASS中使用bootstrap并且在概念上有点挣扎。

我总是这样使用CSS：一个带有基本布局的基本CSS文件（例如base.css）。每个模板还包含一个不同的CSS文件（例如sitemap.css，team.css，news.css）。此CSS文件仅包含相应模板的各个部分。所以我可以覆盖以前文件中的定义。

在SASS中，所有内容都编译在一个文件中。结合bootstrap，我实际上一直在努力解决直到现在使用的概念。

每次我想在现有定义中添加新的CSS文件时，都会出错，因为我必须重新包含完整的bootstrap结构。但是如果我重新加入它，整个引导代码也会被写入附加文件（例如sitemap.css，team.css，news.css）。如果我在我的HTML树中包含这两个文件，则引导定义（如整个规范化块）定义两次或更多次。

我有这个设置：

- css
|-- source
| |-- base.scss
| |-- team.scss
| |-- vendors
| | |-- bootstrap...
└-- output
  |-- base.css
  └-- team.css

在base.scss中我包含了bootstrap的东西。我也需要team.scss中的bootstrap东西，但不是所有主要的东西，比如规范化的东西。

我如何实现这一目标？这是可能的还是我必须通过在body标签中添加一个css类来切换我的css需求（比如body.team）？但后来我必须将每个页面的CSS内容整合到一个文件中。这只螃蟹不是吗？

编辑稍微清理一下：这是在base.scss：

@import "settings/vars";
@import "vendors/bootstrap";
...
header {
    @extend .container;
    ...
    .contentbox {
        margin-top: $mainGap;
    }
    ...
}
...

，这是在team.scss：

header .contentbox {
    @extend .sr-only;
}

绝对清楚＆＃34; @extend .sr-only;＆＃34;因为缺少bootstrap而不能在team.scss中工作。但是如果我用

包含bootstrap

@import "vendors/bootstrap";

在team.scss的第一行，我会自动将所有标准的16kb引导程序添加到team.css中。但是，这些定义已经在base.css中。所以我会有一个可以预防的开销。

我想我知道没有办法说：＆＃34;嘿引导。我已经把你包括在base.scss中了。因此，您不必再将自己的整个主要定义写入team.scss。但我需要你，因为我喜欢你作为一个可用的框架。所以，无论如何，请向我提供功能和变量。＆＃34;。但也许呢？

Answer 1

在这种情况下我做的是使用Bootstrap和所有基本代码以及我自定义的base.scss编译_variables.scss。然后，如果我想添加team.scss，我只需要导入mixins和我需要在Bootstrap中使用的自定义变量。听起来很棒！

<强>但 ...

由于.sr-only和其他只是作为类而非SASS mixins提供，因此您不能@include，就像您可以使用.transition mixin一样。

所以，目前如果您使用SASS，您有两个选择：

使用您要扩展/重用的类导入Bootstrap模块

//contain the .sr-only definition
@import "vendors/bootstrap/_scaffolding"; 
@import "vendors/bootstrap/_variables";

header .contentbox {
    @extend .sr-only;
}

从Bootstrap源复制/粘贴类并对其进行扩展：

@import "vendors/bootstrap/_variables";

// Copy/Paste the .sr-only class to reuse, very un-DRY
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

header .contentbox {
  @extend .sr-only;
}

Answer 2

您在搜索的内容在Sass中被命名为 partial 我猜：

如果您要导入的SCSS或Sass文件但不想编译为CSS文件，则可以在文件名的开头添加下划线。这将告诉Sass不要将其编译为普通的CSS文件。然后，您可以在不使用下划线的情况下导入这些文件。

例如，您可能有_colors.scss。然后不会创建_colors.css文件，您可以
@import "colors";
和_colors.scss将被导入。

仅供参考，我们很少import option：@import (reference) "colors"

如何不将所有CSS与SASS和bootstrap

2 个答案: