Ga naar inhoud

Variabelen in CSS?

anoniem

Door anoniem,
in Internet en hosting

Aanbevolen berichten

anoniem Nieuwkomer

anoniem

Geplaatst:
Geplaatst:
Ik ben op zoek naar een manier om variabelen in CSS te stoppen. Tot nu toe heb ik me altijd beperkt tot plain stylesheets, maar de behoefte is nu groot om bepaalde waardes in variabelen te kunnen plaatsen. De reden hiervan is dat ik dezelfde layout meerdere malen met verschillende kleurenthema's wil gebruiken. Nu was ik al op het idee gekomen om een aparte layout stylesheet en een aparte kleuren stylesheet te gebruiken, maar dan nog zit ik voor de kleuren allerlei verschillende stylesheets te maken. Het zou veel praktischer zijn als ik bovenin de stylesheet eenmalig bijvoorbeeld vier kleuren kon definieren die dan verder overal op de juiste plekken gebruikt worden. Ik heb al wat met PHP zitten experimenteren, maar daar trapt de browser niet in, die wil blijkbaar echt een .ccs extensie zien :) Verder zou ik via javascript / jQuery kunnen doen, maar ik wil mijn stijlen graag bij elkaar houden. Ben ik nu meteen "veroordeelt" tot het gebruik van een CSS framework, of zijn er eenvoudigere oplossingen? Want het gebruik van variabelen is eigenlijk de enige functionaliteit die ik extra wil hebben.
Link naar reactie
anoniem Nieuwkomer

anoniem

Geplaatst:
  • Auteur
Geplaatst:
Waarom zou een browser geen PHP slikken als extensie voor een stylesheet? phpBB doet dat standaard (daar worden ook veel variabelen geparsed voor de CSS). Zie bijvoorbeeld: https://www.phpbb.com/community/ [code:1:6b161024aa]<link href="/community/style.php?id=1&amp;lang=en" rel="stylesheet" type="text/css" media="screen, projection" />[/code:1:6b161024aa] Als output van je PHP moet je natuurlijk wel valide CSS genereren. En dan kun je prima iets met een extensie PHP en een querystring meegeven. Zolang je maar in je attributen aangeeft dat het een stylesheet is en het type text/css is, is er niets aan de hand volgens mij.
Link naar reactie
anoniem Nieuwkomer

anoniem

Geplaatst:
  • Auteur
Geplaatst:
Wat raar. Onderstaande werkte namelijk niet bij mij, geen enkele stijl werd toegepast. (Eerst maar even 'plain' CSS geprobeert, nog zonder variabelen dus) [b:3b5d9980bb]HTML[/b:3b5d9980bb] (test.html) [code:1:3b5d9980bb] <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="style.php" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="testdiv"> <p>Hallo! Dit is een <strong>test!<strong></p> </div> </body> </html> [/code:1:3b5d9980bb] [b:3b5d9980bb]CSS[/b:3b5d9980bb] (style.php) [code:1:3b5d9980bb] body { background-color: #ddd; } #testdiv { border: 1px solid #ccc; } strong { font-size: 3em; color: red; } [/code:1:3b5d9980bb]
Link naar reactie
anoniem Nieuwkomer

anoniem

Geplaatst:
  • Auteur
Geplaatst:
Terwijl jij het had gevonden, had ik een iets andere aanpak uitgelegd. Kan ik net zo goed even posten: style.php: [code:1:4ff34212c8]<?php $basis = file_get_contents('basis.css'); header('Content-type: text/css; charset=UTF-8'); $replace = array( '$BODY_BACKGROUND_COLOR$' => "#DDD", '$TESTDIV_BORDER_COLOR$' => "#CCC", ); $result_css = str_replace(array_keys($replace), array_values($replace), $basis); echo $result_css;[/code:1:4ff34212c8] basis.css: [code:1:4ff34212c8]body { background-color: $BODY_BACKGROUND_COLOR$; } #testdiv { border: 1px solid $TESTDIV_BORDER_COLOR$; } strong { font-size: 3em; color: red; } [/code:1:4ff34212c8] Persoonlijk vind ik dat ook beter, want je scheidt zo netjes de PHP en de CSS in 2 bestanden.
Link naar reactie
anoniem Nieuwkomer

anoniem

Geplaatst:
  • Auteur
Geplaatst:
Blij dat je al een oplossing hebt gevonden, maar misschien wordt het eens tijd dat je een CSS preprocessor gaat gebruiken. De voordelen en mogelijkheden zijn legio. In het kort komt het er op neer dat je schrijft in een superset van CSS, hierin zit onder andere ondersteuning voor variabelen en simpele bewerkingen zoals het lichter maken van een kleur met behulp van een functie en het maken van berekeningen in CSS. De bestanden die je maakt moet je eerst door de preprocessor heen gooien voordat ze op de site kunnen, browsers ondersteunen geen CSS supersets (enkele JavaScript-implementaties daargelaten). Overigens doen de meeste programma's dat 'on-the-fly', dus automatisch elke keer dat je een aangepast bestand opslaat. Er zijn twee [url=http://css-tricks.com/poll-results-popularity-of-css-preprocessors/]populaire[/url] smaken: [url=http://www.lesscss.org/]LESS[/url] en [url=http://sass-lang.com/]SASS/SCSS[/url]. Van deze twee is LESS veruit het populairst, maar de echte die-hards zweren bij SASS/SCSS. Zelf gebruik ik naar volle tevredenheid LESS met het programma [url=http://wearekiss.com/simpless]SimpLESS[/url] (Windows/MacOS). Ik denk dat de grote populariteit van LESS onder andere een gevolg is van het simpele gebruik van LESS onder Windows, waar SASS/SCSS veel beter ondersteund wordt door MacOS/Linux. Overigens moet laatstgenoemde ook op Windows [url=http://www.senff.com/front-end/coding-tips/getting-started-with-sass-on-windows-the-easy-way/]werkend zijn te krijgen[/url], iets dat ik nog steeds wil proberen, maar vooralsnog ben ik er niet aan toegekomen. Tevens biedt SASS/SCSS naar verluidt meer mogelijkheden. Kortom: gebruik een preprocessor, je krijgt er geen spijt van! Je zult zelf moeten kiezen welke smaak je wil gebruiken. Wennen aan de nieuwe "taal" kost je waarschijnlijk een middagje, het ten volle benutten ervan wellicht wat langer. Mocht je SASS/SCSS gaan gebruiken, kies dan voor de SCSS-variant, die ligt (net als LESS) heel dicht bij de syntax van gewoon CSS en is daarmee makkelijk te leren. - Bas
Link naar reactie
anoniem Nieuwkomer

anoniem

Geplaatst:
  • Auteur
Geplaatst:
Lijkt me ontzettend handig als we ooit zo zouden kunnen gaan stylen, maar ik onderschrijf de kanttekening van de auteur volledig: [quote:35229fa63e]It’s an exciting development but don’t hold your breath. There’s no guarantee it will be adopted by all vendors and, even if they do, the feature does not appear to be backward-compatible with older browsers. Our great grand-children will love it, though.[/quote:35229fa63e]
Link naar reactie
anoniem Nieuwkomer

anoniem

Geplaatst:
  • Auteur
Geplaatst:
Ja, dat begrijp je goed. Nadeel van de JavaScript-implementatie (zoals het project ooit begonnen is) is dat de performence veel slechter is en dat je - vanzelfsprekend - afhankelijk bent van JavaScript. Ik geef de voorkeur aan Simpless en vergelijkbare programma's, maar wellicht zijn er ook situaties waarbij JavaScript geen bezwaar is. - Bas
Link naar reactie

Om een reactie te plaatsen, moet je eerst inloggen

Gast
Reageer op dit topic

×   Geplakt als verrijkte tekst.   Herstel opmaak

  Er zijn maximaal 75 emoji toegestaan.

×   Je link werd automatisch ingevoegd.   Tonen als normale link

×   Je vorige inhoud werd hersteld.   Leeg de tekstverwerker

×   Je kunt afbeeldingen niet direct plakken. Upload of voeg afbeeldingen vanaf een URL in

×
Ga naar topic overzicht
×
×
  • Nieuwe aanmaken...