Handboek Annuleren

CSS-preprocessors gebruiken in Dreamweaver

  1. Dreamweaver Handboek
  2. Inleiding
    1. Basisbeginselen van responsief webontwerp
    2. Nieuwe functies in Dreamweaver
    3. Webontwikkeling met Dreamweaver: een overzicht
    4. Dreamweaver / Algemene vragen
    5. Sneltoetsen
    6. Systeemvereisten voor Dreamweaver
    7. Functieoverzicht
  3. Dreamweaver en Creative Cloud
    1. Dreamweaver-instellingen synchroniseren met Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Photoshop-bestanden gebruiken in Dreamweaver
    4. Werken met Adobe Animate en Dreamweaver
    5. Voor het web geoptimaliseerde SVG-bestanden uit Libraries extraheren
  4. De werkruimten en weergaven van Dreamweaver
    1. De werkruimte van Dreamweaver
    2. De werkruimte van Dreamweaver optimaliseren voor visuele ontwikkeling
    3. Bestanden zoeken op bestandsnaam of inhoud | Mac OS
  5. Sites opzetten
    1. Over Dreamweaver-sites
    2. Een lokale versie van uw site instellen
    3. Verbinding maken met een publicatieserver
    4. Een testserver instellen
    5. Instellingen van Dreamweaver-sites importeren en exporteren
    6. Bestaande websites overzetten van een externe server naar de hoofdmap van uw lokale site
    7. Toegankelijkheidsfuncties in Dreamweaver
    8. Geavanceerde instellingen
    9. Sitevoorkeuren instellen voor het overzetten van bestanden
    10. Proxyserverinstellingen opgeven in Dreamweaver
    11. Dreamweaver-instellingen synchroniseren met Creative Cloud
    12. Git gebruiken in Dreamweaver
  6. Bestanden beheren
    1. Bestanden maken en openen
    2. Bestanden en mappen beheren
    3. Bestanden van uw server ophalen en op uw server plaatsen
    4. Bestanden inchecken en uitchecken
    5. Bestanden synchroniseren
    6. Bestanden vergelijken om verschillen op te sporen
    7. Bestanden en mappen op uw Dreamweaver-site camoufleren
    8. Ontwerpnotities inschakelen voor Dreamweaver-sites
    9. Potentieel misbruik van Gatekeeper voorkomen
  7. Lay-out en ontwerp
    1. Visuele lay-outhulpmiddelen gebruiken
    2. Uw pagina opmaken met CSS
    3. Responsieve websites ontwerpen met Bootstrap
    4. Mediaquery's maken en gebruiken in Dreamweaver
    5. Inhoud in tabellen presenteren
    6. Kleuren
    7. Responsive design met dynamische rasterlay-outs
    8. Extract in Dreamweaver
  8. CSS
    1. Informatie over CSS (Cascading Style Sheets)
    2. Pagina's opmaken met CSS ontwerpen
    3. CSS-preprocessors gebruiken in Dreamweaver
    4. CSS-stijlvoorkeuren instellen in Dreamweaver
    5. CSS-regels verplaatsen in Dreamweaver
    6. Inline CSS converteren naar een CSS-regel in Dreamweaver
    7. Werken met div-tags
    8. Verlopen toepassen op een achtergrond
    9. CSS3-overgangseffecten maken en bewerken in Dreamweaver
    10. Code opmaken
  9. Pagina-inhoud en assets
    1. Pagina-eigenschappen instellen
    2. Eigenschappen voor CSS-koppen en CSS-koppelingen
    3. Werken met tekst
    4. Tekst, tags en kenmerken zoeken en vervangen
    5. Het deelvenster DOM
    6. Bewerken in Live View
    7. Documenten coderen in Dreamweaver
    8. Elementen selecteren en weergeven in het documentvenster
    9. Teksteigenschappen instellen in de eigenschappencontrole
    10. Spelling op een webpagina controleren
    11. Horizontale lijnen gebruiken in Dreamweaver
    12. Lettertypecombinaties toevoegen en aanpassen in Dreamweaver
    13. Werken met assets
    14. Datums in Dreamweaver invoegen en bijwerken
    15. Favoriete assets maken en beheren in Dreamweaver
    16. Afbeeldingen invoegen en bewerken in Dreamweaver
    17. Mediaobjecten toevoegen
    18. Video's toevoegen in Dreamweaver
    19. HTML5-video invoegen
    20. SWF-bestanden invoegen
    21. Audio-effecten toevoegen
    22. HTML5-audio invoegen in Dreamweaver
    23. Werken met bibliotheekitems
    24. Arabische en Hebreeuwse tekst gebruiken in Dreamweaver
  10. Koppelingen en navigatie
    1. Over koppelingen en navigatie
    2. Koppelingen
    3. Afbeeldingen met hyperlinks
    4. Problemen met koppelingen oplossen
  11. jQuery-widgets en -effecten
    1. De jQuery-gebruikersinterface en mobiele widgets in Dreamweaver gebruiken
    2. jQuery-effecten gebruiken in Dreamweaver
  12. Websites coderen
    1. Over coderen in Dreamweaver
    2. Coderingsomgeving in Dreamweaver
    3. Coderingsvoorkeuren instellen
    4. Codekleuren aanpassen
    5. Code schrijven en bewerken
    6. Coderingstips en codevoltooiing
    7. Code samenvouwen en uitvouwen
    8. Code hergebruiken met codefragmenten
    9. Linting voor code gebruiken
    10. Code optimaliseren
    11. Code bewerken in de ontwerpweergave
    12. Werken met de kopinhoud van pagina's
    13. Include-bestanden op de server invoegen in Dreamweaver
    14. Tagbibliotheken gebruiken in Dreamweaver
    15. Aangepaste tags importeren in Dreamweaver
    16. JavaScript-gedrag gebruiken (algemene instructies)
    17. Ingebouwd JavaScript-gedrag toepassen
    18. Over XML en XSLT
    19. XSL-transformaties op de server uitvoeren in Dreamweaver
    20. XSL-transformaties op de client uitvoeren in Dreamweaver
    21. Tekenentiteiten toevoegen voor XSLT in Dreamweaver
    22. Code opmaken
  13. Productonafhankelijke workflows
    1. Extensies in Dreamweaver installeren en gebruiken
    2. In-app updates in Dreamweaver
    3. Microsoft Office-documenten invoegen in Dreamweaver (alleen Windows)
    4. Werken met Fireworks en Dreamweaver
    5. Inhoud bewerken op Dreamweaver-sites met behulp van Contribute
    6. Integratie van Dreamweaver met Business Catalyst
    7. Persoonlijke e-mailcampagnes maken
  14. Sjablonen
    1. Over Dreamweaver-sjablonen
    2. Sjablonen en op een sjabloon gebaseerde documenten herkennen
    3. Een Dreamweaver-sjabloon maken
    4. Bewerkbare gebieden maken in sjablonen
    5. Herhalingsgebieden en tabellen maken in Dreamweaver
    6. Optionele gebieden in sjablonen gebruiken
    7. Bewerkbare tagkenmerken in Dreamweaver definiëren
    8. Geneste sjablonen maken in Dreamweaver
    9. Sjablonen bewerken, bijwerken en verwijderen
    10. XML-inhoud exporteren en importeren in Dreamweaver
    11. Een sjabloon uit een bestaand document toepassen of verwijderen
    12. Inhoud bewerken in Dreamweaver-sjablonen
    13. Syntaxisregels voor sjabloontags in Dreamweaver
    14. Voorkeuren voor de markering van sjabloongebieden instellen
    15. Voordelen van het gebruik van sjablonen in Dreamweaver
  15. Mobiel en meerdere schermen
    1. Mediaquery's maken
    2. Paginastand voor mobiele apparaten wijzigen
    3. Web-apps voor mobiele apparaten maken met Dreamweaver
  16. Dynamische sites, pagina's en webformulieren
    1. Informatie over web-applicaties
    2. Uw computer instellen voor het ontwikkelen van applicaties
    3. Problemen met databaseverbindingen oplossen
    4. Verbindingsscripts verwijderen in Dreamweaver
    5. Dynamische pagina's ontwerpen
    6. Overzicht van dynamische inhoudsbronnen
    7. Bronnen met dynamische inhoud definiëren
    8. Dynamische inhoud toevoegen aan pagina's
    9. Dynamische inhoud wijzigen in Dreamweaver
    10. Databaserecords weergeven
    11. Livegegevens leveren en problemen oplossen Dreamweaver
    12. Aangepast servergedrag toevoegen in Dreamweaver
    13. Formulieren maken met Dreamweaver
    14. Formulieren gebruiken om informatie van gebruikers te verzamelen
    15. ColdFusion-formulieren maken en inschakelen in Dreamweaver
    16. Webformulieren maken
    17. Verbeterde HTML5-ondersteuning voor formulierelementen
    18. Een formulier ontwikkelen met Dreamweaver
  17. Applicaties visueel samenstellen
    1. Hoofd- en detailpagina's maken in Dreamweaver
    2. Zoekpagina's en resultatenpagina's maken
    3. Een pagina voor het invoegen van records maken
    4. Een pagina voor het bijwerken van records maken in Dreamweaver
    5. Pagina's voor het verwijderen van records maken in Dreamweaver
    6. ASP-opdrachten gebruiken om een database aan te passen in Dreamweaver
    7. Een registratiepagina maken
    8. Een aanmeldingspagina maken
    9. Een pagina maken waartoe alleen geautoriseerde gebruikers toegang hebben
    10. Mappen beveiligen in ColdFusion met Dreamweaver
    11. ColdFusion-componenten gebruiken in Dreamweaver
  18. Websites testen, voorvertonen en publiceren
    1. Pagina's voorvertonen
    2. Dreamweaver-webpagina's voorvertonen op meerdere apparaten
    3. Uw Dreamweaver-site testen
  19. Problemen oplossen
    1. Opgeloste problemen
    2. Bekende problemen

 

 

