CSS-preprocessors gebruiken 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. Voorbewerkte taal brengt CSS naar een niveau dat dichter bij een programmeertaal ligt.

Specifiek stellen preprocessors je in staat om variabelen, mix-ins, functies en vele andere technieken te gebruiken die
niet mogelijk zijn in CSS. Met CSS-preprocessors kun je alles eenmaal definiëren en herhaaldelijk hergebruiken, wat resulteert in onderhoudbare en uitbreidbare CSS.

Met een CSS-preprocessor kunt u ook nettere en eenvoudiger te onderhouden CSS produceren. Als je websites maakt die naar een aantal CSS-bestanden verwijzen, kunnen CSS-preprocessors zoals Sass of Compass handmatig coderen en kopiëren/plakken-acties verminderen.

Dreamweaver gebruikt een ingebouwde Ruby-Sass-compiler om de SCSS- of LESS-bestanden te compileren. Dreamweaver ondersteunt ook Compass en Bourbon-kaders voor het compileren van Sass-bestanden. 

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 naar CSS met behulp van de less.js JavaScript-bibliotheek wanneer je deze 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 je een site definieert, kun je CSS-preprocessor voorkeuren instellen en ook de Compass- en Bourbon-kaders 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. Je kunt ook de locatie van Sass- en CSS-bestanden aanpassen, evenals preprocessor-opties die specifiek zijn voor elke site.

Lees verder om te weten hoe je Dreamweaver met CSS-preprocessors gebruikt:

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 weergegeven in alle open HTML-bestanden waar deze gecompileerde CSS gekoppeld of bijgevoegd is.

Hier is een workflow op hoog niveau van de taken bij het gebruik van CSS-preprocessors:

• Installeer de juiste compiler als u Compass of Bourbon vanuit Dreamweaver wilt gebruiken. U kunt de installatie met één klik uitvoeren. Stel je CSS-preprocessorinstellingen in.

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 uit het authoring-kader worden verwijderd in latere revisies, kun je nog steeds toegang krijgen tot de preprocessor-bestanden binnen je site.

• Zorg ervoor dat automatisch compileren is ingeschakeld. Druk vervolgens op Opslaan om de CSS-bestanden bij te werken.
• (Optioneel) Bekijk de wijzigingen die zichtbaar worden in Live View of Real-time Preview in alle HTML-pagina's waar 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. Je moest deze bestanden echter zelf buiten de Dreamweaver-applicatie compileren.
Je workflow zou de volgende stappen omvatten:

1. Download en installeer een compiler.
2. Stel een grunt-taak (Gruntfile.js) in zodat de compiler je Sass/LESS/SCSS-bestand kan lezen.
3. Stel een andere grunt job in om het bestand te compileren naar CSS, dat je vervolgens in Dreamweaver importeert.

Je moet deze stappen elke keer uitvoeren wanneer je een wijziging aanbrengt in je Sass/LESS/SCSS-bestand.

Als u geen site hebt gedefinieerd, kunt u ervoor kiezen om uw Sass- en LESS-bestanden handmatig te compileren. De ondersteuning voor Compass en Bourbon-frameworks is echter niet ondersteund.

Hoe kunt u CSS-preprocessors gebruiken in Adobe Dreamweaver?

Hier is een workflow op hoog niveau van de taken die betrokken zijn bij het gebruiken van CSS-preprocessors:

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. Voor meer informatie over het instellen van een Dreamweaver site, zie Over Dreamweaver sites.
2. Stel voorkeuren voor CSS-preprocessors in (geef bijvoorbeeld de locatie van de gegenereerde CSS-bestanden op). Deze voorkeuren zijn sitespecifiek. Voor meer informatie, zie Sitespecifieke CSS-preprocessorvoorkeuren instellen.
3. Als u specifieke frameworks, zoals Compass of Bourbon, wilt gebruiken, kunt u de instellingen voor deze frameworks opgeven. Voor meer informatie, zie: Het Compass kader gebruiken of het Bourbon kader gebruiken.
4. Stel automatische compilatie in of compileer uw Sass- en LESS-bestanden handmatig. Voor meer informatie, zie CSS-preprocessorbestanden compileren.

Voorkeuren instellen voor CSS-preprocessors

Je kunt site-specifieke 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. Deze actie geeft je ook controle over de CSS-preprocessor voor elke site, zonder dat je telkens voorkeuren hoeft bij te werken wanneer je van site wisselt.

Algemene CSS-preprocessorinstellingen configureren

U kunt de volgende algemene instellingen voor CSS-preprocessors configureren in het dialoogvenster Sites > Sites beheren > CSS-preprocessors. Standaard zijn deze instellingen van toepassing voor het Saas kader.

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 wordt geselecteerd, moet je de bestanden elke keer dat je een wijziging aanbrengt handmatig compileren.

LESS-opties

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

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 bedoelde dat een van de waarden een getal is en geen lengte-eenheid.

Met strikte eenheden aan gaat Dreamweaver ervan uit dat het een berekeningsfout is en geeft een foutmelding.

Deze optie stelt je in staat om URL's in het gegenereerde CSS-bestand te herschrijven zodat de URL's altijd relatief zijn aan het gegenereerde bestand. 

