用Sass实现Bootstrap的box-sizing？

6 浏览
0 Comments

用Sass实现Bootstrap的box-sizing？

阅读了这篇文章：在 Twitter Bootstrap 2.x 中使用 box-sizing:border-box，我们能否轻松实现而不破坏一切？

我决定尝试在我下载的一个 sass 仓库中使用 box-sizing，这里是下载链接：

https://github.com/thomas-mcdonald/bootstrap-sass。

我尝试添加以下代码：

* {
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
 }

这个方法很有效，但是它会破坏我的输入表单的高度。在上述文章的评论中提到了在输入表单中使用 box-sizing content 的方法。但显然这是在 less 而不是 sass 中的代码：

*, *:before, *:after {
.box-sizing(border-box);
}
input {
.box-sizing(content-box);
}

请问有人知道如何使这个工作，以便我的输入表单被挤压？

0

1 答案

0 Comments

Bootstrap是一个流行的前端开发框架，它提供了丰富的样式和组件，可以帮助开发者快速构建网站和应用程序。然而，在使用Bootstrap时，有时会遇到一些问题，比如在使用Sass文件时如何使用Bootstrap的box-sizing样式。

问题的出现原因是在使用Sass文件时，不能直接使用Less代码。因此，需要将Less代码转换为Sass代码。

解决方法是使用以下代码：

*
  &:before, &:after
    +box-sizing(border-box)
input
  +box-sizing(content-box)

这段代码将Less代码转换为Sass代码。如果Less代码可以正常工作，那么这段Sass代码肯定也可以正常工作。

出现问题的原因是我在代码中多加了一个大括号。去除多余的大括号即可解决问题。

0