Leer hoe u kunt werken met CSS-preprocessorbestanden en deze kunt compileren in Dreamweaver.

Met CSS-preprocessors kunt u code die is geschreven in een voorbewerkte taal compileren in de meest overeenkomende CSS. Met voorbewerkte taal benadert CSS dichter een programmeertaal.

Met preprocessors kunt u variabelen, combinaties, functies en nog veel meer andere technieken gebruiken die
in CSS niet mogelijk zijn. Met de CSS-preprocessors hoeft u alle technieken slechts eenmalig te definiëren en kunt u ze opnieuw gebruiken om CSS te onderhouden en uit te breiden en thema's te gebruiken.

Dreamweaver ondersteunt de populairste CSS-preprocessors Sass en Less en ook Compass- en Bourbon-frameworks voor het compileren van Sass-bestanden.

Less is gebaseerd op JavaScript en Sass op Ruby, maar u hoeft niet alles te weten over deze talen of de opdrachtregel te gebruiken om de bestanden in CSS te compileren. Dreamweaver compileert deze bestanden automatisch in CSS met de JavaScript-bibliotheek less.js wanneer u de bestanden laadt, bewerkt of opslaat.

Hoe behandelt Dreamweaver CSS-preprocessors?

Hoe Dreamweaver CSS-preprocessors behandelt, is afhankelijk van de vraag of u een site hebt gedefinieerd of niet. Adobe raadt aan om een site te definiëren omdat u daarmee de vrijheid hebt om CSS-preprocessorvoorkeuren in te stellen en Compass- en Bourbon-frameworks te gebruiken in Dreamweaver.

Als u een bepaalde site hebt gedefinieerd, kunt u instellen hoe CSS-preprocessors in Dreamweaver werken door de site-specifieke CSS-preprocessorvoorkeuren in te stellen.

Als u site-specifieke CSS-preprocessorvoorkeuren instelt, kunt u compilatieopties op een sitebasis opgeven. U kunt de locatie van Sass- en CSS-bestanden en site-specifieke preprocessoropties ook aanpassen.

Wanneer u een site hebt gedefinieerd, kunt u Sass-frameworks, Compass, Bourbon, Bourbon Neat en Bourbon bitters gebruiken in Dreamweaver.

Als u geen site hebt gedefinieerd, kunt u ervoor kiezen om uw Sass- en Less-bestanden handmatig te compileren. Het gebruik van Compass- en Bourbon-frameworks wordt echter niet ondersteund.

Hoe kunt u CSS-preprocessors gebruiken in Adobe Dreamweaver?

Hier volgt een hoogwaardige workflow van de taken die worden uitgevoerd wanneer u CSS-preprocessors gebruikt:

  1. Definieer een site in Dreamweaver. Zorg ervoor dat het Sass- of Less-bestand dat u probeert te compileren in de hoofdmap van de site is opgenomen. Als u al een site hebt gedefinieerd en het Sass/Less-bestand in de hoofdmap van de site is opgenomen, gaat u naar de volgende stap. Ga voor meer informatie over het instellen van een Dreamweaver-site naar Over Dreamweaver-sites.
  2. Voorkeuren instellen voor CSS-preprocessors (zoals het definiëren van de locatie van de gegenereerde CSS-bestanden). Deze voorkeuren zijn site-specifiek. Zie Voorkeuren voor site-specifieke CSS-preprocessors instellen voor meer informatie.
  3. Als u specifieke frameworks, zoals Compass of Bourbon, wilt gebruiken, kunt u de instellingen voor deze frameworks opgeven. Ga voor meer informatie naar: Het Compass-framework gebruiken of Het Bourbon-framework gebruiken.
  4. De automatische compilatie instellen of handmatig uw Sass- en Less-bestanden compileren. Ga voor meer informatie naar CSS-preprocessorbestanden compileren.

Voorkeuren instellen voor CSS-preprocessors

U kunt site-specifieke voorkeuren voor CSS-preprocessors instellen via de Sites > dialoogvenster Sites Beheren.

Door CSS-preprocessorvoorkeuren site-specifiek te houden, kunt u uw CSS-preprocessors op sitebasis beheren zodat u de controle behoudt van elke afzonderlijke site-CSS-preprocessor zonder dat u kunt voorkeuren telkens hoeft te updaten als u van site wisselt.