Lees hoe u werkt met CSS-preprocessorbestanden en deze compileert in Dreamweaver.

CSS is een taal die de stijl van een HTML-document beschrijft. Met CSS-preprocessors kunt u code die is geschreven in een voorbewerkte (preprocessed) taal, compileren naar de meest voorkomende CSS. Met voorbewerkte taal komt CSS meer in de buurt van een programmeertaal.

Met preprocessors kunt u met name variabelen, mixins, functies en nog veel meer andere technieken gebruiken die
in CSS niet mogelijk zijn. Met CSS-preprocessors hoeft u alles slechts eenmaal te definiëren, waarna u dit opnieuw kunt gebruiken. Daardoor is CSS eenvoudig te onderhouden en uit te breiden.

Met een CSS-preprocessor kunt u ook nettere en eenvoudiger te onderhouden CSS produceren. Als u websites maakt die verwijzen naar een aantal CSS-bestanden, kunt u CSS-preprocessors zoals Sass of Compass gebruiken, zodat u minder handmatig hoeft te coderen, te kopiëren en te plakken.

Dreamweaver gebruikt een ingebouwde Ruby-Sass-compiler om de SCSS- of LESS-bestanden te compileren. Dreamweaver ondersteunt Compass- en Bourbon-frameworks om Sass-bestanden te compileren.

LESS is gebaseerd op JavaScript, terwijl Sass is gebaseerd op Ruby. U hoeft echter niets te weten over deze talen. U hoeft ook geen opdrachtregel te gebruiken om de bestanden naar CSS te compileren. Dreamweaver compileert deze bestanden automatisch in CSS met de JavaScript-bibliotheek less.js wanneer u de bestanden laadt, bewerkt of opslaat.

Ondersteunde versies:

  • Sass: 3.4.25
  • LESS: 2.7.2
  • Compass: 1.0.3
  • Bourbon: 4.2.6
  • Bourbon Neat: 1.7.3
  • Bourbon Bitters: 1.2.0

Hoe gaat Dreamweaver om met CSS-preprocessors?

Hoe Dreamweaver omgaat met CSS-preprocessors, is afhankelijk van het feit of u een site hebt gedefinieerd. Als u een site definieert, kunt u voorkeuren voor de CSS-preprocessor instellen en ook de Compass- en Bourbon-frameworks vanuit Dreamweaver gebruiken.

Wanneer u een site definieert, kunt u aanpassen hoe CSS-preprocessors in Dreamweaver werken door sitespecifieke voorkeuren voor CSS-preprocessors in te stellen. Als u sitespecifieke voorkeuren voor CSS-preprocessors instelt, kunt u compilatieopties per site opgeven. U kunt ook de locatie van Sass- en CSS-bestanden en sitespecifieke preprocessoropties aanpassen.

Lees verder voor meer informatie over het gebruik van Dreamweaver met CSS-preprocessors:

Dreamweaver 2017 en CSS-preprocessors

