Lär dig hur du kan arbeta med och kompilera CSS-preprocessorfiler i Dreamweaver.

CSS-preprocessorer kompilerar kod som är skriven i ett förbehandlat språk till den vanligaste formen av CSS. Med förbehandlade språk höjs CSS en nivå så att det blir mer likt ett programmeringsspråk.

Med preprocessorer kan du använda variabler, mixins, funktioner och många andra tekniker som
inte finns i CSS. Med CSS-preprocessorer kan du definiera allt en gång och sedan återanvända dem flera gånger. På så sätt får du utökningsbar CSS.

I Dreamweaver kan de vanligaste CSS-preprocessorerna Sass och Less användas, och även ramverken Compass och Bourbon för kompilering av Sass-filer.

Less är JavaScript-baserat och Sass är Ruby-baserat, men du behöver inte veta något om dessa språk eller använda kommandoraden för att kompilera filerna till CSS. I Dreamweaver kompileras dessa filer automatiskt till CSS med hjälp av JavaScript-biblioteket less.js när du läser in, redigerar eller sparar filerna.

Hur Dreamweaver hanterar CSS-preprocessorer

Hur Dreamweaver hanterar CSS-preprocessorer varierar beroende på om du har definierat en plats eller inte. Adobe rekommenderar att du definierar en plats, eftersom det ger dig friheten att ange inställningar för CSS-preprocessorer och att använda ramverken Compass och Bourbon i Dreamweaver. 

Om du har en plats definierad kan du anpassa hur CSS-preprocessorer fungerar i Dreamweaver genom att ange inställningar för platsspecifika CSS-preprocessorer.

Genom att ange inställningar för platsspecifika CSS-preprocessorer kan du ange kompileringsalternativ på platsbasis. Du kan även anpassa sökvägen till Sass- och CSS-filer och preprocessoralternativ som är specifika för varje plats.

När du definierar en plats i Dreamweaver kan du även använda Sass-ramverk: Compass, Bourbon, Bourbon Neat och Bourbon Bitters i Dreamweaver.

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 med de uppgifter som ingår när du använder CSS-preprocessorer:

  1. Definiera 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. Mer information om hur du skapar en Dreamweaver-plats finns på 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. Mer information finns i Ange inställningar för platsspecifika CSS-preprocessorer.
  3. Om du vill använda vissa ramverk, till exempel Compass eller Bourbon, kan du ange inställningar för dessa ramverk. Mer information finns i Använda Compass-ramverket och Använda Bourbon-ramverket.
  4. Konfigurera automatisk komplettering eller kompilera dina Sass- och Less-filer automatiskt Mer information finns i Kompilera CSS-preprocessorfiler.

Ange inställningar för CSS-preprocessorer

Du kan ange platsspecifika inställningar för CSS-preprocessorer i dialogrutan Platser > Hantera platser.

Genom att hålla inställningarna för CSS-preprocessorer platsspecifika kan du hantera dina CSS-preprocessorer på platsbasis så att du kan styra CSS-preprocessorn på varje enskild plats utan att behöva uppdatera inställningarna 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. 

Allmänna inställningar för CSS-preprocessorer
Allmänna inställningar för CSS-preprocessorer

Aktivera autokompilering vid filsparande

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 alternativet är avmarkerat måste du kompilera filerna manuellt varje gång du gör en ändring.

Less-alternativ

Aktivera strict math

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.

Aktivera strict units

Matar ut en gissad enhet i CSS efter den matematiska beräkningen. Exempel: 5px * 2px kompileras som 10px och inte 10px2. 

När det här alternativet är inaktiverat försöker Less att gissa utdataenheten när matematik bearbetas.

I det här exemplet skapas CSS enligt följande:

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

I det här fallet är gissningen inte korrekt. En längd multiplicerad med en längd ger en area, men CSS har inget stöd för att ange areor. Här antas att ett av värdena ska vara ett värde, inte en längdenhet, och Dreamweavers utdata blir 10px.

När strict units är på räknas denna genererade CSS som ett fel.

Skriv om URL:er som relativa URL:er

Skriver om URL:er i importerade filer så att URL:en alltid är relativ till den importerade filen från bassökvägen. Det innebär att om en Less-fil importerar en annan Less-fil, som i sin tur refererar till en bild, visas den relativa URL:en i den kompilerade CSS-filen.

Generera källmappning

Skapar en källmappning (en fil som överbryggar gapet mellan högnivåspråk som Sass och Less och lågnivåspråk som de kompileras till, som CSS).

Alternativ för Sass/SCSS

Format på utdatafil

Anger CSS-utdatafilens format:

  • Nested – Formaterar kompilerad CSS i välkänd, modulär struktur.
  • Compact – Formaterar kompilerad CSS i en kompakt struktur som tar mindre plats än Nested eller Expanded.
  • Compressed – Matar ut CSS i en platt struktur.
  • Expanded– Matar ut CSS i ett utökat format där varje egenskap och regel tar upp en rad. Egenskaper visas med indrag i reglerna, men reglerna har inget indrag. 

