使用任何 CSS 编译器(Sass、Less)生成选择器

发布于 2024-08-31 14:07:17 字数 1436 浏览 9 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

妳是的陽光 2024-09-07 14:07:17

所以我在文档中进行了一些挖掘,并进行了一些实验,Sass(让我松了一口气)支持这一点,尽管我不认为 LESS 这样做(这就是为什么它被放弃而支持 Sass)。

您可以使用 & 符号作为指向定义中使用的选择器的指针,并且嵌套声明中该 & 符号的位置不必位于前面,您可以将选择器放在它之前。例如,您可以使用条件 IE 标签以不使用 hack 的方式在同一样式表中定位 IE。以下使用 SCSS 表示法(但应该与缩进表示法一起正常工作):

@mixin inline-block {

// Cross browser implementation of the inline-block attribute

  display: inline-block;
  body.ie6 & { display: inline; }
  body.ie7 & { display: inline; }

}

您所要做的就是将其放在您想要的任何内容上:

#foo { @include inline-block; }

它将跨浏览器生成/管理所有内联块内容:

#foo { display: inline-block; }
body.ie6 #foo { display: inline; }
body.ie7 #foo { display: inline; }

语义方式处理跨浏览器问题,不再需要处理管理两个不同样式文件的繁琐方法(这对我来说很愚蠢),不再有碍眼的代码块。

编辑:当然,该功能是在旧文档中说明的,而不是在新文档中说明的,这就是我找不到它的原因。

So I did some digging in the documentation, and some experimentation, and Sass (to my relief) supports this, though I don't think LESS does (which is why it's getting dropped in favor of Sass).

You can use the ampersand as a pointer to the selector you used in the definition, and the position of that ampersand in a nested declaration doesn't have to be at the front, you can put selectors before it. For instance, you can use conditional IE tags on to target IE in the same stylesheet in a way that doesn't use hacks. The following uses the SCSS notation (but should work fine with the indentation notation):

@mixin inline-block {

// Cross browser implementation of the inline-block attribute

  display: inline-block;
  body.ie6 & { display: inline; }
  body.ie7 & { display: inline; }

}

And all you have to do is drop this on anything you want:

#foo { @include inline-block; }

and it will generate/manage all the your inline-block stuff cross browser:

#foo { display: inline-block; }
body.ie6 #foo { display: inline; }
body.ie7 #foo { display: inline; }

Semantic way of handling cross-browser issues, no more having to deal with the cumbersome method of managing 2 different files for styles (which is asinine to me), no more code block eyesores.

Edit: Of course that functionality was stated in the old documentation, not in the new, which is why I couldn't find it.

痴意少年 2024-09-07 14:07:17

inline-block 的跨浏览器实现由 compass 提供,它是一个构建在 sass 之上的框架:

http://compass-style.org/docs/reference/compass/css3/inline_block/#mixin-inline-block-scss

A cross-browser implementation of inline-block is provided by compass, a framework built on top of sass:

http://compass-style.org/docs/reference/compass/css3/inline_block/#mixin-inline-block-scss

生活了然无味 2024-09-07 14:07:17

http://jsfiddle.net/zsitro/G74pT/

在这里您可以看到内联块的跨浏览器解决方案。
简单又简短。

上面的示例不会为 IE 中的元素提供布局。例如,您需要缩放。

http://jsfiddle.net/zsitro/G74pT/

Here you van see the crossbrowser solution for inline blocks.
simple and short.

Above example will not give a layout to the element in IE. You need zoom for example.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文