Algemene CSS-preprocessorinstellingen instellen

U kunt de volgende algemene instellingen voor CSS-preprocessors configureren in het dialoogvenster dat u opent via Sites > Sites Beheren > CSS-preprocessors. 

Algemene CSS-preprocessorinstellingen
Algemene CSS-preprocessorinstellingen

Automatische compilatie bij opslaan van bestanden

Markeer dit selectievakje om automatische compilatie van CSS-preprocessors in te schakelen. Als u deze optie selecteert, genereert Dreamweaver automatisch een CSS-bestand bij het opslaan van uw Sass-, Less- of SCSS-bestand. Als deze optie niet is geselecteerd, moet u telkens wanneer u een wijziging aanbrengt de bestanden handmatig compileren.

Opties voor Less

Strikte berekeningen inschakelen

Hiermee worden alleen berekeningen tussen haakjes verwerkt. Zo wordt (100px/25px) gewoon verwerkt, maar wordt 20% + 10% (zonder haakjes) niet verwerkt. Als deze optie is uitgeschakeld, worden alle berekeningen in het bestand verwerkt.

Strikte eenheden inschakelen

Hiermee wordt een geschatte eenheid uitgevoerd in de CSS na de berekening. Zo wordt 5px * 2px gecompileerd als 10px en niet als 10px2. 

Wanneer deze optie is uitgeschakeld, probeert Less om de uitvoereenheid te schatten wanneer deze de berekening verwerkt.

In dit voorbeeld wordt CSS als volgt gegenereerd:

.class {
  property: 1px * 2px;
}

In dit geval is de schatting niet correct - een lengte vermenigvuldigd met een lengte geeft een oppervlakte, maar CSS ondersteunt het opgeven van oppervlakten niet. Hier wordt aangenomen dat de gebruiker voor een van de waarden een waarde bedoelt en niet een lengte-eenheid, en Dreamweaver geeft 10px als uitkomst.

Met strikte eenheden ingeschakeld, wordt deze gegenereerde CSS als een fout beschouwd.

URL's herschrijven als relatieve URL's

Hiermee worden URL's in geïmporteerde bestanden herschreven, zodat de URL altijd relatief is ten opzichte van het geïmporteerde basisbestand. Dit betekent dat als met een Less-bestand een ander Less-bestand waarin naar een afbeelding wordt verwezen, wordt geïmporteerd, de relatieve URL wordt weergegeven in de gecompileerde CSS.

Brontoewijzing genereren

Creëert een brontoewijzing (bestand dat de tussenruimte overbrugt tussen hogere programmeertalen zoals Sass en Less, en de lagere taal waarmee ze worden gecompileerd, zoals CSS).

Opties voor Sass/SCSS

Stijl uitvoerbestand

Hiermee wordt de stijl van het CSS-bestand voor uitvoer opgegeven:

  • Genest - Hiermee wordt de gecompileerde CSS opgemaakt in de bekende modulaire structuur.
  • Compact- Indelingen gecompileerde CSS in een compacte structuur die minder ruimte gebruiken dan met het Geneste of Uitgebreid oppakt.
  • Gecomprimeerd - Hiermee wordt CSS uitgevoerd in een platte structuur.
  • Uitgebreid- Uitvoeren CSS op een uitgebreide manier met elke eigenschap en de regel die één regel opnemen. De eigenschappen zijn ingesprongen binnen de regels, maar de regels zijn op geen enkele manier ingesprongen.

Bronopmerkingen maken

Hiermee worden opmerkingen in het CSS-bestand voor uitvoer gemaakt, waarmee CSS-code wordt toegewezen aan de regel waarop de code is gegenereerd.

Brontoewijzing genereren

Creëert een brontoewijzing (bestand dat de tussenruimte overbrugt tussen hogere programmeertalen zoals Sass en Less, en de lagere taal waarmee ze worden gecompileerd, zoals CSS).

Voorkeuren voor CSS-bron en -uitvoering instellen

U kunt bepalen waar de gegenereerde CSS-bestanden moeten worden geplaatst en welk pad Dreamweaver in de gaten moet houden, en de automatische compilatie activeren wanneer een Sass-/LESS-bestand in het pad met een externe editor wordt gewijzigd.

CSS-preprocessorinstellingen voor bron en uitvoer
CSS-preprocessorinstellingen voor bron en uitvoer

U kunt de volgende bron- en uitvoer-CSS-preprocessorinstellingen instellen in de Sites > dialoogvenster Sites Beheren.

CSS-Uitvoer

De locatie opgeven van het CSS-uitvoerbestand dat wordt gegenereerd.

In dezelfde map als bron

Selecteer deze optie als u wilt dat de gegenereerde CSS-bestanden worden opgeslagen in dezelfde map als de bron-Sass- en Less-bestanden.

Uitvoermap definiëren

Selecteer deze optie en geef een map op waar u de gegenereerde CSS-bestanden wilt opslaan.

Segment van invoerpad vervangen

Met deze optie kunt u een gedeelte van het pad vervangen met behulp van de tekenreeksen Van en Naar.

Bijvoorbeeld, bij de instelling Van: scss en Naar:css, wordt het uitvoerbestand geplaatst binnen dezelfde boomstructuur na het vervangen van SCSS in het pad css.

Bronmap

Geef de submap in de hoofdmap van de site op die moet worden gecontroleerd. Meestal bevat deze submap al uw SCSS- of LESS-bestanden.

Als u Compilatie in de Algemene instellingen hebt ingeschakeld, start Dreamweaver automatisch de CSS-Preprocessor wanneer elk bestand in deze map of in Dreamweaver extern wordt gewijzigd.

Het gebruik van het Compass-framework

Compass is een open-source-CSS Ontwerpframework waarmee u CSS3-stijlbladen kunt maken met Sass.

Dreamweaver biedt ondersteuning voor Compass. Als u stijlbladen maakt met Compass, kunt u deze stijlbladen compileren en CSS-bestanden genereren in Dreamweaver.

  1. Compass-bestanden installeren.

    Als u Compass nog niet hebt geïnstalleerd, kunt u het vanuit Dreamweaver installeren.

    Selecteer in het dialoogvenster Site-instelling de optie CSS-Preprocessors > Compass. Selecteer Compass gebruiken en klik vervolgens op Bestanden installeren.

    Compass-bestanden installeren
    Compass-bestanden installeren

    Alle Compass-bestanden en het *.rb-configuratiebestand worden geïnstalleerd in uw sitemap en u kunt ze zien in het deelvenster Bestanden.

    Geïnstalleerde Compass-bestanden
    Geïnstalleerde Compass-bestanden

  2. Een bestaand op Ruby gebaseerd configuratiebestand opgeven

    Als u Compass al op uw computer hebt geïnstalleerd en de Compass *.rb-bestandsinstelling hebt, kunt u vanuit het dialoogvenster Dreamweaver-Site-instelling het pad opgeven naar het Compass *.rb-bestand in de huidige hoofdmap van de site.

    1. In het dialoogvenster Site-instelling, selecteert u CSS-Preprocessors > Compass.
    2. Schakel het selectievakje Compass gebruiken in.
    3. Klik op Op Ruby gebaseerd configuratiebestand opgeven en blader naar de bestandslocatie. Klik op Opslaan wanneer u klaar bent.
    Een bestaand op Ruby gebaseerd configuratiebestand opgeven
    Een bestaand op Ruby gebaseerd configuratiebestand opgeven

    Opmerking:

    Dit bestand moet zich in de hoofdmap van uw site bevinden.

  3. Handmatig configuratieopties opgeven

    Als u geen bestaande configuratieoptie hebt, kunt u ervoor kiezen deze handmatig op te geven.

    1. In het dialoogvenster Site-instelling, selecteert u CSS-Preprocessors > Compass.
    2. Schakel het selectievakje Compass gebruiken in.
    3. Klik op Configuratieopties handmatig opgeven. Geef de volgende configuratieopties op en klik op Opslaan.

    De volgende velden worden automatisch ingevuld, maar u kunt ze aan uw wensen aanpassen:

    Opmerking:

    Alle paden die in deze opties worden geselecteerd, moeten zich binnen de hoofdmap van de site bevinden.

    HTTP-pad

    Het pad naar het project wanneer deze wordt uitgevoerd in de webserver. Heeft als standaardwaarde "/".

    Afbeeldingenmap

    De map waarin de afbeeldingen worden bewaard. Het is gerelateerd aan het project_pad.

    Map voor gegenereerde afbeeldingen

    De map waarin de gegenereerde afbeeldingen worden bewaard. Het is gerelateerd aan het project_pad. Wordt standaard ingesteld op de waarde van afbeeldingen_dir.

    Lettertypenmap

    De map waarin de lettertype-bestanden worden bewaard.

    Relatieve middelen

    Geeft aan of de functies van de Compasshelper relatieve URL's van de gegenereerde CSS voor middelen of absolute URL's moeten maken met behulp van het HTTP-pad voor dat type Middel.

  4. Als u Automatische compilatie bij opslaan van bestanden hebt geselecteerd in het dialoogvenster Sites > Sites beheren > CSS-preprocessors, genereert Dreamweaver telkens een CSS-bestand wanneer u wijzigingen in uw Sass-bestanden opslaat. U kunt ook een voorvertoning van deze wijzigingen in real-time weergeven in het browservenster. Zie Real-time voorvertoning. voor meer informatie over het in real-time weergeven van uw wijzigingen in een browser.

    Als u geen automatische compilatie wilt toepassen, kunt u een CSS-bestand ook handmatig compileren door een van de volgende handelingen uit te voeren:

    • Klik met de rechtermuisknop op het Sass- Less- of SCSS-bestand in het deelvenster Bestanden en klik op Compileren. 
    • Klik op Gereedschappen > Compileren om het huidige bestand te compileren.
  5. U kunt het gecompileerde CSS-bestand nu aan het HTML-bestand in uw site koppelen. Zie  Koppelen met een externe CSS-stijlpagina. voor meer informatie.

Het gebruik van het Bourbon-framework

Dreamweaver ondersteunt de Bourbon-productenfamilie. Als u stijlbladen maakt met Bourbon, kunt u deze stijlbladen compileren en CSS-bestanden genereren in Dreamweaver.

De volgende Bourbon-aroma's worden ondersteund:

  • Bourbon: een eenvoudige en lichte mengbibliotheek voor Sass
  • Bourbon Neat: een licht, semantisch rasterframework voor Sass en Bourbon
  • Bourbon Bitters: steigerstijlen, variabelen en structuur voor Bourbon-projecten

U kunt het Bourbon-framework importeren door een van de volgende handelingen aan uw code toe te voegen:

  • @import 'bourbon': om Bourbon te importeren
  • @import 'neat': om Bourbon Neat te importeren
  • @import 'base': om Bourbon Bitter te importeren

Dreamweaver gebruikt dan de voorverpakte versie van Bourbon tijdens het compileren van de preprocessorbestanden.

U kunt ook de bestanden van het Bourbon-framework op uw site installeren zodat de volgende updates naar Dreamweaver uw compilatieworkflows niet beïnvloeden. De bestanden van het Bourbon-framework worden gekopieerd naar uw site en dit is het framework dat wordt gebruikt bij de compilatie van alle bestanden die het framework importeren.

Bourbon-, Bourbon Neat- of Bourbon Bitters-bestanden installeren

Als u Bourbon of een van de aroma's wilt installeren, gaat u als volgt te werk:

  1. In het dialoogvenster Site-instelling selecteert u CSS-Preprocessors > Bourbon, Bourbon Neat of Bourbon Bitters.

  2. Klik op Bestanden installeren om de bestanden te installeren in de opgegeven hoofdmap van uw site.

    Bourbon-bestanden installeren
    Bourbon-bestanden installeren

    Alle Bourbon-bestanden worden geïnstalleerd in uw sitemap en u kunt ze zien in het deelvenster Bestanden.

    Geïnstalleerde Bourbon-bestanden
    Geïnstalleerde Bourbon-bestanden

    Als er een fout optreedt, worden fouten weergegeven in het deelvenster Uitvoer (Venster > Resultaten > Uitvoer) en wordt het statusbalkpictogram rood.

CSS-preprocessorbestanden compileren

U kunt de CSS-preprocessorbestanden op een van de volgende manieren compileren:

Automatische compilatie van CSS-preprocessorbestanden instellen

