使用CSS创建抽象
avi*_*avi 9 html css html5 css3 twitter-bootstrap
我不确定这是正确的标题,如果不是,请随时更改它.我不是母语为英语的人,所以我会尽力在图片的帮助下解释:
让我们假设,我有一个普通的HTML文件.该文件使用按钮并使用一些UI库(如Yahoo Pure).但是我没有使用Pure的类,而是使用我自己的类,让我们调用它myButton,然后使用Pure CSS(或任何其他类).但是怎么样？
在这里,我试图创建一个抽象层,以便我的css文件可以使用一些不同的UI库(无论是bootstrap,纯粹还是基础),代码仍然可以工作.
如果没有这个解决方案,我会这样做(我的初始代码是):
<html>
<head>
<link rel="stylesheet" href="http://yahoo-pure.com/pure-min.css">
</head>
<body>
<button class="pure-button" type="button">Some Button</button>
</body>
</html>
然后如果我改变主意并决定使用bootstrap:
<html>
<head>
<link rel="stylesheet" href="http://twitter-bootstrap.com/bootstrap.css">
</head>
<body>
<button class="btn" type="button">Some Button</button>
</body>
</html>
所以我必须在这里做两个更改,一个是源css文件(不是大问题)和按钮类(如果代码很大则是一个非常大的问题).(想象一下,如果我正在使用网格和其他东西,我必须做出的改变)
如果我能做这样的事情怎么办？
<html>
<head>
<link rel="stylesheet" href="my-magic-stylesheet.css">
</head>
<body>
<button class="myButton" type="button">Some button</button>
</body>
</html>
因此,当我想从Bootstrap切换到Pure时,我只在内部进行更改my-magic-stylesheet.css并且它仍然可以工作.我的HTML文件引用my-magic-stylesheet.css并且my-magic-stylesheet.css可以引用我指定的任何库.
我想到的一个解决方案是,这很简单,我编写了一个python脚本.首先,我记下不同的类及其各自的UI库.然后我将编写一个CSS,我将使用泛型类名称myButton.然后我将这个css作为另一个输入提供给我的脚本,其名称为UI库.该脚本将运行css文件并相应地进行更改.(例如,更改myButton到btn如果另一个输入到脚本bootstrap)
但有没有更好的方法呢？可能没有使用python脚本？或者您想到的任何解决方案？我也是LESS/SASS等CSS工具的新手.我可以用它们来解决我的问题吗？
使用较少：
.myButton {
.btn;
.pure-button;
}
在这里，您仍然需要手动处理许多类名，但至少只需处理一次。
| 归档时间： |
|
| 查看次数： |
451 次 |
| 最近记录： |