Question

由于我们在Sass中编写源CSS，因此我们所有的媒体查询都是可以通过Sass mixins获得：

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

现在，我正在使用SASS作为我的CSS，我也在使用Bootstrap，但我只是通过将它们包含在HTML中来合并两者。

当我尝试在我的SASS文件中执行此类操作时：

@include media-breakpoint-up(xl) { ... }

我收到错误：

未定义的Mixin

我想这是因为我的SASS文件不知道Bootstrap，因为我只在HTML中包含Bootstrap。

如何将Bootstrap 4包含在我的SASS文件中，作为部分？（我想这就是我要做的......）

PS：我正在使用Bootstrap 4，我更喜欢不需要Bower或RubyGems等的解决方案，而只是下载Bootstrap文件并以老式的方式将其包含在我的SASS中 - 如果有可能的话所有？

Answer 1

要在SCSS中使用mixin，您必须先@import 'file_with_mixin_definitions.scss'; mixin的定义如下：

@mixin transition($type, $time) {
  -o-transition: $type $time linear;
  -ms-transition: $type $time linear;
  -moz-transition: $type $time linear;
  -webkit-transition: $type $time linear;
  transition: $type $time linear;
  &:hover{background: red}
}

定义通常存储在名称中带下划线的scss文件中，例如。 _globals.scss因为带有下划线的文件默认情况下不会被编译为CSS并且是为导入编写的。或者您只需搜索项目文件，@mixin s。

Answer 2

下载完整的源代码，然后查看scss / mixins。文件_breakpoints.scss是您应该拥有的文件。我做同样的事情，我下载源代码并在我自己编译的CSS中包含我需要的东西。

// @extend
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

// @mixin
@mixin message($color) {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  border-color: $color;
}

.success { @include message(green); }

.error { @include message(red); }

.warning { @include message(yellow); }

如何在SASS中使用Bootstrap 4媒体断点？

2 个答案: