fbpx
SASS Den ultimata guiden för modern webbutveckling

SASS: Den ultimata guiden för modern webbutveckling

I takt med att livet för CSS har utvecklats har det blivit allt viktigare att ha mer kontroll över organisationen samt ett bättre arbetsflöde än vad som för närvarande erbjuds av stilarkets språk. Detta behov har fyllts av CSS-förprocessorer som LESS, PostCSS och utan tvekan de mest populära, sass. I det här inlägget tar vi en titt på vad förprocessorer är, varför de kan ha en så positiv inverkan på ditt CSS-arbetsflöde och hur du kan komma igång med Sass.

Vad är en CSS-förprocessor?

En CSS-förprocessor är i huvudsak ett skriptspråk som förvandlar CSS-kod med mindre syntaxvariationer till vanlig CSS3. När det gäller Sass är detta ett skript som ursprungligen har skrivits i Ruby, även om det finns portar tillgängliga med andra språk som JavaScript, via Node.js.

Hur man kommer igång med Sass

Det finns många olika alternativ för att använda Sass. På kommandoraden finns det alternativ att använda den ursprungliga Ruby-pärlan, Node.js-port, eller använda uppgiftslöpare som Gulp eller Grunt. Om du föredrar att använda ett GUI inkluderar flera rekommendationer Compass, CodeKit eller Hammer.

Vad alla dessa program gör är att ta Sass-koden från ett formatmall (a .sass or .scss fil) och sedan kompilera den till en vanlig .css fil. Det finns fördelar och nackdelar med varje alternativ, men om du är osäker på var du ska komma igång skulle ett av GUI-programmen vara ett bra ställe att börja.

variabler

En av de mest användbara funktionerna i Sass är möjligheten att skapa variabler. Precis som alla andra korrekta programmeringsspråk kan du tilldela variabler värden för att komma ihåg när du använder det. Variabler i Sass skrivs med a $ underteckna före namnet, till exempel:

$ mainColor: # dbcbb4;

Detta är användbart av minst två skäl: 1. Varje gång du vill återanvända samma färg eller annat värde behöver du helt enkelt återanvända variabeln utan att behöva komma ihåg vanliga stilar. 2. Om du någonsin behöver ändra värdet för flera väljare är allt du behöver göra att ändra ett värde i variabeln.

Häckning

En annan användbar egenskap hos Sass är möjligheten att hysa deklarationer i varandra. Detta kan vara användbart för att visa hur olika deklarationer relaterar till varandra. Som ett exempel, istället för att behöva skriva:

.container {bredd: 800px; } .container h1 {font-size: 40px; }

Du kan helt enkelt skriva:

.container {bredd: 800px; h1 {font-size: 40px; }}

Funktioner

Sass har många inbyggda funktioner som möjliggör faktisk manipulation av CSS-kod. Här är några exempel:

Blanda två färger tillsammans:

mix ($ primärfärg, $ andrafärg)

Gör en färg mörkare (där $amount är ett värde på hur mycket man ska göra det mörkare med):

mörkare ($ färg, $ belopp)

Math

En annan praktisk funktion är möjligheten att tillämpa matematiska uttryck i din markering. Du kan använda alla operatörer som vanligtvis stöds i programmeringsspråk: addition, subtraktion, division, multiplikation, modulo, jämlikhet och ojämlikhet.

En sak att notera är att du inte kan blanda värdenheter. Så medan följande är giltigt:

$ menyhöjd: 100% - 20%;

Följande skulle inte vara möjligt:

$ menyhöjd: 100% - 40px;

Några vanliga fall av Sass

Några vanliga fall av Sass

I ett tidigare inlägg behandlade vi hur vi konfigurerar Sass och kan konvertera dina filer till standard CSS. I det här inlägget kommer vi att täcka några av de vanligaste teknikerna för att få ut det mesta av Sass – vilket gör en mängd olika stilregler betydligt lättare att skriva.

Mixins

Med olika nivåer av webbläsarstöd för olika CSS-egenskaper är det vanligt att du måste tillhandahålla olika leverantörsprefix till egenskaper för att säkerställa kompatibilitet mellan webbläsare (särskilt när stöd för Internet Explorer är nödvändigt):

p {
  -webkit-transform: skala (2); 
      -ms-transform: skala (2);
          transformera: skala (2);
}

 

Det kan vara svårt att behöva göra upprepade gånger för varje fastighet med olika stödnivåer. Använda en Sass mixin kan förenkla processen när du behöver upprepa stora delar av koden.

Använda koden för transform egenskapen ovan som ett exempel kan vi enkelt förvandla detta till ett återanvändbart mixin när vi vill använda en transform: scale() regel:

@mixin transform-skala ($ x) {
    -webkit-transform: skala ($ x);
        -ms-transform: skala ($ x);
            transform: skala ($ x);
}

 

Med mixin ovan definierar vi mängden vi vill skala varje transform med $x argument. Detta mixin kan sedan användas i valfritt Sass-kodblock med hjälp av @include uttalande i förväg:

p {
    @ inkludera transform-skala (2);
}

 

För loopar

På samma sätt som programmeringsspråk som JavaScript, PHP eller Python, låter Sass dig skapa en for loop, för att iterera över ett definierat antal gånger. Definieras med hjälp av @for nyckelord kan längden på Sass för öglor anges på två olika sätt: “x till y” eller “x till y”, där x är utgångspunkten och y är slutpunkten. När du definierar slingan med through, slingan kommer innefattar slutvärdet (så till exempel 1 through 10 skulle inkludera 10 i slingan), medan du använder to skulle slingan gå upp till men inte inkludera slutvärdet (dvs. 1 to 10 skulle bara gå från 1 till 9). Som ett exempel på användning 1 through 10:

@ för $ i från 1 till 10 {
    .col - # {$ i} {bredd: 100% / 10 * $ i; }
}

 

Du har nu möjlighet @for loop ovan skulle gälla a width beräkning till 10 olika CSS-klasser (var och en börjar med .col- följt av ett tal mellan 1 och 10). Slingan skulle ställa in en bredd för varje CSS-klass, definierad av 100% / 10 multiplicerat med klassnumret (1 till 10). Detta skulle resultera i följande regeluppsättningar för var och en av klasserna:

.col-1 {
    bredd: 10%;   
}
.col-2 {
    bredd: 20%;
}
.col-3 {
    bredd: 30%;
}
.col-4 {
    bredd: 40%;
}
â € <
...
â € <
.col-10 {
    bredd: 100%;
}

 

Detta är ett snabbt och enkelt sätt att definiera kolumner i en grundläggande rutnätstruktur.

Partials

När du arbetar med Sass är det ofta en bra idé att organisera din kod i återanvändbara avsnitt eller filer baserat på vilken typ av stilar de tillämpar (till exempel att ha en fil för din rutnätlayout, en annan fil för mixins, en annan för färgscheman osv. .). Sass uppmuntrar detta modulära arbetsflöde genom att använda det som kallas deltonerna. En del skulle vara vilken Sass-fil som helst som börjar med en understrykning (_), till exempel _grid.scss. Du kan sedan ha en katalog med alla dina partialer, sedan en huvud Sass-fil att importera dessa till, till exempel main.scss.

För att importera dessa partialer till din huvudfil använder du helt enkelt en @import uttalande högst upp i filen:

// main.scss-fil
â € <
@import 'grid'
@import 'mixins'

 

När du arbetar med partialer behöver du inte ange understrykning eller filnamnstillägg. Sass kommer automatiskt att upptäcka dessa. Detta gör det enkelt att använda partialer för att bättre organisera din kod.

 Hur man använder nod-sass för att kompilera Sass-filer i ett npm-skript

hur man kompilerar den populära Sass-förprocessorn till vanlig CSS

Även om det finns många alternativ för att välja hur den populära Sass-förprocessorn ska kompileras till vanlig CSS, har en kompilator som använder LibSass-motorn blivit allt vanligare. Ursprungligen skriven i Ruby, med hjälp av den ursprungliga Ruby-pärlan eller ett Ruby-baserat program som Compass för att kompilera Sass blev snabbt värd för en mängd olika kritik angående dess långsamma kompileringstid och total hastighet. Som svar på prestandaklagomålen överfördes den ursprungliga Sass-motorn till C/C++ som LibSass, med många omslag tillgängliga för att köra Sass-motorn i nästan alla populära programmeringsspråk. Denna handledning introducerar Sass programmeringsspråk och ger också en steg-för-steg-guide att använda nod-sass-omslaget för att kompilera din Sass-kod, direkt som ett npm-skript. Anteckna det node-sass är avsedd att användas med .scss filer snarare än .sass, den förra är det vanligaste och populära alternativet.

Om Sass CSS Preprocessor

sass, eller Syntactically Awesome Style Sheets, är ett exempel på en CSS-förprocessor, som möjliggör lyhörd webbutvecklare att skapa kod på ett språk och sedan "översätta" den till CSS. Licensierad under MIT, Sass har sin kompatibilitet med CSS och mycket funktionsrikt programmeringsspråk, vilket gör det till en perfekt kombination av egenskaperna hos ett formatmall och ett datorprogram. I den meningen är det ett kraftfullt verktyg för webbplatsutvecklare som är bekanta med programmering, även om vem som helst kan lära sig att använda Sass med tillräckligt med övning. Det finns också två små variationer av Sass-språket, Sassy CSS (förkortat SCSS) och helt enkelt Sass. Medan Sassy CSS är mycket mer lik CSS när det gäller syntax, är Sass en bättre preferens för app-utvecklare som är mer bekymrade över bekvämlighet. Det senare alternativet utelämnar lockiga parenteser och semikolon och läser i stället kod baserat på fördjupningar.

Det är viktigt att notera att de flesta utvecklare och online-dokumentationskällor använder SCSS-syntax på grund av dess likhet med CSS. Dessutom bör du notera att webbläsare inte läser Sass- eller SCSS-filer. Därför måste du konvertera alla SCSS / Sass-filer till CSS innan du publicerar din webbplats på Internet. För en förklaring om hur du gör detta, se “Konvertera mellan SCSS till CSS-filer” nedan.

Ställa in Sass

Installera Node.js och NPM

Om du inte redan har Node.js installerat kan du ladda ner den senaste versionen på dess officiella hemsidan. Om du inte känner till den här termen är Node.js en populär runtime-miljö för Javascript. Node levereras förpackad med npm, den officiella Node-pakethanteraren som ger utvecklare tillgång till Javascript-kod med öppen källkod, så den kommer att installeras samtidigt. (Om du är intresserad eller behöver installera npm separat kan du göra det på officiell hemsida för npm.) Kör om du vill kontrollera att npm har installerats npm -v i din terminal för att bekräfta den version av npm som för närvarande finns på din dator. När blogginlägget uppdaterades är den senaste versionen av npm som släpptes 6.7.0.

Installera nod-sass

När du har npm installerat är det dags att installera nod-sass. Du kan göra det genom att springa npm install -g node-sass i din terminal för att installera paketet globalt (dvs. tillgängligt i hela ditt system), eller kör npm install node-sass utan -g flagga för att bara installera i din nuvarande katalog.

Projektinstallation med package.json

Förutsatt node-sass är nu installerat globalt är det dags att skapa eller välja en projektkatalog där vi vill titta på våra Sass-filer. Navigera till din projektkatalog och initialisera projektet med en package.json genom att köra npm init.

Ställa in Sass

Du uppmanas att ange en mängd olika detaljer om projektet, till exempel package name, version, description och andra detaljer. Du kan antingen fylla i denna information nu eller bara slå Enter för var och en av dessa uppmaningar och fyll i den senare.

Installera Node.js och NPM

Efter att ha bläddrat igenom var och en av uppmaningarna kommer det att uppmanas att bekräfta den angivna informationen (eller info lämnas tom). Tryck på Enter en gång till och package.json filen skapas.

Installera nod-sass

Lägg till node-sass skript

Öppna package.json fil i din textredigerare som du väljer och lägg till följande rad inuti "scripts" objekt:

"scss": "node-sass --watch assets/scss -o assets/css"

Raden ovan berättar npm att köra ett skript, se efter ändringar i något .scss filer i assets/scss katalogen och gör ändringarna för motsvarande CSS-filer i en assets/css katalog. Du bör ändra vägarna för dina kataloger i enlighet med detta.

Din redigerade package.json filen ska se ut så här:

{
  "Namn": "sass-ex",
  "version": "1.0.0",
  "Beskrivning": "",
  "Main": "index.js",
  "skript"{
    "testa": "echo \" Fel: inget test specificerat \ "&& exit 1",
    "scss": "nod-sass" --kolla på tillgångar/scss -o tillgångar/css"
  },
  "författare": "",
  "licens": "GÅ"
}

 

Spara filen och stäng den. Kör nu i roten till projektkatalogen npm run scss för att börja titta efter eventuella ändringar i din .scss filer.

Alternativa sätt att installera Sass

Det är viktigt att notera att det finns olika alternativa metoder för att installera Sass. Till exempel kan du installera Sass via betalda och gratis applikationer som CodeKit och Scout-app. Dessutom kan du också installera Sass genom att ladda ner paketet från officiella Github-webbplats och lägga till det direkt på din väg.

Översikt av Designing with Sass

Som tidigare nämnts kommer Sass med många fördelaktiga funktioner som gör det till ett kraftfullt verktyg för webbplatsutvecklare. Sass antog dessa egenskaper från grundläggande programmeringsspråk, varav några av detta blogginlägg kommer att diskuteras nedan. För en mer ingående guide över dessa funktioner och hur du implementerar dem i din kod, besök den officiella guiden på Sass webbplats.

variabler

Precis som i programmering kan du skapa och implementera variabler i Sass genom hela ditt stilark. Detta är extremt bekvämt, för om det finns en viss stil du vill använda på hela din webbplats (till exempel en typ av typsnittpaket, färg etc.), kan du helt enkelt lagra den i en variabel och använda den i hela din stilark. Att förklara en variabel i Sass är särskilt enkelt för programmerare eftersom det är begreppsmässigt identiskt med Javascript. Till exempel om du förklarar $primary-color: #525; ($ variabel: värde;) i början av stilformatet, så kan du helt enkelt mata in $primary-color för valfritt färgvärde.

Häckning

HTML och de mest populära programmeringsspråken har en ren struktur med användning av fördjupningar eller kapsling. Å andra sidan är ett traditionellt CSS-formatmall ganska en lång, rörig lista över olika stilar. Men med Sass kan du förbättra läsbarheten för dina stilark genom att placera olika kodblock i annan kod. Till exempel, inuti stylingen av en traditionell navfält, kan du bygga in koden för att utforma placeringen av listobjekten och textens stil. Denna visuella kodhierarki genom häckning är en annan anledning till att många utvecklare kommer att dra till användningen av Sass på sina webbplatser.

Importerar SASS-filer

Eftersom dina webbplatser och HTML-dokument blir mer komplexa, kommer detta vanligtvis att resultera i en parallell tillväxt av dina CSS-filer. Men att skapa fler stilar kommer så småningom att röra dina stilark, vilket gör det svårt att underhålla och skriva på ett ordnat sätt. Lyckligtvis, genom att använda Sass, kan du dela upp dina stilark i flera Sass-filer. När du är redo att starta din webbplats kan du kombinera flera SCSS-filer i ett huvudformat och sedan länka detta till ditt HTML-dokument via importfunktionen. Till skillnad från CSS kräver det bara en HTTP-förfrågan för att ladda det enskilda Sass "master" -formatet; i CSS gör klienten en HTTP-begäran för varje importerat formatmall. För att importera ett formatmall, skriv helt enkelt nyckelord @import följt av namnet på underformatet i citattecken (@import “Stilark”;). Detta är en annan viktig funktion i Sass som förenklar processen för att hantera en webbplats.

Använda Mixins

De flesta med programmeringserfarenhet känner till skrivfunktioner eller metoder i sina program; traditionella CSS-filer stöder dock inte den här funktionen. Lyckligtvis tillåter Sass utvecklare att skriva mixins eller en grupp CSS-deklarationer som är grupperade tillsammans och kan användas repetitivt var som helst i ditt formatmall. Ett mixin är i huvudsak ekvivalent med en funktion; den kan acceptera ett inmatningsvärde och ansluta det till CSS-deklarationerna grupperade i mixin. För att skapa ett mixin, skriv bara @mixin mixinName(value) följt av CSS-deklarationer som använder det inmatade värdet. Skriv nyckelordet för att anropa detta mixin i ditt formatmall @include följt av mixins namn och värde (om tillämpligt). Mixins i Sass banar utan tvekan vägen för kraftfull och effektiv webbdesign genom att skapa mindre repetitiv kod.

Sass tillåter utvecklare att skriva mixins eller en grupp CSS-deklarationer

Använda arv och andra direktiv

En annan kraftfull programmeringsfunktion som du kan implementera genom webbplatsutveckling med Sass är arv. Du kan hänvisa till detta som "utvidga" väljare i Sass. Med användning av @extend, väljare kan ärva CSS-egenskaperna för andra väljare, vilket förenklar din kod enormt genom att ta bort behovet av repetitiv kod. Detta skapar mer flexibilitet i ditt formatmall genom att bara "slå på" en väljare med nyckelordet @extend. För att använda den här funktionen skapar du helt enkelt en väljare med % framåt för att indikera att CSS-egenskaperna i den här väljaren kan utökas. Nu när du skapar en annan väljare kan du ringa @extend %selectorName; och dess egenskaper kommer att ärvas av den nya väljaren.

Medan @extend funktion är väldigt populär bland Sass-förespråkare, det finns många grundläggande programmeringsfunktioner som har integrerats i Sass-språket. Till exempel är de flesta programmerare bekanta med användningen av villkorliga uttalanden. Nu kan Sass-utvecklare använda @if och @else direktiv som kommer att leda till mycket mer kraftfull webbplatsutveckling. På samma sätt kan de som är bekanta med det traditionella för och samtidigt slingor replikera dessa Java-funktioner med @for och @while direktiven.

Använda operatörer

Programmerare använder matematiskt drivna algoritmer hela tiden. Å andra sidan finns det praktiskt taget ingen användning av matematik involverad i traditionell CSS-design. Lyckligtvis tillåter Sass utvecklare att använda grundläggande operatorer (+, -, *, /,%) för att beräkna pixel- eller procentvärden i CSS-deklarationer. Det är ett litet men mycket praktiskt verktyg för designers som vill skapa mer komplexa webbplatser. Enligt den officiella dokumentationen för Sass finns det också ett bibliotek med matematiska funktioner som Sass-utvecklare kan använda. Egentligen är de flesta programmerare förmodligen bekanta med många av dessa funktioner i biblioteket. Den innehåller funktioner som abs($number) för att hitta absolut värde, min($numbers…) för att hitta det minsta av flera värden, och random() för att returnera ett slumpmässigt numeriskt värde. För att se alla tillgängliga funktioner på Sass, besök officiell dokumentationssida för Sass.

Konverterar mellan SCSS till CSS-filer

När du har utformat dina HTML-element med Sass är det dags att äntligen publicera din webbplats. Du kan dock inte använda SCSS-filerna direkt när du laddar din webbplats. Istället måste du konvertera dina filer till CSS. Med Sass-pärlan, som kan installeras via kommandoraden, finns det en mängd olika körbara filer. Om du inte har Sass-pärlan installerad kan du också köra Sass-körbara filer med en annan källa.

  • sass or $ bundle exec sass: Används för att konvertera en källa-Sass-fil till en CSS-fil. Springa sass --help för mer för mer instruktioner.
  • sass-convert or $ bundle exec sass-convert: Används för att konvertera mellan Sass-, SCSS- och CSS-filer. Springa sass-convert --help för fler instruktioner. Detta är en perfekt körbar för befintliga projekt som du vill byta till SCSS-format.

Konverterar mellan SCSS till CSS-filer

Andra CSS-förprocessorer

Skrivstiftet

Stylus är ett annat mycket populärt alternativ för en CSS-förprocessorModellerad efter Sass är Stylus ett annat mycket populärt alternativ för en CSS-förprocessor. En särskilt användbar funktion som drar många användare mot Stylus är dess mycket dynamiska och flexibla språk och syntax. Användare har möjlighet att utelämna skiljetecken som lockiga hängslen, kolon och semikolon. De kan till och med utelämna vissa nyckelord (till exempel @mixin) om de föredrar. I likhet med Sass integrerar Stylus många kraftfulla programmeringsfunktioner som funktioner / mixins, variabler, iteration och arv. En särskilt användbar funktion i Stylus är CSS bokstavlig, indikerad av @css. Detta nyckelord kan användas för att återgå till CSS-typ om Stylus inte kan tillgodose en begäran.

Mindre

Less, som står för Leaner Stylesheets, är en annan CSS-förprocessorLess, som står för Leaner Stylesheets, är ett annat CSS-förprocessoralternativ som mycket liknar alternativen. Den erbjuder många inbyggda programmeringsfunktioner. Detta inkluderar att skapa variabler, använda mixins, bygga in din kod och använda ett bibliotek med inbyggda funktioner. Till skillnad från Stylus är Less strängare i sin syntax. I själva verket replikerar den praktiskt taget syntaxen för traditionell CSS-kod. Baserat på dina personliga preferenser kan du se detta som en fördel eller en nackdel.

 

SASS kontra MINDRE

SASS kontra MINDRE Vi måste gå igenom några grunder för att förstå vad SASS och LESS är. Så låt oss börja med att diskutera CSS-förprocessorn. En CSS-förprocess är ett skriptspråk som programmerare använder för att utöka CSS när de skriver kod på ett språk. CSS-förprocessorn kompilerar den sedan till CSS. SASS är det populäraste exemplet på detta CSS förprocessor medan andra som LESS och Stylus är mindre kända.

Vad är SASS?

SASS står för Syntheically Awesome Style Sheets som tillåter användare att lägga till flera saker som variabler, inline-importer, kapslade regler etc till sin kod. SASS hjälper också användare att hålla saker organiserade genom kodningsprocessen vilket gör det lättare att hantera dessa ark. SASS arbetar med alla versioner av CSS men ägare måste ha Ruby installerad i sitt system för det.

SCSS

På samma sätt är SCSS en speciell filtyp i Ruby som sammanställer CSS Style Sheets för en webbläsare. Så du kan säga att SCSS är som CSS men med bättre formatering för kodning.

Vad är LESS?

LESS står för Learner Style Sheets och är ett bakåtkompatibelt språktillägg som folk använder i CSS. Det är ganska lätt att lära sig MINDRE eftersom det ser ut precis som CSS. Du kan använda LESS för att kapsla regler inuti regler på grund av vilka reglerna gäller inom den yttre regelväljaren.

Detta gör att utvecklare och designers kan lägga till sina egna CSS-regler enligt DOM-strukturen i ett dokument. Dessa kapslade regler gör det lättare att förstå och följa när en kod körs.

LESS eller SAAS: Vad ska jag använda?

Det är ganska svårt att förstå om LESS är bättre än SAAS eller vice versa men vi kan jämföra deras funktioner för att få en tydligare uppfattning om vilken användare bör välja. Låt oss göra en jämförande analys av SASS och LESS för att få en bättre uppfattning om vilken som är bäst?

SASS och LESS använder båda liknande funktioner och mixins. SASS använder dock Ruby som basspråk. Å andra sidan använder LESS JavaScript för kodning. Skillnaden i kodspråk ger fortfarande ingen fördel åt något av dessa språk.

LESS låter användarna använda Mixins endast under vissa förhållanden. Även om detta låter som en användbar funktion, förklarar det också den logiska länkgränsen i LESS. SASS, ger ett annat tillvägagångssätt. Till exempel tillåter SASS användare att använda loopar och fallorienterade distinktioner under programmeringen.

SASS ger användarna friheten att använda SCSS eller en indragen syntax, vilket ger dem friheten att följa CSS-reglerna eller avvika från dem. Koden i LESS är dock automatiskt en superset av CSS. SASS är mer populärt bland utvecklingsgemenskapen men inte bara på grund av dess funktion, utan för att det är ett äldre språk.

Vilket är bättre SASS eller SCSS eller LESS?

Låt oss ta en titt på de individuella egenskaperna för SASS, SCSS och LESS för att se vilka av dessa CSS-tillägg som är bättre för utvecklare.

SASS

  • SASS hjälper till att minska upprepningen i CSS för att spara tid och är en förlängning av CSS. Det är en superset av CSS som är kodad på Ruby-språket
  • SASS har sin syntax och kompilerar den till CSS i en läsbar form
  • SASS kan rapportera fel i syntax
  • Tillåter användare att skapa sina funktioner och använda dem i användarens sammanhang.
  • SASS använder mixning för att skapa stilar som du kan använda och återanvända
  • SASS fokuserar mer på kunskapsbasen, så den har inte visuella funktioner

MINDRE

  • LESS hjälper användare att underhålla, anpassa, hantera och hantera stilmallar för webbplatser. Det är ett dynamiskt språk och fungerar på flera webbläsare.
  • Utvecklat på JavaScript vilket gör det till en superset av CSS som används för att minska redundans
  • Förklarar korrekta fel samt var felen finns
  • Hjälper till att manipulera värden genom JavaScript, som kan ändra färger, runda funktioner, takfunktioner, etc.
  • LESS använder även Mixens.
  • LESS tillhandahåller dokumentation med tilltalande bilder med lätta att följa steg.

SCSS

  • SCSS är en speciell typ av fie för SASS som tillåter ytterligare funktionalitet i CSS.
  • SCSS kräver ingen syntaxkod
  • SCSS behöver inte följa strikta indrag, till skillnad från SASSS
  • SCSS liknar SASS i skrivstilar men användning av parenteser och semikolon är nödvändig
  • Den har en filändelse
  • SCSS har en mindre utvecklargemenskap jämfört med SASS, varför stödet med SCSS också är lägre.

Använder Bootstrap SASS ELLER LESS?

Använder Bootstrap SASS ELLER LESS Bootstrap är ett populärt val för utvecklingsgemenskapen globalt, och eftersom LESS var ett sådant inflytande på marknaden under Boostrap 3, erbjöd det ett SASS-alternativ. Men saker och ting förändras helt när du tänker på Boostrap 4. Det beror på att Boostrap 4 helt använder SASS. Det är första gången som Boostraps källkod använder SAAS.

Därför är det säkert att säga att SASS är en säkrare hänsyn till framtiden. Experter tror att Boostrap gjorde det här djärva draget eftersom antalet SASS-användare är nästan dubbelt jämfört med MINRE användare.

Varför använder fler utvecklare LESS och SASS istället för CSS?

Senaste marknadstrender avslöja att fler utvecklare nu använder LESS och SASS istället för CSS av olika anledningar. Till exempel, alla projekt som startar kräver bara ett fåtal regler för CSS men sedan blir reglerna komplicerade när projektet fortskrider. Detta gör CSS svår att lära sig och anpassa till för mer avancerade projekt. Därför gillar folk att välja alternativ som LESS och SASS som har produktionsklara funktioner tillgängliga.

På samma sätt är utveckling via CSS tidskrävande och ökar den genomsnittliga tid som krävs för att slutföra en uppgift. Andra språk som JavaScript håller regelbundna konferenser för att kommunicera om framsteg, men det finns inget sådant i CSS. Alla dessa saker gör LESS och SASS till ett mycket bättre alternativ än CSS.

Som sagt, det är tydligt att både SASS och LESS spelar viktiga roller i utvecklingsvärlden. SASS är fortfarande populärt trots att de kommer till branschen tidigare än LESS. Båda dessa tillägg har sina fördelar och nackdelar och allt beror på hur användarna använder dem.

Slutsats

Sammantaget är Sass ett utmärkt verktyg för webbplatsutvecklare som vill förbättra sin webbdesign med grundläggande programmeringsfunktioner. Inte bara är installationen enkel, men Sass-språk och syntax är snabbt att lära sig.

De olika programmeringsfunktionerna, som blandningar och variabler, och den visuella hierarkin hos Sass skapar mer effektiva och underhållbara stilmallar.

Jag hoppas att den här artikeln kommer att vägleda dig när du experimenterar med den banbrytande tekniken som beskrivs ovan.

angelo frisina solljusmedia

Författare Bio

Angelo har varit involverad i den kreativa IT-världen i över 20 år. Han byggde sin första webbplats 1998 med Dreamweaver, Flash och Photoshop. Han utvidgade sin kunskap och expertis genom att lära sig ett bredare spektrum av programmeringskunskaper, såsom HTML / CSS, Flash ActionScript och XML.

Angelo slutförde formell utbildning med CIW-programmet (Certified Internet Webmasters) i Sydney, Australien, där han lärde sig kärnan i datanätverk och hur det relaterar till infrastrukturen på internet.

Förutom att köra Sunlight Media, tycker Angelo om att skriva informativt innehåll relaterat till webb- och apputveckling, digital marknadsföring och andra tekniska relaterade ämnen.

3 Kommentarer

  • Garrett Corwin Februari 15, 2019 vid 3: 08 pm

    Jag har gjort detta och många varianter av detta utan lycka. Terminal kastar alltid samma fel: saknat skript: scss. Jag känner att det beror på att jag använder nod-sass 4.11.0 och det har skett förändringar sedan de flesta av dessa guider kom ut. Några tankar? Tack

  • Jordanien April 15, 2019 vid 2: 39 pm

    Det beror på att det finns ett stavfel vid inställning av manuset. Det borde inte finnas ett citattecken efter nod-sass. Så istället för “scss”: “node-sass” –watch assets / scss -o assets / css ”, bör raden läsa
    “Scss”: “node-sass –watch assets / scss -o assets / css”

  • Angelo Frisina Januari 28, 2020 vid 10: 51 pm

    Tack för att du gjorde detta till oss Jordan.