{"id":151,"date":"2008-01-18T11:53:28","date_gmt":"2008-01-18T09:53:28","guid":{"rendered":"http:\/\/pixy.cz\/pixynergia\/2008\/what-im-missing-in-css\/"},"modified":"2008-01-18T12:09:28","modified_gmt":"2008-01-18T10:09:28","slug":"what-im-missing-in-css","status":"publish","type":"post","link":"https:\/\/www.pixy.cz\/pixynergia\/2008\/01\/18\/what-im-missing-in-css","title":{"rendered":"What I&#8217;m missing in CSS"},"content":{"rendered":"\n<p>In fact, there is only one thing I'm missing in CSS. But I\u00a0miss it virtually\nevery day: a kind of <strong>reusable parameters<\/strong>. What does it mean?\nVery often, I\u00a0create a large stylesheets for a large project. A\u00a0color palette\nis given and color codes are repeated many times through the stylesheet. It\nwould be very nice to be able to predefine those colors as <em>parameters<\/em>\n(or user-defined keywords) at the beginning of the stylesheet, and then only use\nthese symbolic values. Something like this (the syntax doesn't matter\u00a0now):<\/p>\n\n<pre class=\"css\"><code>@define {\n   <span\nclass=\"css-property\">baseText<\/span>:<span class=\"css-value\"> <\/span><span\nclass=\"css-color\">#003366<\/span>;\n   <span\nclass=\"css-property\">canvas<\/span>:<span class=\"css-value\"> <\/span><span\nclass=\"css-color\">#f0f0f0<\/span>;\n   }\n\nbody {\n   <span\nclass=\"css-property\">color<\/span>:<span\nclass=\"css-value\"> @baseText<\/span>;\n   <span\nclass=\"css-property\">background<\/span>:<span\nclass=\"css-value\"> @canvas<\/span>;\n   }\na:hover {\n   <span\nclass=\"css-property\">color<\/span>:<span\nclass=\"css-value\"> @canvas<\/span>;\n   <span\nclass=\"css-property\">background<\/span>:<span\nclass=\"css-value\"> @baseText<\/span>;\n   }<\/code><\/pre>\n\n<p>If I\u00a0need to replace a color in whole CSS, I\u00a0could only edit one value in\nthe <code>@define<\/code> section. If I\u00a0want to change the color palette of the\nweb site at once, I\u00a0could edit only these predefined values.<\/p>\n\n<p>Or, why use it for colors only? These substitutions could be useful in\nmany\u00a0ways.<\/p>\n\n<pre class=\"css\"><code>@define {\n   <span\nclass=\"css-property\">textColor<\/span>:<span class=\"css-value\"> <\/span><span\nclass=\"css-color\">#003366<\/span>;\n   <span\nclass=\"css-property\">emphColor<\/span>:<span class=\"css-value\"> <\/span><span\nclass=\"css-color\">#660000<\/span>;\n   <span\nclass=\"css-property\">canvasColor<\/span>:<span class=\"css-value\"> <\/span><span\nclass=\"css-color\">#f0f0f0<\/span>;\n   <span\nclass=\"css-property\">baseFont<\/span>:<span\nclass=\"css-value\"> &quot;palatino linotype&quot;, palatino, serif<\/span>;\n   <span\nclass=\"css-property\">titleFont<\/span>:<span\nclass=\"css-value\"> &quot;Helvetica Narrow Black&quot;, Impact, Techno, sans-serif<\/span>;\n   <span\nclass=\"css-property\">stdPadding<\/span>:<span\nclass=\"css-value\"> 0.2em 2em 0.3em 1em<\/span>;\n   }\n@define {\n   <span\nclass=\"css-property\">stdBorder<\/span>:<span\nclass=\"css-value\"> 1px solid @textColor<\/span>;\n   }\n\nbody {\n   <span\nclass=\"css-property\">color<\/span>:<span\nclass=\"css-value\"> @textColor<\/span>;\n   <span\nclass=\"css-property\">background<\/span>:<span\nclass=\"css-value\"> @canvasColor<\/span>;\n   <span\nclass=\"css-property\">font<\/span>:<span\nclass=\"css-value\"> 1em\/1.67 @baseFont<\/span>;\n   }\nh1 {\n   <span\nclass=\"css-property\">color<\/span>:<span\nclass=\"css-value\"> @emphColor<\/span>;\n   <span\nclass=\"css-property\">font<\/span>:<span\nclass=\"css-value\"> 250%\/1 @titleFont<\/span>;\n   }\n<span\nclass=\"css-class\">.box<\/span> {\n   <span\nclass=\"css-property\">padding<\/span>:<span\nclass=\"css-value\"> @stdPadding<\/span>;\n   <span\nclass=\"css-property\">border<\/span>:<span\nclass=\"css-value\"> @stdBorder<\/span>;\n   }<\/code><\/pre>\n\n<p>Something like this would be very helpful in CSS\u00a03.<\/p>\n\n<p><em>Note: I'm sorry for this english spot on a non-english blog. I\u00a0have no\nbetter place for it now. Comments in english only, please (if one is able to\npublish a comment through a Czech\u00a0form).<\/em><\/p>\n\n<!-- by Texy2! -->","protected":false},"excerpt":{"rendered":"<p>In fact, there is only one thing I&#8217;m missing in CSS. But I\u00a0miss it virtually every day: a kind of reusable parameters. What does it mean? Very often, I\u00a0create a large stylesheets for a large project. A\u00a0color palette is given and color codes are repeated many times through the stylesheet. It would be very nice &hellip; <a href=\"https:\/\/www.pixy.cz\/pixynergia\/2008\/01\/18\/what-im-missing-in-css\" class=\"more-link\">Pokra\u010dov\u00e1n\u00ed textu <span class=\"screen-reader-text\">What I&#8217;m missing in CSS<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,4],"tags":[],"class_list":["post-151","post","type-post","status-publish","format-standard","hentry","category-it","category-webdesign"],"_links":{"self":[{"href":"https:\/\/www.pixy.cz\/pixynergia\/wp-json\/wp\/v2\/posts\/151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pixy.cz\/pixynergia\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pixy.cz\/pixynergia\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pixy.cz\/pixynergia\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pixy.cz\/pixynergia\/wp-json\/wp\/v2\/comments?post=151"}],"version-history":[{"count":0,"href":"https:\/\/www.pixy.cz\/pixynergia\/wp-json\/wp\/v2\/posts\/151\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.pixy.cz\/pixynergia\/wp-json\/wp\/v2\/media?parent=151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixy.cz\/pixynergia\/wp-json\/wp\/v2\/categories?post=151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixy.cz\/pixynergia\/wp-json\/wp\/v2\/tags?post=151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}