简化CSS代码
如何简化此代码?简化CSS代码
#user_panel .subscribe,
#user_panel .faves,
#user_panel .tags,
#user_panel .title,
#user_panel .calendar a,
#user_panel .item .content
{
color:#fc0;
}
我不想一直写#user_panel。无论如何?
LESS(少CSS)?让你的生活变得如此简单!
#user_panel {
.subscribe, .faves, .tags, .title, .calendar a, .item .content {
color:#fc0;
}
}
编辑:根据评论,LESS仅在使用Ruby时有用。这是完全错误的。 LESS是用Ruby编写的(不要与混淆,只与兼容),并附带一个命令行工具less2css
来将*.less
文件转换为*.css
文件。
+1为链接,之前没有听说过,但有想写一些类似的年龄。 – Paolo 2010-02-15 13:44:10
+1,用于谈论LESS – marcgg 2010-02-15 13:47:16
仅在使用Ruby时有用 – graphicdivine 2010-02-15 13:48:00
我要去最常见的答案,因为你没有给我一个理由不:-)
#user_panel
{
color:#fc0;
}
的另一种方法是每个元素上添加额外的类,然后引用多种类型,当你需要它,比如:
.highlight
{
color:#fc0;
}
<div id="user_panel">
<span class="subscribe highlight"></span>
<span class="tags highlight"></span>
</div>
也许只有当该项目具有此风格需要应用的某些类时。 – Ikke 2010-02-15 13:45:01
你可以给每个那些所谓。用户用面板控制的第二类的元素,改变CSS来此:
#user_panel .user-panel-control
{
color:#fc0;
}
的HTML应该是这样的:
<div id="user_panel">
<span class='subscribe user-panel-control'>This is a user panel control</span>
</div>
约短那是因为你会得到。你可以重命名user_panel,但是你应该尽量保持你的标识符的描述性,以使代码更容易维护。显而易见的问题是,你的选择器甚至需要#user_panel部分吗?
潜在的你可以这样做:
#user_panel *{ color: #fc0 }
还是作为乔恩低于。
不,它不合适,thnx – swamprunner7 2010-02-15 13:55:20
使用像#up一样短的名称? – tur1ng 2010-02-15 13:39:03