<p>Are there any useful techniques for reducing the repetition of constants in a CSS file?</p>

<p>(For example, a bunch of different selectors which should all apply the same colour, or the same font size)?</p>

[{'answer_id': 30177, 'author': 'samjudson', 'author_id': 1908, 'author_profile': 'https://Stackoverflow.com/users/1908', 'pm_score': 0, 'selected': False, 'text': '<p>You can use multiple inheritance in your html elements (e.g. <code>&lt;div class="one two"&gt;</code>) but I\'m not aware of a way of having constants in the CSS files themselves.</p>\n\n<p>This link (the first found when googling your question) seems to have a fairly indepth look at the issue:</p>\n\n<p><a href="http://icant.co.uk/articles/cssconstants/" rel="nofollow noreferrer">http://icant.co.uk/articles/cssconstants/</a></p>\n'}, {'answer_id': 30178, 'author': 'KevinUK', 'author_id': 1469, 'author_profile': 'https://Stackoverflow.com/users/1469', 'pm_score': 3, 'selected': False, 'text': '<p>You should comma seperate each id or class for example:</p>\n\n<pre class="lang-css prettyprint-override"><code>h1,h2 {\n  color: #fff;\n}\n</code></pre>\n'}, {'answer_id': 30179, 'author': 'Zack Peterson', 'author_id': 83, 'author_profile': 'https://Stackoverflow.com/users/83', 'pm_score': 1, 'selected': False, 'text': '<p>As far as I know, without programmatically generating the CSS file, there\'s no way to, say, define your favorite shade of blue (#E0EAF1) in one and only one spot.</p>\n\n<p>You could pretty easily write a computer program to generate the file.  Execute a simple find-and-replace operation and then save as a .css file.</p>\n\n<p>Go from this source.css&hellip;</p>\n\n<pre class="lang-css prettyprint-override"><code>h1,h2 {\n  color: %%YOURFAVORITECOLOR%%;\n}\n\ndiv.something {\n  border-color: %%YOURFAVORITECOLOR%%;\n}\n</code></pre>\n\n<p>to this target.css&hellip;</p>\n\n<pre class="lang-css prettyprint-override"><code>h1,h2 {\n  color: #E0EAF1;\n}\n\ndiv.something {\n  border-color: #E0EAF1;\n}\n</code></pre>\n\n<p>with code like this&hellip; (VB.NET)</p>\n\n<pre><code>Dim CssText As String = System.IO.File.ReadAllText("C:\\source.css")\nCssText = CssText.Replace("%%YOURFAVORITECOLOR%%", "#E0EAF1")\nSystem.IO.File.WriteAllText("C:\\target.css", CssText)\n</code></pre>\n'}, {'answer_id': 30189, 'author': 'Joel Coehoorn', 'author_id': 3043, 'author_profile': 'https://Stackoverflow.com/users/3043', 'pm_score': 3, 'selected': False, 'text': '<p>Elements can belong to more than one class, so you can do something like this:  </p>\n\n<pre><code>.DefaultBackColor\n{\n    background-color: #123456;\n}\n.SomeOtherStyle\n{\n    //other stuff here\n}\n.DefaultForeColor\n{\n    color:#654321;\n}\n</code></pre>\n\n<p>And then in the content portion somewhere:  </p>\n\n<pre><code>&lt;div class="DefaultBackColor SomeOtherStyle DefaultForeColor"&gt;Your content&lt;/div&gt;\n</code></pre>\n\n<p>The weaknesses here are that it gets pretty wordy in the body and you\'re unlikely to be able to get it down to listing a color only once.  But you might be able to do it only two or three times and you can group those colors together, perhaps in their own sheet.  Now when you want to change the color scheme they\'re all together and the change is pretty simple.</p>\n\n<p>But, yeah, my biggest complain with CSS is the inability to define your own constants.</p>\n'}, {'answer_id': 37165, 'author': 'fcurella', 'author_id': 3914, 'author_profile': 'https://Stackoverflow.com/users/3914', 'pm_score': 1, 'selected': False, 'text': '<p>Personally, I just use comma-separed selector, but there some solution for writing css programmatically. Maybe this is a little overkill for you simpler needs, but take a look at <a href="http://pypi.python.org/pypi/CleverCSS/" rel="nofollow noreferrer">CleverCSS</a> (Python)</p>\n'}, {'answer_id': 37170, 'author': 'Sören Kuklau', 'author_id': 1600, 'author_profile': 'https://Stackoverflow.com/users/1600', 'pm_score': 0, 'selected': False, 'text': '<p><a href="http://disruptive-innovations.com/zoo/cssvariables/" rel="nofollow noreferrer">CSS Variables</a>, if it ever becomes implemented in all major browsers, may one day resolve this issue.</p>\n\n<p>Until then, you\'ll either have to copy and paste, or use a preprocessor of whatever sort, like others have suggested (typically using server-sider scripting).</p>\n'}, {'answer_id': 4546008, 'author': 'Gökhan Ercan', 'author_id': 7751, 'author_profile': 'https://Stackoverflow.com/users/7751', 'pm_score': 2, 'selected': False, 'text': '<p>You can use dynamic css frameworks like <a href="http://lesscss.org/" rel="nofollow">less</a>.</p>\n'}, {'answer_id': 31439095, 'author': 'abhimanyuaryan', 'author_id': 4417582, 'author_profile': 'https://Stackoverflow.com/users/4417582', 'pm_score': 2, 'selected': False, 'text': '<p>You can use global variables to avoid duplicacy. </p>\n\n<pre><code>p{\n  background-color: #ccc; \n}\n\nh1{\n  background-color: #ccc;\n}\n</code></pre>\n\n<p>Here, you can initialize a global variable in <em>:root</em> pseudo class selector. <em>:root</em> is top level of the DOM.</p>\n\n<pre><code>:root{\n    --main--color: #ccc; \n}\n\np{\n  background-color: var(--main-color);\n}\n\nh1{\n  background-color: var(--main-color);\n}\n</code></pre>\n\n<blockquote>\n  <p>NOTE: This is an experimental technology\n  Because this technology\'s specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" rel="nofollow"> More Info here</a></p>\n</blockquote>\n\n<p>However, you can always use the Syntactically Awesome Style Sheets i.e. </p>\n\n<p>In case Sass, you have to use $variable_name at the top to initialize the global variable.</p>\n\n<pre><code>$base : #ccc;\n\np{\n  background-color: $base;\n}\n\nh1{\n   background-color: $base;\n}\n</code></pre>\n'}, {'answer_id': 32329417, 'author': 'Ajay Gupta', 'author_id': 2663073, 'author_profile': 'https://Stackoverflow.com/users/2663073', 'pm_score': 1, 'selected': False, 'text': '<p>Try Global variables to avoid duplicate coding</p>\n\n<pre class="lang-css prettyprint-override"><code>h1 {\n  color: red;\n}\np {\n  font-weight: bold;\n}\n</code></pre>\n\n<p>Or you can create different classes </p>\n\n<pre class="lang-css prettyprint-override"><code>.deflt-color {\n  color: green;\n}\n.dflt-nrml-font {\n  font-size: 12px;\n}\n.dflt-header-font {\n  font-size: 18px;\n}\n</code></pre>\n'}, {'answer_id': 35889456, 'author': 'John Slegers', 'author_id': 1946501, 'author_profile': 'https://Stackoverflow.com/users/1946501', 'pm_score': 4, 'selected': True, 'text': '<p>Recently, <a href="https://www.w3.org/TR/css-variables/" rel="nofollow noreferrer"><strong>variables have been added</strong></a> to the official CSS specs.</p>\n<p>Variables allow you to so something like this :</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>body, html {\n    margin: 0;\n    height: 100%;\n}\n\n.theme-default {\n    --page-background-color: #cec;\n    --page-color: #333;\n    --button-border-width: 1px;\n    --button-border-color: #333;\n    --button-background-color: #f55;\n    --button-color: #fff;\n    --gutter-width: 1em;\n    float: left;\n    height: 100%;\n    width: 100%;\n    background-color: var(--page-background-color);\n    color: var(--page-color);\n}\n\nbutton {\n    background-color: var(--button-background-color);\n    color: var(--button-color);\n    border-color: var(--button-border-color);\n    border-width: var(--button-border-width);\n}\n\n.pad-box {\n    padding: var(--gutter-width);\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="theme-default"&gt;\n    &lt;div class="pad-box"&gt;\n        &lt;p&gt;\n            This is a test\n        &lt;/p&gt;\n        &lt;button&gt;\n           Themed button\n        &lt;/button&gt;\n    &lt;/div&gt;\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n<p>Unfortunately, browser support is still very poor. <a href="http://caniuse.com/#feat=css-variables" rel="nofollow noreferrer"><strong>According to CanIUse</strong></a>, the only browsers that support this feature today (march 9th, 2016), are Firefox 43+, Chrome 49+, Safari 9.1+ and iOS Safari 9.3+ :</p>\n<p><a href="https://i.stack.imgur.com/nRzFd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nRzFd.png" alt="enter image description here" /></a></p>\n<hr />\n<h3>Alternatives :</h3>\n<p>Until CSS variables are widely supported, you could consider using a CSS pre-processor language like <a href="http://lesscss.org/" rel="nofollow noreferrer"><strong>Less</strong></a> or <a href="http://sass-lang.com/" rel="nofollow noreferrer"><strong>Sass</strong></a>.</p>\n<p>CSS pre-processors wouldn\'t just allow you to use variables, but pretty much allow you to do anything you can do with a programming language.</p>\n<p>For example, in Sass, you could create a function like this  :</p>\n<pre><code>@function exponent($base, $exponent) {\n    $value: $base;\n    @if $exponent &gt; 1 {\n        @for $i from 2 through $exponent {\n            $value: $value * $base;\n        }\n    }\n    @if $exponent &lt; 1 {\n        @for $i from 0 through -$exponent {\n            $value: $value / $base;\n        }\n    }\n    @return $value; \n}\n</code></pre>\n'}, {'answer_id': 38204623, 'author': 'zloctb', 'author_id': 1673376, 'author_profile': 'https://Stackoverflow.com/users/1673376', 'pm_score': 0, 'selected': False, 'text': "<pre><code>    :root {\n      --primary-color: red;\n    }\n\n    p {\n      color: var(--primary-color);\n    } \n\n&lt;p&gt; some red text &lt;/p&gt;\n</code></pre>\n\n<p>You can change color by JS</p>\n\n<pre><code>var styles = getComputedStyle(document.documentElement);\nvar value = String(styles.getPropertyValue('--primary-color')).trim(); \n\n\ndocument.documentElement.style.setProperty('--primary-color', 'blue');\n</code></pre>\n"}]
['https://Stackoverflow.com/questions/30170', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/797/']