个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
假设我在 Sass 中有一个占位符选择器。在该选择器中，我编写了一些样式，显然我需要使用 Modernizr 检查功能。
问题似乎是您要使用 modernizr 提供的 .no-generatedcontent 或 .generatedcontent 类，但它们无法使用，因为一旦占位符选择器完成工作，它们将位于错误的层次结构位置。
我能想到的解决这个问题的唯一方法是将它们放在占位符选择器之外，但这会弄乱我的样式，而 Sass 旨在帮助使我的样式更有条理。
关于如何解决这个问题有什么想法吗？
这是我的意思的一个例子:
<html>一旦 modernizr 完成它的工作，在我的页面顶部标记:
<html class="js flexbox flexboxlegacy canvas canvastext webgl touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths wf-allumistd-n1-active wf-freightsanspro-n3-active wf-automate-n4-active wf-automate-n7-active wf-active">
现在，假设我有一个名为 %styles 的占位符选择器
%styles {
li {
this: this;
}
.no-generatedcontent li {
this: that;
}
}
现在，我将在我的代码中的某处使用这个占位符，如下所示:
.main {
section {
.box-area {
color: red;
@extend %styles;
}
}
}
在我看来，显然 modernizr 类位于错误的位置，因此无法产生任何效果。这是一种层次结构问题。我可以通过将它放在占位符之外来解决它，但是我必须单独 @extend 它并且我的 sass 代码变得一团糟，这是我开始使用 sass 来保持我的样式整洁的主要原因。
有什么想法吗？
最佳答案
萨斯:
%styles {
li {
border: 1px solid red;
.no-generatedcontent & { // note the location of the & here
border: 1px solid red;
}
}
}
.main {
section {
.box-area {
color: red;
@extend %styles;
}
}
}
CSS:
.main section .box-area li {
border: 1px solid red; }
.no-generatedcontent .main section .box-area li, .main section .no-generatedcontent .box-area li {
border: 1px solid red;
background: #CCC; }
.main section .box-area {
color: red; }
使用 @extend 时似乎有一个错误(查看它如何在 .no-generatedcontent 行上生成 2 个选择器？Sass 3.2.3)。如果我改用 mixin，则不会发生这种情况:
.main section .box-area {
color: red; }
.main section .box-area li {
border: 1px solid red; }
.no-generatedcontent .main section .box-area li {
border: 1px solid red;
background: #CCC; }
关于css - Sass 占位符选择器和 Modernizr .no 类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13453674/
29
4
0
我的 DateTime 对象使用 DateTime.Now 分配了本地时间。我想知道一旦夏令时开始/结束，这个对象是否会给出正确的当前本地时间。或者我需要解决方法吗？ 最佳答案 是的，DateTime
假设我需要“特定类别中可用的项目数量”与“所有项目的数量”的比率。请考虑这样的 MySQL 表: /* mysql> select * from Item; +----+------------+--
我有这张 table http://codepen.io/MetCastle/pen/lxceL我想使用 jQuery 根据 input type="number" 隐藏/显示列。表示整个列: Pro
想要制作一个看起来像这样的网格，其中 div/section 以百分比表示。 margin 在任何地方都是一样的。 http://www.ladda-upp.se/bilder/giefekcmgwm
这将返回 1(又名 TRUE) SELECT DATE_SUB(NOW(), INTERVAL 24*100 HOUR) = DATE_SUB(NOW(), INTERVAL 100 DAY); 10
我一直在尝试在 UIScrollView 中获取 UIView 的转换后的 CGRect。如果我不放大它就可以正常工作，但是一旦我放大，新的 CGRect 就会发生变化。这是让我接近的代码: CGFl
对于家庭作业，我需要在不使用内置模 (%) 运算符的情况下返回 num1 除以 num2 后的余数。我能够通过以下代码让大多数测试通过，但我仍然坚持如何解释给定数字的 -/+ 符号。我需要保留 num
我用 Javascript 创建了一个倒数计时器；它是成功的，期望未完成。事实上，从数学上讲，它是正确的，但是谷歌浏览器的浏览器设置“暂停”(因为没有更好的术语)SetInterval/Timeout
我有两个 的，每个都设置为其容器宽度的 45%。有没有办法使 居中？使得它们在容器的左右两侧有相同的空间，并且它们之间也有空间。 一开始我只是做了每个 50% 并且有 padding: 0px 2
我是一名优秀的程序员,十分优秀！