Skapa källkommentarer

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

Generera källmappning

Skapar en källmappning (en fil som överbryggar gapet mellan högnivåspråk som Sass och Less och lågnivåspråk som 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 vilken sökväg Dreamweaver ska bevaka och aktivera automatisk kompilering när en Sass- eller LESS-fil i sökvägen ändras med en extern redigerare.

Inställningar för CSS-preprocessorns källa och utdata
Inställningar för CSS-preprocessorns källa och utdata

Du kan ange följande inställningar för CSS-preprocessorers källa och utdata i Platser > Hantera platser.

CSS-utdata

Ange plats för den CSS-utdatafil som skapas.

I samma mapp som källan

Välj det här alternativet om du vill att de genererade CSS-filerna ska sparas i samma mapp som Sass- och Less-källfilerna.

Ange utdatamapp

Välj det här alternativet och ange en mapp där du vill spara de CSS-filer som skapas.

Ersätt segment av indatasökvägen

Med det här alternativet kan du ersätta en del av sökvägen med strängarna Från och Till.

Om till exempel Från: scss och Till: css anges placeras utdatafilen i samma trädstruktur efter att SCSS ersatts i sökvägens css.

Källmapp

Ange undermappen i platsroten som ska bevakas. Oftast innehåller den här undermappen alla SCSS- eller LESS-filer. 

Om du har aktiverat Kompilering i de Allmänna inställningarna aktiverar Dreamweaver automatiskt CSS-preprocessorn om någon fil i mappen ändras externt eller från Dreamweaver.

Använda Compass-ramverket

Compass är ett redigeringsramverk för CSS med öppen källkod. Med det kan du skapa CSS3-formatmallar med Sass.

Dreamweaver har stöd för Compass. Om du skapar formatmallar med Compass kan du därför kompilera dem och generera CSS-filer i Dreamweaver.

  1. Installera Compass-filer.

    Om du inte redan har installerat Compass på datorn kan du installera det från Dreamweaver.

    I dialogrutan Platskonfiguration väljer du CSS-preprocessorer > Compass. Välj Använda Compass och klicka på Installera filer.

    Installera Compass-filer
    Installera Compass-filer

    Alla Compass-filerna och konfigurationsfilen *.rb installeras i din platsmapp och du kan se dem på panelen Filer.

    Installerade Compass-filer
    Installerade Compass-filer

  2. Ange en befintlig Ruby-baserad konfigurationsfil

    Om du redan har Compass på dina datorer och har *.rb-filen för Compass konfigurerad, anger du sökvägen till *.rb-filen i den aktuella platsroten i dialogrutan Platskonfiguration i Dreamweaver.

    1. I dialogrutan Platskonfiguration väljer du CSS-preprocessorer > Compass.
    2. Markera kryssrutan Använda Compass.
    3. Klicka på Ange Ruby-baserad konfigurationsfil och bläddra till filens sökväg. Klicka på Spara när du är klar.
    Ange en befintlig Ruby-baserad konfigurationsfil
    Ange en befintlig Ruby-baserad konfigurationsfil

    Obs!

    Filen måste finnas i platsens rotmapp.

  3. Ange konfigurationsalternativ manuellt

    Om du inte har något befintligt konfigurationsalternativ kan du välja att ange dem manuellt.

    1. I dialogrutan Platskonfiguration väljer du CSS-preprocessorer > Compass.
    2. Markera kryssrutan Använd Compass.
    3. Klicka på Ange konfigurationsalternativ manuellt. Ange följande konfigurationsalternativ och klicka på Spara.

    Följande fält fylls i automatiskt, men du kan ändra dem efter behov:

    Obs!

    Alla sökvägar som väljs i dessa alternativ måste vara inom platsens rot.

    HTTP-sökväg

    Sökvägen till projektet när det körs inom webbservern. Standardvärdet är ”/”.

    Bildkatalog

    Katalogen där bilderna finns. Värdet är relativt project_path.

    Genererad bildkatalog

    Katalogen där genererade bilder finns. Värdet är relativt project_path. Standardvärdet är värdet för images_dir.

    Teckensnittskatalog

    Katalogen där teckensnittsfilerna finns.

    Relaterade resurser

    Anger om Compass-hjälpfunktionerna ska generera relativa webbadresser från den genererade CSS-filen till resurserna, eller absoluta webbadresser med http-sökvägen för resurstypen.

  4. Om du har markerat Aktivera autokompilering vid filsparande i dialogrutan Platser > Hantera platser > CSS-preprocessorer, genereras en CSS-fil i Dreamweaver varje gång du sparar ändringar i dina Sass-filer. Du kan också förhandsgranska ändringarna i realtid i webbläsarfönstret. Mer information om hur du förhandsgranskar ändringar i realtid i webbläsaren finns i Förhandsgranskning i realtid.

    Om du inte vill använda autokompilering kan du manuellt kompilera en CSS-fil genom att göra något av följande:

    • Högerklicka på Sass-, Less- eller SCSS-filen på panelen Filer och klicka på Kompilera. 
    • Klicka på Verktyg > Kompilera när du vill kompilera den aktuella filen.
  5. Sedan kan du bifoga den kompilerade CSS-filen till HTML-filerna på din webbplats. Mer information finns i Länka till en extern CSS-formatmall.

Använda Bourbon-ramverket

Dreamweaver stöder produktserien Bourbon. Om du skapar formatmallar med Bourbon kan du därför kompilera dem och generera CSS-filer i Dreamweaver.

Följande Bourbon-versioner stöds:

  • Bourbon – ett enkelt och lätt blandningsbibliotek för Sass
  • Bourbon Neat – Ett lätt semantiskt stödrasterramverk för Sass och Bourbon
  • Bourbon Bitters – ställningsformat, variabler och struktur för Bourbon-projekt

Du kan importera Bourbon-ramverket genom att lägga till följande i koden:

  • @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ärdiga versionen av Bourbon medan preprocessorfilerna kompileras.

Du kan också installera Bourbon-ramverksfiler på platsen så att framtida uppdateringar av Dreamweaver inte påverkar dina arbetsflöden för kompilering. Bourbon-ramverksfilerna kopieras till din plats och det är det här ramverket som används när kompileringen aktiveras för någon av filerna som importerar ramverket.

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

Så här installerar du Bourbon eller någon av dess versioner:

  1. I dialogrutan Platskonfiguration väljer du CSS-preprocessorer > Bourbon, Bourbon Neat eller Bourbon Bitters.

  2. Klicka på Installera filer för att installera filerna i den angivna platsen i webbplatsens rotmapp.

    Installera Bourbon-filer
    Installera Bourbon-filer

    Alla Bourbon-filer installeras i din webbplatsmapp, och du kan se dem på filpanelen.

    Installerade Bourbon-filer
    Installerade Bourbon-filer

    Om ett fel uppstår visas det på utdatapanelen (Fönster > Resultat > Utdata), och statusfältets ikon ändras till röd.

Kompilera CSS-preprocessorfiler

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

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 de sökvägar (i webbplatsens rot) där du vill lagra den genererade CSS-koden.

  1. I dialogrutan Platskonfiguration väljer du CSS-preprocessorer > Allmänt > Aktivera autokompilering vid filsparande.

    Aktivera autokompilering
    Aktivera autokompilering

  2. I dialogrutan Platskonfiguration väljer du CSS-preprocessorer > Källa och utdata.

  3. Ange de platser där du vill spara dina genererade CSS-filer i dialogrutan Källa och utdata. Du kan välja ett av följande alternativ:

    I samma mapp som källan

    Välj det här alternativet om du vill att de genererade CSS-filerna ska sparas i samma mapp som Sass- och Less-källfilerna.

    Ange utdatamapp

    Välj det här alternativet och ange en mapp där du vill spara de CSS-filer som skapas.

    Ersätt segment av indatasökvägen

    Med det här alternativet kan du ersätta en del av sökvägen med strängarna Från och Till.

  4. Ange mappen som innehåller Sass- eller Less-filer som Dreamweaver behöver för bevakning. 

    Om du ändrar något i någon fil i den bevakade mappen kompilerar Dreamweaver automatiskt filerna när du har sparat dem. 

    Inställningar för CSS-preprocessorns källa och utdata
    Inställningar för CSS-preprocessorns källa och utdata

    Obs!

    Dreamweaver bevakar och kompilerar filerna även om du ändrar dem utanför Dreamweaver (till exempel i en textredigerare).

När kompileringen är slutförd visas ett meddelande på utdatapanelen (Fönster > Resultat > Utdata) och statusikonen i statusfältet visas i grönt <icon>. Om du vill öppna den kompilerade CSS-filen kan du dubbelklicka på meddelandet på panelen.

Om det förekommer fel misslyckas CSS-kompileringen. Statusikonen visas i rött <icon> 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 korrekt förrän alla fel är åtgärdade.

Obs!

Utdatapanelen är oftast dockad längst ned på arbetsytan. Om panelen är stängd kan du öppna den via Fönster > Utdata.

Du kan också växla mellan att visa/dölja utdatapanelen via statusikonen när den är röd.

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-vyn.

Mer information om hur du länkar din webbsida till en formatmall finns i Länka till en extern CSS-formatmall.

Kompilera en CSS-preprocessorfil manuellt

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

I så fall inaktiverar du alternativet Aktivera autokompilering vid filsparande i CSS-preprocessorer > panelen Allmänt i dialogrutan Platskonfiguration.

Om du vill kompilera en CSS-preprocessor manuellt högerklickar du på filen på filpanelen och klickar på Kompilera.

Kompilera CSS-preprocessorfiler manuellt via filpanelen
Kompilera CSS-preprocessorfiler manuellt via filpanelen

Du kan också klicka på Verktyg > Kompilera om du vill kompilera den aktuella filen.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy