Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Variabelen in CSS?

11 antwoorden
  • 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.
  • 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&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.
  • 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]
  • Gevonden! Boven in de PHP stylesheet moet staan: [code:1:2680cb561d]<?php header("Content-type: text/css"); ?>[/code:1:2680cb561d] Dan werkt het wel :) Hier meer info: http://www.barelyfitz.com/projects/csscolor/
  • 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.
  • Dat is inderdaad veel netter. Ik neem het over zo. Keurig CSS en PHP gescheiden.
  • 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
  • Toevallig vandaag op Sitepoint: [url=http://www.sitepoint.com/native-css-variables/]Coming Soon: Native CSS Variables[/url]. Heb het nog niet geconcentreerd gelezen, maar het lijkt me in ieder geval ontopic. :D - Bas
  • 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]
  • Van Less had ik wel eens gehoord, maar heb me er nooit echt in verdiept. Maar zo te zien wel iets wat ik zoek, dus dik de moeite waard om daar in verder te gaan. Mooier ook dan de native CSS variabelen uit het artikel trouwens. Bedankt voor de aanrader.
  • Begrijp ik nou overigens goed dat je LESS op twee manieren kunt toepassen, met een programma als SimpLESS dat "gewone" CSS genereerd uit je superset, en met een javascript implementatie, waarin je de superset code rechtstreeks op de website kunt gebruiken?

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.