有没有办法将值引用为“变量”? 在CSS中?
我正在尝试为内部 Web 应用程序正确编写 HTML 和 CSS。 在技术上尽可能地,我希望 HTML 标记能够定义页面的内容,并且完全独立于布局所需的内容。
显然不可能完美地做到这一点。 每当我不得不添加一个额外的嵌套 div 来使布局正常工作时,我都会感到有点内疚。
我最近试图解决的问题是如何减少 .css 文件中重复文本的数量。 最主要的是颜色。 在我的应用程序中,我使用颜色来表示“干净”、“错误”、“警告”和“原谅”,到目前为止,几乎每个使用颜色的地方都需要明确定义它们。 有时它们用于文本颜色,有时用于背景颜色,有时用于边框颜色。
有没有办法将颜色等值分配给名称,然后在 CSS 属性中引用该名称?
我知道继承在 CSS 中是如何工作的,并且我知道一种方法实现这个目标的方法是在我的很多元素上使用多个类名,然后我可以让 backgroundClean
成为各种对象使用的样式。 但这需要让 HTML 了解更多仅与页面风格布局相关的数据,而不是与数据相关的数据,正如我提到的,我希望避免这种情况。
额外问题:做这种事情的最佳实践是什么?当 HTML+CSS 还没有准备好时,我试图让 HTML+CSS 表现得像 MVC 是不是很愚蠢? 我知道这就是 CSS 一直以来的发展方向,但也许只是还没有实现。
I am trying to write the HTML and CSS for an internal webapp properly. As much as technically possible, I want the HTML markup to define the content of the page and be completely independent of what the layout will need to be.
Obviously it is not possible to do this perfectly. I die a little inside every time I have to add an extra nested div for the sole purpose of making the layout work.
The most recent problem I have been trying to tackle is how to reduce the amount of duplicated text in my .css file. The main thing is colors. All throughout my app I use colors to represent "clean", "errors", "warnings", and "pardoned" and so far pretty much every place that uses the colors needs to have them explicitly defined. Sometimes they are used for text colors, sometimes background colors, sometimes border colors.
Is there a way to assign a value such as a color to a name, and then reference that name in the CSS properties?
I am aware of how inheritance works in CSS and I am aware that one method of accomplishing this goal would be to use multiple class names on a lot of my elements and then I could just have backgroundClean
be a style that all sorts of objects use. But that requires making the HTML aware of more data that is only relevant to the stylistic layout of the page and not the data, which as I mentioned I would like to avoid.
Bonus Question: What is the best practice for doing this kind of stuff? Am I stupid in trying to make HTML+CSS act like an MVC when it is not ready to do so? I know that is the direction CSS has always been headed but perhaps it's just not there yet.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(9)
为什么是的,新引入了 css 变量来做到这一点!
不幸的是......它还没有进入浏览器,所以你还不能使用它们。
为了获得相同的行为,您需要使用某种服务器端语言将颜色动态输出到 CSS 文件中。 (你也可以使用大量的 javascript,但这太可怕了)
所以在 PHP 中你可以这样做:
Why yes, there are newly introduced css variables to do this!
Unfortunetly... it's not made its way into browsers yet, so you can't use them, just yet.
To get the same behavior, you'll need to use some sort of Server-Side language to output the color dynamically into your CSS files. (You could also use a ton of javascript, but that'd be horrible)
So in PHP you could do this:
当前任何浏览器都不支持。 尽管如果您使用 SASS 之类的东西预处理 CSS,那么您会这样做以及更多。 SASS 几乎以各种方式改进 CSS。 它使编写样式表变得更容易、更有趣。 我永远不会再去写普通的 CSS。
Not with any current browser support no. Although if you preprocess your CSS with something like SASS then you do this and much more. SASS improves CSS is just about every single way. It makes it easier and much more fun to write stylesheets. I will never go back to writing vanilla CSS.
我不确定我是否完全理解您的问题,但您可能需要考虑简单地为颜色分配特定的类别。 例如,如果“警告”的所有文本/div/等都是亮红色,您可以在 css 中执行此操作:
然后每当您有一个 div,即使它已经有额外的类,您只需添加这个,用空格分隔类:
需要注意的一件事是,为类使用颜色名称并不是一种好的做法,例如,您不应该定义名为“blue”的类。 您应该尝试使用该颜色所代表的名称,以防您将来希望更改它。
编辑:您确实在问题中提到了这一点,但据我所知,这将是当前可能的最佳方法,所以我只想稍微扩展一下。
I'm not sure that I totally understand your problem, but you may want to consider simply assigning a particular class for a color. For example, if all the text/divs/etc for a "warning" are bright red, you could do this in your css:
And then whenever you have a div, even if it already has extra classes, you simply add this one, space-separating the classes:
One thing to note is that it's not considered good practice to use color names for the classes, for example you shouldn't define a class named "blue". You should try to use the name for what that color is representing, in case you wish to change it in the future.
Edit: you did mention this in the question, but as far as I know it's going to be the best currently-possible way to do it, so I just wanted to expand on it a little.
我刚刚发现了这一点(在 StackExchange 播客中提到):
http://lesscss.org/
它是 javascript,可让您将变量(和其他功能)放入 CSS 中。
I"ve just discovered this (mentioned on the StackExchange Podcast):
http://lesscss.org/
It's javascript that lets you put variables (and other capabilities) in your CSS.
我认为完成此任务的最佳方法是从服务器端进行。 让服务器处理您的 CSS,以便您可以输出您想要的内容。
例如,如果您使用 C#,则可以使用脚本块引用变量
I think the best way for you to accomplish this would be from the server side. Have your CSS be processed by the server so you can output what ever you'd like.
For example, if you were using C#, you would reference the variables using the script block
使用纯 HTML 和 CSS 无法做到这一点。
当需要实现类似效果时,您可以动态生成 CSS; 但是,您必须非常仔细地控制此类 CSS 的缓存,以找到完全控制输出和最小化用户带宽使用之间的平衡点。
您还可以使用 jQuery 或任何其他 JavaScript 框架来实现它,但这会给浏览器带来更多工作,并且如果不加限制地使用,可能会使您的页面对用户没有响应。
It is not possible to do this with plain HTML and CSS.
You could go for generating the CSS on the fly when requested to achieve similar effet; however, you will have to control the caching of such CSS very carefully to find the balance point between total control of the output and minimizing the bandwidth usage for the user.
You can also implement it with jQuery or any other JavaScript framework, but that puts more work on the browser and if used with no restriction can make your page unresponsive to the user.
另一个可能的解决方案是为每种样式包含多个定义...
这里的关键是您已经决定错误和取消应该彼此相同的颜色,并且警告和注释应该彼此相同的颜色。 实际使用的颜色与其他样式属性分开定义,并且如果需要颜色更新,则允许更改单个值。
我对此给出的警告是,您的样式定义被分为两个地方,因此有人可能会更新主样式以使用不同的颜色,然后花很长时间摸不着头脑,才意识到为什么它没有效果- 即因为第二个定义覆盖它。
@Bob 和 Tom Ritter 提到的服务器端方法也值得考虑,但与我建议的方法一样,很容易受到缓存问题的影响。
Another possible solution is to include multiple definitions for each style...
The key thing here is that you've decided that error and cancelled should be the same colour as each other and the warning and comment should be the same colour as each other. The actual colours to use are defined separately to the other style attributes and allow a single value to be changed, should a colour update be required.
The warning that I'd give with this, is that your style definitions are split into two places, so somebody may update the main one to use a different colour, then spend a long time scratching their head before they realise why it has no effect - i.e. because the second definition overrides it.
The server side approach mentioned by @Bob and Tom Ritter, is also worth considering but, as with the approach I suggest, is susceptible to caching issues.
是的——它叫做 jQuery。 使用 JavaScript 和一个好的 JavaScript 库(jQuery 非常出色)并以这种方式操作您需要的内容。
Yes--it's called jQuery. Use JavaScript and a good JavaScript library (jQuery is excellent) and manipulate what you need that way.
如果您不想或无权访问服务器端脚本,一种解决方法是在客户端使用 Javascript。
只需使用 document.write() 就可以解决问题。 唯一的问题是换行符...
写入或读取不太繁琐(恕我直言)并且维护起来相当简单...
就我个人而言,我更喜欢服务器端语言。 这样你就可以完全控制正在发生的事情。 或者至少多一点。 ;-)
If you don't want to or don't have access to server side scripting, one workaround would be to use Javascript on the client.
Just something with document.write() would do the trick. Only problem is the line breaks...
Not too fiddly to write or read (IMHO) and rather simple to maintain...
Personally, I would prefer a server side language. That way you are in control of what is happening completely. Or at least a bit more. ;-)