In Dreamweaver 2017 is ondersteuning van CSS-preprocessors ingebouwd. U kunt dus werken met Sass/LESS/SCSS-bestanden in Dreamweaver. Met Ctrl+S of Cmd+S kunt u eenvoudig automatisch CSS compileren in Dreamweaver. U kunt ook handmatig afzonderlijke CSS-bestanden compileren via Gereedschappen > Compileren (of F9). De wijzigingen worden ook weerspiegeld in alle geopende HTML-bestanden waaraan deze gecompileerde CSS is gekoppeld of verbonden.

Hier volgt een uitgebreide workflow van de taken die u moet uitvoeren wanneer u CSS-preprocessors gebruikt:

  • Installeer de juiste compiler als u Compass of Bourbon vanuit Dreamweaver wilt gebruiken. U kunt de installatie met één klik uitvoeren. Configureer de instellingen van uw CSS-preprocessor.

Installeer de compiler alleen als u een kopie van de frameworkbestanden wilt (Bourbon) of als u standaard scss-bestanden en op Ruby gebaseerde configuratiebestanden wilt genereren (Compass). Het wordt aanbevolen een kopie van de frameworkbestanden te bewaren. Als bepaalde mixins of functies van het ontwerpframework in latere revisies worden verwijderd, hebt u nog steeds toegang tot de preprocessorbestanden binnen uw site.

  • Zorg ervoor dat automatisch compileren is ingeschakeld. Druk daarna op Opslaan om de CSS-bestanden bij te werken.
  • (Optioneel) Kijk hoe de wijzigingen worden weerspiegeld in Live View of in een real-time voorvertoning van alle HTML-pagina's waarvoor de gegenereerde css wordt gebruikt.

Dreamweaver 2015 en CSS-preprocessors

In Dreamweaver 2015 en eerdere CC-versies kunt u Sass-, LESS- en SCSS-bestanden gebruiken met Dreamweaver. U moet deze bestanden echter zelf compileren buiten Dreamweaver.
Uw workflow komt ongeveer overeen met de volgende stappen:

  1. Download en installeer een compiler.
  2. Stel een grunt-taak (Gruntfile.js) voor de compiler in om uw Sass/LESS/SCSS-bestand te lezen.
  3. Stel nog een grunt-taak in om het bestand naar CSS te compileren, waarna u dit binnenhaalt in Dreamweaver.

U moet deze stappen telkens uitvoeren wanneer u een wijziging aanbrengt in uw Sass/LESS/SCSS-bestand.

Opmerking:

Bekijk deze zelfstudievideo om te leren hoe u uw CSS kunt verbeteren met preprocessors.

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 uitgebreide workflow van de taken die u moet uitvoeren 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. Stel voorkeuren voor CSS-preprocessors in (geef bijvoorbeeld de locatie van de gegenereerde CSS-bestanden op). Deze voorkeuren zijn sitespecifiek. Zie Voorkeuren voor sitespecifieke 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. Stel automatische compilatie in of compileer uw Sass- en LESS-bestanden handmatig. Ga voor meer informatie naar CSS-preprocessorbestanden compileren.

Voorkeuren instellen voor CSS-preprocessors

U kunt sitespecifieke voorkeuren voor CSS-preprocessors instellen via het dialoogvenster Sites > Sites beheren.

Als u sitespecifieke voorkeuren voor CSS-preprocessors bewaart, kunt u uw CSS-preprocessors per site beheren. Hiermee houdt u tevens de controle over de CSS-preprocessor voor elke site, zonder dat u de voorkeuren moet bijwerken telkens wanneer u tussen sites wisselt.

Opmerking:

De instellingen in de subsecties Algemeen en Bron en uitvoer zijn standaard van toepassing op het Ruby-Sass-framework.

Als u de voorkeuren voor Compass wilt instellen, moet u het selectievakje Compass gebruiken in het gedeelte Compass inschakelen.

Algemene CSS-preprocessorinstellingen configureren

U kunt de volgende algemene instellingen voor CSS-preprocessors configureren in het dialoogvenster Sites > Sites beheren > CSS-preprocessors. Deze instellingen zijn standaard van toepassing op het Sass-framework.

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 wanneer u uw Sass-, LESS- of SCSS-bestand opslaat. Als deze optie niet is geselecteerd, moet u de bestanden handmatig compileren telkens wanneer u een wijziging aanbrengt.

LESS-opties

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

Als deze optie is uitgeschakeld, probeert LESS de uitkomst van berekeningen te raden. Bijvoorbeeld:

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

In dit geval levert een lengte vermenigvuldigd met een lengte een oppervlakte op, maar CSS ondersteunt het opgeven van oppervlakten niet. Dreamweaver gaat ervan uit dat de gebruiker voor een van de waarden een getal bedoelde en geen lengtemaat.

Als strikte eenheden zijn ingeschakeld, gaat Dreamweaver ervan uit dat dit een rekenfout is en wordt een fout gegenereerd.

URL's herschrijven als relatieve URL's

Met deze optie is het mogelijk URL's in het gegenereerde CSS-bestand te herschrijven, zodat de URL's altijd relatief zijn ten opzichte van het gegenereerde bestand.

Brontoewijzing genereren

Hiermee wordt een brontoewijzing gemaakt. Een brontoewijzing is een bestand dat de kloof opvult tussen hogere programmeertalen, zoals Sass en LESS, en de lagere taal waarnaar ze worden gecompileerd, zoals CSS.

Opties voor Sass/SCSS

Stijl uitvoerbestand

Hiermee wordt de stijl van het CSS-uitvoerbestand opgegeven:

  • Genest: Hiermee wordt de gecompileerde CSS opgemaakt in de bekende modulaire structuur.
  • Compact: Met deze optie wordt de gecompileerde CSS in een compacte structuur opgemaakt die minder ruimte in beslag dan met de optie Genest of Uitgebreid.
  • Gecomprimeerd: Hiermee wordt CSS uitgevoerd in een platte structuur.
  • Uitgebreid: Hiermee wordt de CSS op een uitgebreide manier uitgevoerd met elke eigenschap en regel op één regel. Eigenschappen worden ingesprongen binnen de regels, maar de regels worden niet ingesprongen.

Bronopmerkingen maken

Hiermee worden opmerkingen toegevoegd aan het CSS-uitvoerbestand, waarmee CSS-code wordt toegewezen aan de regel op basis waarvan de code is gegenereerd.

Brontoewijzing genereren

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

Voorkeuren voor CSS-bron en -uitvoer instellen

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

Opmerking:

Standaard zijn de opties in het gedeelte Bron en uitvoer van toepassing op Sass. Als u deze opties wilt inschakelen voor Compass, moet u het selectievakje Compass gebruiken in het gedeelte Compass inschakelen.

Nadat u deze instellingen hebt gewijzigd en Compass hebt geïnstalleerd, worden alle instellingen gemigreerd naar het bestand config.rb. Als u later instellingen wilt wijzigen, bewerkt u de instellingen rechtstreeks in het bestand config.rb. Wijzigingen in het dialoogvenster Site-instellingen zijn niet van invloed op de compilatie.

Instellingen voor Bron en uitvoer selecteren voor Compass
Instellingen voor Bron en uitvoer selecteren voor Compass

U kunt de volgende bron- en uitvoerinstellingen voor CSS-preprocessors selecteren in het dialoogvenster Sites > Sites beheren.

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

CSS-uitvoer

Geef de locatie op van het CSS-uitvoerbestand dat wordt gegenereerd.

In dezelfde map als de bron

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

Uitvoermap opgeven

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 in de vakken Van en Door. Als u Van: bijvoorbeeld instelt op scss en Naar: op css, wordt het uitvoerbestand geplaatst binnen dezelfde boomstructuur nadat SCSS in het pad is vervangen door 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 hebt ingeschakeld bij Algemene instellingen, activeert Dreamweaver automatisch de CSS-preprocessor. Dreamweaver activeert automatische compilatie wanneer een bestand in de map extern of vanuit Dreamweaver wordt gewijzigd.

Het Compass-framework gebruiken

Compass is een open-source framework voor CSS-ontwerp waarmee u CSS3-stijlpagina's kunt maken met Sass.