Hiermee wordt een brontoewijzing gemaakt. Source map is een bestand dat de kloof overbrugt tussen talen op hoog niveau zoals Sass en LESS, en de taal op laag niveau waarnaar ze compileren, zoals CSS.

Opties voor Sass/SCSS

Specificeert de stijl van het CSS-uitvoerbestand:

• Genest - Formatteert de gecompileerde CSS in de bekende, modulaire structuur.
• Compact - Formatteert de gecompileerde CSS in een compacte structuur die minder ruimte inneemt dan genest of uitgevouwen.
• Gecomprimeerd - Geeft de CSS uit in een platte structuur.
• Uitgebreid: Hiermee wordt de CSS op een uitgebreide manier uitgevoerd met elke eigenschap en regel op één regel. Eigenschappen zijn ingesprongen binnen de regels, maar de regels zijn op geen enkele manier ingesprongen. 

Maakt opmerkingen in het CSS-uitvoerbestand dat de CSS-code koppelt aan de regel waaruit deze is gegenereerd.

Maakt een bronkaart (bestand dat de kloof overbrugt tussen talen op hoog Niveau zoals Sass en LESS, en de taal op laag niveau waarnaar ze compileren, zoals CSS). 

Voorkeuren voor CSS-bron en -uitvoer instellen

Je kunt definiëren waar de gegenereerde CSS-bestanden moeten worden geplaatst en het pad dat Dreamweaver moet bewaken en automatische compilatie moet activeren wanneer een Sass/LESS-bestand in het pad wordt gewijzigd met een externe editor.

Je kunt de volgende bron- en uitvoer CSS-preprocessorinstellingen instellen in het dialoogvenster Sites > Sites beheren.

CSS-uitvoer

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

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

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

Met deze optie kunt u een gedeelte van het pad vervangen met behulp van de tekenreeksen in de vakken Van en Door.Als je bijvoorbeeld Van: scss en Naar: css instelt, wordt het uitvoerbestand binnen dezelfde boomstructuur geplaatst waarbij SCSS in het pad wordt vervangen door CSS.

Geef de submap in de hoofdmap van de site op die moet worden gecontroleerd. Meestal bevat deze submap al je 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 binnen de map extern wordt gewijzigd of vanuit Dreamweaver.

Het Compass-framework gebruiken

Compass is een open-source CSS-authoring-kader waarmee je CSS3-stylesheets kunt maken met Sass.

Dreamweaver biedt ondersteuning voor Compass. Als je stylesheets maakt met Compass, kun je deze stylesheets compileren en CSS-bestanden genereren vanuit Dreamweaver.

Het Bourbon-framework gebruiken

Dreamweaver ondersteunt de Bourbon-productfamilie. Als je stijlbladen maakt met Bourbon, kun je deze stijlbladen compileren en CSS-bestanden genereren vanuit Dreamweaver.

De volgende Bourbon-varianten worden ondersteund:

• Bourbon - Een eenvoudige en lichtgewicht mixbibliotheek voor Sass
• Bourbon Neat - Een lichtgewicht semantisch gridkader voor Sass en Bourbon
• Bourbon Bitters: stijlen, variabelen en structuur voor het bouwen van Bourbon-projecten

Je kunt het Bourbon-kader importeren door een van de volgende toe te voegen in je code:

• @import "bourbon" - om Bourbon te importeren
• @import "neat" – om Bourbon Neat te importeren
• @import "base" – om Bourbon Bitter te importeren

Dreamweaver gebruikt vervolgens 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 kader dat wordt gebruikt wanneer compilatie wordt geactiveerd voor een van de bestanden die het kader importeren.

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

Om Bourbon of een van zijn varianten te installeren:

CSS-preprocessorbestanden compileren

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

• Automatische compilatie van CSS-preprocessorbestanden instellen
• Een CSS-preprocessorbestand handmatig 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. Je kunt ook de locaties opgeven (binnen de site-hoofdmap) waar je de gegenereerde CSS wilt opslaan.

Na een geslaagde compilatie wordt er een bericht weergegeven in het paneel Output (Venster > Resultaten > Output).Het statuspictogram in de statusbalk wordt groen weergegeven.Om de gecompileerde CSS te openen, dubbelklik je op het succesbericht in het paneel.

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 wordt pas succesvol gecompileerd als alle fouten zijn opgelost.

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 ook automatisch vernieuwd in Live View.

Voor meer informatie over het koppelen van je webpagina aan het style sheet, zie Koppelen aan een extern CSS-style sheet.

Handmatig een CSS-preprocessorbestand compileren

In sommige situaties (zoals wanneer je geen Dreamweaver site hebt gedefinieerd), wil je misschien handmatig een CSS-preprocessorbestand compileren.

Schakel in dergelijke scenario's Enable Auto Compilation on File Save uit in het deelvenster CSS Preprocessors > General van het dialoogvenster Site Setup.

Om handmatig een CSS-preprocessor te compileren, klik je met de rechtermuisknop op het bestand in het paneel Files en klik je op Compile.

Je kunt ook op Tools > Compile klikken om het huidige bestand te compileren.