Använda CSS-preprocessorer i Dreamweaver

CSS är ett språk som beskriver formatet i ett HTML-dokument. CSS-preprocessorer kompilerar kod som är skriven i ett förbehandlat språk till den vanligaste formen av CSS. Förbehandlat språk höjer CSS till en nivå närmare ett programmeringsspråk.

Specifikt tillåter förprocessorer dig att använda variabler, mix-ins, funktioner och många andra tekniker som
inte är möjliga i CSS. Med CSS-förprocessorer kan du definiera allt en gång och återanvända det upprepade gånger, vilket resulterar i underhållbar och utbyggbar CSS.

Med hjälp av en CSS-preprocessor kan du även skapa en renare CSS som är enklare att underhålla. Om du skapar webbsidor som refererar till ett antal CSS-filer kan användning av CSS-förprocessorer som Sass eller Compass minska manuell kodning och kopiera/klistra in-åtgärder.

Dreamweaver använder en inbyggd Ruby-Saas-kompilerare för att kompilera SCSS, LESS-filer. Dreamweaver stöder också Compass- och Bourbon-ramverken för kompilering av Sass-filer. 

LESS är JavaScript-baserat och Sass är Ruby-baserat. Du behöver dock inte ha någon kunskap om något av de två språken. Du behöver inte heller använda kommandoradsverktyget för att kompilera filerna till CSS. Dreamweaver kompilerar automatiskt dessa filer till CSS med hjälp av less.js JavaScript-biblioteket när du laddar, redigerar eller sparar dessa filer.

Versioner som stöds:

• 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

Hur Dreamweaver hanterar CSS-preprocessorer

Hur Dreamweaver hanterar CSS-preprocessorer varierar beroende på om du har definierat en plats eller inte. Om du definierar en webbplats kan du ange CSS-förprocessorinställningar och även använda ramverken Compass och Bourbon i Dreamweaver.

När du definierar en plats kan du anpassa hur CSS-preprocessorer fungerar i Dreamweaver genom att ange platsspecifika inställningar för CSS-preprocessorer. Genom att ange inställningar för platsspecifika CSS-preprocessorer kan du ange kompileringsalternativ på platsbasis. Du kan också anpassa platsen för Sass- och CSS-filer samt förprocessoralternativ som är specifika för varje plats.

Läs vidare för att lära dig hur du använder Dreamweaver med CSS-förprocessorer:

Dreamweaver 2017 och CSS-preprocessorer

Dreamweaver 2017 har inbyggt stöd för CSS-preprocessorer. Det betyder att du kan arbeta med Sass/LESS/SCSS-filer i Dreamweaver. Med kortkommandot Ctrl+S eller Cmd+S kan du kompilera CSS automatiskt i Dreamweaver. Du kan även kompilera enskilda CSS-filer manuellt med Verktyg > Kompilera (eller F9). Ändringarna återspeglas också i alla öppna HTML-filer där denna kompilerade CSS är länkad eller bifogad.

Här är ett arbetsflöde på hög nivå för de uppgifter som ingår när du använder CSS-förprocessorer:

• Installera rätt kompilerare beroende på om du vill använda Compass eller Bourbon i Dreamweaver. Installationen utförs med en klickning. Ställ in dina CSS-förprocessorinställningar.

Installera bara kompileraren om du vill ha en kopia av ramverksfilerna (Bourbon) eller om du vill generera SCSS-filer och Ruby-baserade konfigurationsfiler (Compass). Du rekommenderas behålla en kopia av ramverksfilerna. Om vissa mixins eller funktioner från framtagningsramverket tas bort i senare revisioner kan du fortfarande komma åt förprocessorfilerna inom din plats.

• Kontrollera att automatisk kompilering är aktiverat. Tryck sedan på Spara för att uppdatera CSS-filerna.
• (Valfritt) Visa ändringarna som återspeglas i Live-vyn eller Realtidsförhandsgranskning på alla HTML-sidor där den genererade css:en används.

Dreamweaver 2015 och CSS-preprocessorer

I Dreamweaver 2015 och tidigare CC-versioner kan du använda Sass-, LESS- och SCSS-filer med Dreamweaver. Du var dock tvungen att kompilera dessa filer själv utanför Dreamweaver-applikationen.
Ditt arbetsflöde skulle likna följande steg:

1. Hämta och installera en kompilator.
2. Ställ in ett grunt-jobb (Gruntfile.js) för kompilatorn att läsa din Sass/LESS/SCSS-fil.
3. Ställ in ett annat grunt-jobb för att kompilera filen till CSS, som du sedan tar in i Dreamweaver.

Du måste utföra dessa steg varje gång du gör en ändring i din Sass/LESS/SCSS-fil.

Om du inte har definierat en plats kan du välja att kompilera dina Sass- och LESS-filer manuellt. Däremot stöds inte ramverken Compass och Bourbon.

Hur använder jag CSS-preprocessorer i Dreamweaver?

Här är ett arbetsflöde på hög nivå över de uppgifter som ingår när du använder CSS-preprocessorer:

1. Konfigurera en plats i Dreamweaver. Se till att Sass- eller LESS-filen som du försöker kompilera inkluderas i platsens rotmapp. Om du redan har definierat en plats, och Sass- eller LESS-filen inkluderas i platsens rot, fortsätter du till nästa steg. För mer information om att ställa in en Dreamweaver-plats, se Om Dreamweaver-platser.
2. Ange inställningar för CSS-preprocessorer (t.ex. att definiera sökvägen för genererade CSS-filer). Dessa inställningar är platsspecifika. För mer information, se Ställa in platsspecifika CSS-preprocessor-inställningar.
3. Om du vill använda vissa ramverk, till exempel Compass eller Bourbon, kan du ange inställningar för dessa ramverk. För mer information, se: Använda Compass-ramverket eller Använda Bourbon-ramverket.
4. Konfigurera automatisk komplettering eller kompilera dina Sass- och LESS-filer automatiskt. För mer information, se Kompilera CSS-preprocessor-filer.

Ange inställningar för CSS-preprocessorer

Du kan ställa in platsspecifika inställningar för CSS-preprocessorer med dialogrutan Platser > Hantera platser.

Med platsspecifika CSS-preprocessorinställningar kan du hantera dina CSS-preprocessorer på platsbasis. Den här åtgärden ger dig också kontroll över CSS-preprocessorn för varje plats, utan att behöva uppdatera inställningar varje gång du byter plats.

Ange allmänna inställningar för CSS-preprocessorer

Du kan ange följande allmänna inställningar för CSS-preprocessorer i Platser > Hantera platser > CSS-preprocessorer. Som standard gäller dessa inställningar för Saas-ramverket.

Markera den här kryssrutan för att aktivera automatisk kompilering av CSS-preprocessorer. Om du väljer det här alternativet skapas automatiskt en CSS-fil i Dreamweaver när du sparar din Sass-, LESS- eller SCSS-fil. Om det här alternativet lämnas avmarkerat måste du kompilera filerna manuellt varje gång du gör en ändring.

Alternativ för LESS

Bearbetar bara matematik inom parentes. Exempel: (100px/25px) bearbetas korrekt, men 20% + 10% (utan parentes) bearbetas inte. När det här alternativet är inaktiverat bearbetas all matematik i filen.

Om det här alternativet inte väljs försöker LESS att beräkna utdataenheten. Exempel:

.class {

property: 1px * 2px;

}

I det här fallet multipliceras längd med längd och ger en area, men CSS har inget stöd för att ange areor. Dreamweaver antar att användaren menade att ett av värdena ska vara ett värde och inte en längdenhet.

Med strikta enheter påslagna antar Dreamweaver att det är ett beräkningsfel och ger ett felmeddelande.

Det här alternativet gör att du kan skriva om URL:er i CSS-filen som genereras så att URL:erna alltid är relativa till den genererade filen. 

Skapar en källmappning. Källkarta är en fil som överbryggar klyftan mellan högnivåspråk som Sass och LESS, och lågnivåspråket de kompilerar till, som CSS.

Alternativ för Sass/SCSS

Anger stilen för CSS-resultatfilen:

• Kapslad - Formaterar den kompilerade CSS:en i den välkända, modulära strukturen.
• Kompakt - Formaterar den kompilerade CSS:en i en kompakt struktur som tar upp mindre plats än Nested eller Expanded.
• Komprimerad - Matar ut CSS:en i en platt struktur.
• Expanded– Matar ut CSS i ett utökat format där varje egenskap och regel tar upp en rad. Egenskaper indenteras inom reglerna, men reglerna indenteras inte på något sätt. 

Skapar kommentarer i CSS-utdatafilen som mappar CSS-koden till raden från vilken den genererades.

Skapar en källkarta (fil som överbryggar klyftan mellan högnivåspråk som Sass och LESS, och lågnivåspråket de kompileras till, som CSS). 

Ange inställningar för CSS-källa och CSS-utdata

Du kan definiera var de genererade CSS-filerna ska placeras och sökvägen som Dreamweaver ska bevaka och utlösa automatisk kompilering när en Sass/LESS-fil i sökvägen ändras med en extern redigerare.

Du kan ange följande käll- och utdata CSS-preprocessorinställningar i dialogrutan Platser > Hantera platser.

CSS-utdata

Ange platsen för CSS-utdatafilen som genereras.

Välj detta alternativ om du vill att de genererade CSS-filerna ska sparas i samma mapp som Sass- och LESS-källfilerna.

Välj detta alternativ och ange en mapp där du vill spara de genererade CSS-filerna.

Med det här alternativet kan du ersätta en del av sökvägen med strängarna Från och Till. Till exempel, när du anger Från: scss och Till: css, placeras utdatafilen inom samma trädstruktur efter att ha ersatt SCSS i vägen med css.

Ange undermappen i platsroten som ska bevakas. Vanligtvis innehåller denna undermapp alla dina SCSS- eller LESS-filer. 

Om du aktiverat Kompilering i Allmänna inställningar utlöser Dreamweaver automatiskt CSS-preprocessorn. Dreamweaver utlöser automatisk kompilering när någon fil inom mappen ändras externt, eller inifrån Dreamweaver.

Använda Compass-ramverket

Compass är ett CSS-ramverk med öppen källkod som låter dig skapa CSS3-stilmallar med Sass.

Dreamweaver har stöd för Compass. Om du skapar stilmallar med Compass kan du kompilera dessa stilmallar och generera CSS-filer från Dreamweaver.

Använda Bourbon-ramverket

Dreamweaver stöder produktserien Bourbon. Om du skapar formatmallar med Bourbon kan du kompilera dessa formatmallar och generera CSS-filer inifrån Dreamweaver.

Följande Bourbonvarianter stöds:

• Bourbon - Ett enkelt och lätt bibliotek med mixins för Sass
• Bourbon Neat – Ett lättviktigt semantiskt gridramverk för Sass och Bourbon
• Bourbon Bitters - Scaffold-stilar, variabler och struktur för Bourbon-projekt

Du kan importera Bourbon-ramverket genom att lägga till någon av följande i din kod:

• @import "bourbon" – för att importera Bourbon
• @import "neat" – för att importera Bourbon Neat
• @import "base" – för att importera Bourbon Bitter

Dreamweaver använder sedan den förpaketerade versionen av Bourbon när preprocessor-filerna kompileras.

Du kan också installera Bourbon-ramverksfiler på platsen så att framtida uppdateringar av Dreamweaver inte påverkar dina arbetsflöden för kompilering. Filerna i Bourbon-ramverket kopieras till din webbplats. Bourbon är ramverket som används när kompilering utlöses för någon av filerna som importerar ramverket.

Installera Bourbon-, Bourbon Neat- eller Bourbon Bitters-filer

För att installera Bourbon eller någon av dess varianter:

Kompilera CSS-preprocessorfiler

Du kan kompilera CSS-preprocessor-filer på något av följande sätt:

• Ange automatisk kompilering av CSS-preprocessorfiler
• Kompilera en CSS-preprocessor-fil manuellt

Ange automatisk kompilering av CSS-preprocessorfiler

Du kan ange alternativ i Dreamweaver för att automatiskt kompilera ändringar från en Sass- eller LESS-fil till motsvarande CSS. Du kan också ange platserna (inom platsroten) där du vill spara den genererade CSS:en.

Efter en lyckad kompilering visas ett meddelande i panelen Output (Fönster > Resultat > Output). Statusikonen i statusfältet visas i grönt.För att öppna den kompilerade CSS:en dubbelklickar du på framgångsmeddelandet i panelen.

Om fel påträffas indikerar det att CSS-kompileringen inte har slutförts korrekt. Statusikonen visas i rött och alla fel och varningar visas på utdatapanelen. Du kan dubbelklicka på ett felmeddelande på panelen om du vill gå direkt till den felaktiga raden i koden. CSS-filen kompileras inte framgångsrikt förrän alla fel är lösta.

När du har skapat den kompilerade CSS-filen kan du länka din webbsida till en formatmall. När du gör ändringar i CSS-preprocessorerna uppdateras de motsvarande kompilerade CSS-filerna automatiskt. Webbsidan uppdateras också automatiskt i Live View.

Mer information om att länka din webbsida till formatmallen finns i Link to an external CSS style sheet.

Kompilera en CSS-preprocessorfil manuellt

I vissa situationer (till exempel om du inte har definierat en Dreamweaver-plats) kanske du vill kompilera en CSS-preprocessorfil manuellt.

I sådana scenarier inaktiverar du Enable Auto Compilation on File Save i CSS Preprocessors > General panel i dialogrutan Site Setup.

För att manuellt kompilera en CSS-preprocessor högerklickar du på filen i panelen Files och klickar på Compile.

Du kan också klicka på Tools > Compile för att kompilera den aktuella filen.