U kunt de opties in Dreamweaver instellen op wijzigingen in een Sass- of Less-bestand automatisch compileren naar de overeenkomstige CSS. U kunt ook de locaties (in de hoofdmap van de site) opgeven waar u de gegenereerde CSS wilt opslaan.

  1. Selecteer in het dialoogvenster Site-instelling CSS-Preprocessors > Algemeen > Automatische compilatie bij opslaan van bestanden.

    Automatische compilatie instellen
    Automatische compilatie instellen

  2. In het dialoogvenster Site-instelling, selecteert u CSS-Preprocessors > Bron en Uitvoer.

  3. In het dialoogvenster Bron en Uitvoer geeft u de locaties op waar u de gegenereerde CSS-bestanden wilt opslaan. U kunt kiezen uit de volgende opties:

    In dezelfde map als bron

    Selecteer deze optie als u wilt dat de gegenereerde CSS-bestanden worden opgeslagen in dezelfde map als de bron-Sass- en Less-bestanden.

    Uitvoermap definiëren

    Selecteer deze optie en geef een map op waar u de gegenereerde CSS-bestanden wilt opslaan.

    Segment van invoerpad vervangen

    Met deze optie kunt u een gedeelte van het pad vervangen met behulp van de tekenreeksen Van en Naar.

  4. Geef de map op waarin zich de Sass- of Less-bestanden bevinden die Dreamweaver moet 'controleren'.

    Als u wijzigingen aanbrengt in een van de bestanden in deze gecontroleerde map, compileert Dreamweaver automatisch de bestanden nadat u deze hebt opgeslagen.

    CSS-preprocessorinstellingen voor bron en uitvoer
    CSS-preprocessorinstellingen voor bron en uitvoer

    Opmerking:

    Dreamweaver controleert en compileert deze bestanden zelfs als u wijzigingen aanbrengt buiten Dreamweaver (bijvoorbeeld met een tekstverwerker).

Na een succesvolle compilatie wordt een bericht weergegeven in het deelvenster Uitvoer (Venster > Resultaten > Uitvoer) en wordt het statuspictogram in de statusbalk groen <icon>. Om de gecompileerde CSS te openen, dubbelklikt u op het succesbericht in het deelvenster.

Bij fouten kan de CSS niet correct worden gecompileerd. Het statuspictogram wordt rood weergegeven <icon> en de fouten en waarschuwingen worden weergegeven in het deelvenster Uitvoer. Dubbelklik op een foutbericht in het deelvenster om snel naar de regel met de codefout te springen. Het CSS-bestand kan pas worden gecompileerd nadat alle fouten zijn opgelost.

Opmerking:

Het deelvenster Uitvoer is normaal gesproken gedokt onderaan de werkruimte. Als het deelvenster is gesloten, opent u het via Venster > deelvenster Uitvoer.

Als het statuspictogram rood is, kunt u hiermee ook schakelen tussen de statussen van het deelvenster Uitvoer (weergeven/verbergen).

Nadat u het gecompileerde CSS-bestand hebt verkregen, kunt u uw webpagina koppelen aan de stijlpagina. Wanneer u wijzigingen in CSS-preprocessors aanbrengt, worden de bijbehorende gecompileerde CSS-bestanden automatisch bijgewerkt. De webpagina wordt automatisch vernieuwd in Liveweergave.

Meer informatie over het koppelen van uw webpagina aan het stijlblad, vindt u op Koppelen aan een extern CSS-stijlblad.

Handmatig een CSS-preprocessorbestand compileren

In sommige situaties (wanneer u bijvoorbeeld geen Dreamweaver-site hebt gedefinieerd), kunt u een CSS-preprocessorbestand handmatig compileren.

Schakel in dat geval Automatisch compileren bij opslaan van bestanden uit in het deelvenster CSS-preprocessors > Algemeen van het dialoogvenster Site-instelling.

Als u een CSS-preprocessor handmatig wilt compileren, klikt u met de rechtermuisknop op het bestand in het deelvenster Bestanden en klikt u vervolgens op Compileren.

CSS-preprocessorbestanden handmatig compileren via het deelvenster Bestanden
CSS-preprocessorbestanden handmatig compileren via het deelvenster Bestanden

Om het huidige bestand te compileren, kunt u ook klikken op Gereedschappen > Compileren.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid