sass - 如何使用CDN在bootstrap 4中创建新的断点？

发布于 2020-04-09 23:53:28

我使用BootstrapCDN。用sass编写并由gulp构建的其他样式。我需要创建自己的Breakpionts。如果使用CDN，可以制作它们吗？我不知道该怎么做。我必须创建这些断点：

--breakpoint-xxxs: 0;
--breakpoint-xxs: 320px;
--breakpoint-xs: 568px;
--breakpoint-sm: 667px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-xxl: 1440px;
--breakpoint-xxxl: 1600px;

我想得到这样的东西：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
	<div class="row">
		<div class="col col-xxxs-1 col-xxs-2 col-xs-3 col-sm-4 col-md-5 col-lg-6 col-xl-7 col-xxl-8 col-xxxl-9">
			<div style="height:100vh;background:purple">text</div>
		</div><!--col-->
	</div><!--.row-->
</div><!--.container-->

我找到了手册，正在尝试这样做：

$grid-breakpoints: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
)  !default;

$container-max-widths: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
) !default;

:root {
  --breakpoint-xxxs: 0;
  --breakpoint-xxs: 320px;
  --breakpoint-xs: 568px;
  --breakpoint-sm: 667px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1440px;
  --breakpoint-xxxl: 1600px;
}

但是它不会产生结果，并且会产生错误：

非法嵌套：变量声明下不得嵌套任何内容。

Codepen mcve。

我做错了什么？
预先感谢您的帮助。

UPD：如果不可能的话...还有其他选择吗？我可以轻松地编辑代码以使用断点模拟引导网格吗？

UPD2：我通过@ aer0修复了这些错误：

$grid-breakpoints: (xxxs: 0, xxs: 320px, xs: 568px, sm: 667px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px, xxxl: 1600px)!default

$container-max-widths: (xxxs: 0, xxs: 320px, xs: 568px, sm: 667px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px, xxxl: 1600px)!default

\:root
  --breakpoint-xxxs: 0
  --breakpoint-xxs: 320px
  --breakpoint-xs: 568px
  --breakpoint-sm: 667px
  --breakpoint-md: 768px
  --breakpoint-lg: 992px
  --breakpoint-xl: 1200px
  --breakpoint-xxl: 1440px
  --breakpoint-xxxl: 1600px

但这不能解决我的问题。

提问者

kizoso

被浏览

查看英文版

查看原文

/*! * Bootstrap Grid v4.0.0 (https://getbootstrap.com) * Copyright 2011-2018 The Bootstrap Authors * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ @at-root { @-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix } html { box-sizing: border-box; -ms-overflow-style: scrollbar; } *, *::before, *::after { box-sizing: inherit; } @import "functions"; @import "variables"; @import "mixins/breakpoints"; @import "mixins/grid-framework"; @import "mixins/grid"; @import "grid"; @import "utilities/display"; @import "utilities/flex";

Codeply-er 2018-02-26 00:07:52

您对此进行了研究，尽管我认为您的问题是从CDN而不是使用SASS的意思。这是使用SASS的解决方案（并非完全来自CDN）。这不是自定义Bootstrap的正确方法，因为它会更改默认断点值。正确的方法是@import bootstrap，然后在您自己的custom.scss中覆盖变量/映射，此答案中已对此进行了解释

Codeply-er 2018-02-26 01:09:34

您会发现最小的断点不起作用，并且自定义这种方式时，所有支持的网格实用程序类（显示，间距，flexbox等）都不会起作用。

kizoso 2018-02-26 11:45:51

@ZimSystem，在文章的开头，我写道我使用sass

kizoso 2018-02-26 11:50:22

@ZimSystem，您对.xxxs类是正确的。因为在myxin中，最小的大小会删除前缀。我修复了它，用html代替col-xxxs-1，我写了col-1。

sass - 如何使用CDN在bootstrap 4中创建新的断点？

相关问题

热门github