Vermy herhaalde konstantes in CSS

Question

Is daar enige nuttige tegnieke vir die vermindering van die herhaling van konstantes in 'n CSS-lêer?

(byvoorbeeld 'n klomp van die verskillende keurders wat almal dieselfde kleur, of dieselfde lettergrootte moet aansoek doen)?

Answer 1

Onlangs het veranderlikes is bygevoeg om die amptelike CSS specs.

Veranderlikes kan jy so iets soos hierdie:

body, html {
    margin: 0;
    height: 100%;
}

.theme-default {
    --page-background-color: #cec;
    --page-color: #333;
    --button-border-width: 1px;
    --button-border-color: #333;
    --button-background-color: #f55;
    --button-color: #fff;
    --gutter-width: 1em;
    float: left;
    height: 100%;
    width: 100%;
    background-color: var(--page-background-color);
    color: var(--page-color);
}

button {
    background-color: var(--button-background-color);
    color: var(--button-color);
    border-color: var(--button-border-color);
    border-width: var(--button-border-width);
}

.pad-box {
    padding: var(--gutter-width);
}

<div class="theme-default">
    <div class="pad-box">
        <p>
            This is a test
        </p>
        <button>
           Themed button
        </button>
    </div>
</div>

Ongelukkig leser ondersteuning is nog baie swak. Volgens CanIUse , die enigste blaaiers wat hierdie funksie te ondersteun vandag (9 Maart 2016), is Firefox 43+, Chrome 49+, Safari 9.1+ en iOS Safari 9.3+:

---

Alternatiewe:

Tot CSS veranderlikes wyd ondersteun, kan jy oorweeg om 'n CSS pre-verwerker taal soos Minder of Sass .

CSS pre-verwerkers sal nie net toelaat om veranderlikes te gebruik, maar pretty much toelaat om enigiets wat jy kan doen met 'n programmeertaal te doen.

Byvoorbeeld, in Sass, jy kan 'n funksie te skep soos volg:

@function exponent($base, $exponent) {
    $value: $base;
    @if $exponent > 1 {
        @for $i from 2 through $exponent {
            $value: $value * $base;
        }
    }
    @if $exponent < 1 {
        @for $i from 0 through -$exponent {
            $value: $value / $base;
        }
    }
    @return $value; 
}

Answer 2

Die elemente kan behoort aan meer as een klas, sodat jy kan iets soos dit te doen:

.DefaultBackColor
{
    background-color: #123456;
}
.SomeOtherStyle
{
    //other stuff here
}
.DefaultForeColor
{
    color:#654321;
}

En dan in die inhoud gedeelte iewers:

<div class="DefaultBackColor SomeOtherStyle DefaultForeColor">Your content</div>

Die swakhede hier is dat dit kry redelik langdradig in die liggaam en jy waarskynlik nie in staat wees om dit af te kry om die lys van 'n ander kleur net een keer is. Maar wat jy dalk in staat wees om dit net twee of drie keer doen en jy kan groep diegene kleure saam, miskien in hul eie vel. Nou as jy wil hê dat die kleurskema hulle is almal saam verander en die verandering is redelik eenvoudig.

Maar, ja, my grootste klagte met CSS is die onvermoë om jou eie konstantes te definieer.

Answer 3

Jy moet deur kommas geskei elke id of klas byvoorbeeld:

h1,h2 {
  color: #fff;
}

Answer 4

Jy kan globale veranderlikes gebruik om duplicacy vermy.

p{
  background-color: #ccc; 
}

h1{
  background-color: #ccc;
}

wortel pseudo klas selector:

Hier kan jy 'n globale veranderlike in inisialiseer. :. Wortel is die hoogste vlak van die DOM

:root{
    --main--color: #ccc; 
}

p{
  background-color: var(--main-color);
}

h1{
  background-color: var(--main-color);
}

  

Nota: Hierdie is 'n eksperimentele tegnologie   Omdat spesifikasie se tegnologie nie gestabiliseer het, gaan die verenigbaarheid tafel vir die behoorlike voor- om te gebruik in verskillende blaaiers. Let ook daarop dat die sintaksis en gedrag van 'n eksperimentele tegnologie is onderhewig aan verandering in toekomstige weergawes van webblaaiers soos die spec veranderinge. Meer Info hier

Maar jy kan altyd gebruik die Sintakties awesome Style Sheets maw

In die geval Sass, wat jy hoef te $ VARIABLE_NAME gebruik by die top van die globale veranderlike inisialiseer.

$base : #ccc;

p{
  background-color: $base;
}

h1{
   background-color: $base;
}

Answer 5

Jy kan dinamiese css raamwerke te gebruik soos minder .

Answer 6

Persoonlik, Ek gebruik net-komma separed selector, maar daar sommige oplossing vir die skryf van css programmaties. Miskien is dit 'n bietjie overkill vir jou makliker behoeftes, maar neem 'n blik op CleverCSS (Python )

Answer 7

Probeer Globale veranderlikes om te verhoed dat dubbele kodering

h1 {
  color: red;
}
p {
  font-weight: bold;
}

Of jy kan verskillende klasse te skep

.deflt-color {
  color: green;
}
.dflt-nrml-font {
  font-size: 12px;
}
.dflt-header-font {
  font-size: 18px;
}

Answer 8

Sover ek weet, sonder programmaties genereer die CSS-lêer, daar is geen manier om, sê, definieer jou gunsteling kleur van blou (# E0EAF1) in een en slegs een plek.

Jy kan redelik maklik skryf 'n rekenaar program om die lêer te genereer. Uit te voer 'n eenvoudige vonds-en-vervang operasie en dan slaan as 'n Css lêer.

Gaan uit hierdie source.css ...

h1,h2 {
  color: %%YOURFAVORITECOLOR%%;
}

div.something {
  border-color: %%YOURFAVORITECOLOR%%;
}

om hierdie target.css ...

h1,h2 {
  color: #E0EAF1;
}

div.something {
  border-color: #E0EAF1;
}

met kode soos hierdie ... (VB.NET)

Dim CssText As String = System.IO.File.ReadAllText("C:\source.css")
CssText = CssText.Replace("%%YOURFAVORITECOLOR%%", "#E0EAF1")
System.IO.File.WriteAllText("C:\target.css", CssText)

Answer 9

Jy kan verskeie erfenis gebruik in jou HTML-elemente (bv <div class="one two">), maar ek is nie bewus van 'n manier om met konstantes in die CSS hulself lêers.

Hierdie skakel (die eerste gevind toe googlen jou vraag) lyk na 'n redelik indiepte blik op die kwessie het:

http://icant.co.uk/articles/cssconstants/

Answer 10

CSS Veranderlikes , indien dit ooit raak geïmplementeer in al die groot blaaiers, kan een dag los hierdie probleem.

Tot dan, sal jy óf om te kopieer en plak, of gebruik 'n voorverwerker van watter soort, soos ander het voorgestel (tipies met behulp van bediener-sider script).

Answer 11

    :root {
      --primary-color: red;
    }

    p {
      color: var(--primary-color);
    } 

<p> some red text </p>

Jy kan van kleur verander deur JS

var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim(); 


document.documentElement.style.setProperty('--primary-color', 'blue');