Dreamweaver biedt ondersteuning voor Compass. Als u stijlpagina's maakt met Compass, kunt u deze stijlpagina's compileren en CSS-bestanden genereren vanuit Dreamweaver.

  1. Compass-bestanden gebruiken

    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 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 het *.rb-bestand van Compass hebt ingesteld, geeft u in het dialoogvenster Site-instelling van Dreamweaver het pad op naar het *.rb-bestand van Compass in de hoofdmap van de huidige site.

    1. Selecteer in het dialoogvenster Site-instelling de optie CSS-preprocessors > Compass.
    2. Schakel het selectievakje Compass gebruiken in.
    3. Klik op Op Ruby gebaseerd configuratiebestand opgeven en blader naar de bestandslocatie.
    4. 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 de configuratieopties handmatig opgeven.

    1. Selecteer in het dialoogvenster Site-instelling de optie 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 dit wordt uitgevoerd in de webserver. Heeft als standaardwaarde "/".

    Directory voor afbeeldingen

    De map waarin de afbeeldingen worden bewaard. De map is relatief ten opzichte van het projectpad.

    Directory voor gegenereerde afbeeldingen

    De map waarin de gegenereerde afbeeldingen worden bewaard. Deze map is relatief ten opzichte van het projectpad en is standaard ingesteld op de waarde images_dir.

    Lettertypendirectory

    De map waarin de lettertypebestanden worden bewaard.

    Relatieve middelen

    Geeft aan of de functies van de Compass-helper relatieve URL's van de gegenereerde CSS voor middelen moeten maken 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 een CSS-bestand telkens 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 als volgt handmatig compileren:

    • 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 Bourbon-framework gebruiken

Dreamweaver ondersteunt de Bourbon-productfamilie. Als u stijlpagina's maakt met Bourbon, kunt u deze stijlpagina's compileren en CSS-bestanden genereren in Dreamweaver.

De volgende Bourbon-varianten worden ondersteund:

  • Bourbon: een eenvoudige en lichte mixin-bibliotheek voor Sass
  • Bourbon Neat: een licht, semantisch rasterframework voor Sass en Bourbon
  • Bourbon Bitters: stijlen, variabelen en structuur voor het bouwen van 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 Bitters 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 van Dreamweaver uw compilatieworkflows niet beïnvloeden. De bestanden van het Bourbon-framework worden naar de site gekopieerd. Bourbon is het framework dat wordt gebruikt wanneer de compilatie wordt geactiveerd voor een of meer bestanden die het framework importeert.

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

Als u Bourbon of een van de varianten ervan wilt installeren, gaat u als volgt te werk:

  1. Selecteer in het dialoogvenster Site-instelling de optie 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 de sitemap en u kunt ze zien in het deelvenster Bestanden.

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

    Als er een probleem optreedt, worden de 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 opties in Dreamweaver instellen om wijzigingen in een Sass- of LESS-bestand automatisch te compileren naar de desbetreffende CSS. U kunt ook de locaties (binnen de hoofdmap van de site) opgeven waar u de gegenereerde CSS wilt opslaan.

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

    Automatische compilatie instellen
    Automatische compilatie instellen

  2. Klik op CSS-preprocessors > Bron en uitvoer.

  3. Geef de locaties op waar u de gegenereerde CSS-bestanden wilt opslaan. U kunt kiezen uit de volgende opties:

    In dezelfde map als de bron

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

    Uitvoermap opgeven

    Selecteer deze optie en geef de 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 in de vakken Van en Door.

  4. Geef de map op met de Sass- of LESS-bestanden die Dreamweaver moet volgen.

    Als u wijzigingen aanbrengt in een van de bestanden in de gevolgde 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 op de statusbalk groen. Als u de gecompileerde CSS wilt openen, dubbelklikt u op het bericht in het deelvenster.

Als er fouten zijn gevonden, betekent dit dat de CSS niet correct is gecompileerd. Het statuspictogram wordt rood en alle 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 vastgezet onder aan de werkruimte. Als het deelvenster is gesloten, klikt u op Venster > Uitvoer.

Als het statuspictogram rood is, kunt u hiermee ook het deelvenster Uitvoer weergeven of 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 Live View.

Meer informatie over het koppelen van uw webpagina aan de stijlpagina vindt u in Koppelen aan een externe CSS-stijlpagina.

Handmatig een CSS-preprocessorbestand compileren

In sommige situaties (wanneer u bijvoorbeeld geen Dreamweaver-site hebt gedefinieerd) wilt u een CSS-preprocessorbestand mogelijk 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

U kunt ook klikken op Gereedschappen > Compileren om het huidige bestand te compileren.

 Adobe

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?

Adobe MAX 2024

Adobe MAX
De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX

De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX 2024

Adobe MAX
De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX

De creativiteitsconferentie

14–16 oktober Miami Beach en online