gpt4 book ai didi

html - CSS Style类类继承解决方法

转载 作者:太空宇宙 更新时间:2023-11-04 14:09:01 25 4
gpt4 key购买 nike

这是我在这里看到的一个问题,但从来没有关注过这个问题。

现代网络开发的基石之一是设计和结构的分离。 CSS Zen Garden 是这条道路上的一个很好的展示和布道者。

但是,新趋势是响应性,而这个基石被搁置一旁。像 Zurb Foundation 和 Twitter Bootstrap 这样的框架非常棒,但它们迫使程序员在他的结构中添加样式。如果我在我的 HTML 代码上写 column-4grid-xs-4,我就是在明确地谈论那里的设计。

理想情况下,我会使用如下代码编写一个 CSS 文件:

.header-top {
inherit "small-6 medium-4 columns";
}

那是不可能的,不支持。

一个可能的解决方法是将我的类添加到框架的 CSS 文件中。这很容易,但是

  1. 让我接触框架文件,这让升级变得痛苦;
  2. 结果可能会非常困惑。

问题是:我如何使用像 Foundation 和 Bootstrap 这样的框架,将设计和结构分开,充分利用它们的响应类?

最佳答案

如果您愿意重新考虑您对编译 CSS 的立场,我相信 Foundation 做了很多尝试并为您提供两全其美的方法:一个您无需自己编写的网格,同时仍然使用语义类。

如果您向下滚动 Foundation Docs 上的任何页面通常有一个“使用 Sass 自定义”部分,它为您提供 SCSS 混入,使您自己的类具有与 Foundation 的内置表示类相同的能力。

.header-top {
@include grid-column(6);
}

即使没有提供 mixin 和像 Foundation 这样的框架,SCSS 也使您能够像在您的问题中一样扩展其他类:

.header-top {
@extend .small-6;
@extend .medium-4;
@extend .columns;
}

在这种特殊情况下,我不确定您是否应该@extend 现有类或@include grid-column 连同media queries .我只用过之前版本的 Foundation,文档还有些欠缺,但基本原理已经有了。 :)

关于html - CSS Style类类继承解决方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20923874/

25 4 0
文章推荐: c++ - native c++ 中是否有等效的 XSD2Code?
文章推荐: java - 将 jsp 页面与其他 URL 内容平铺
文章推荐: javascript - JQuery IE
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com