{"id":3931,"date":"2019-04-01T08:53:00","date_gmt":"2019-04-01T08:53:00","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/why-should-you-use-scss-instead-of-styled-components\/"},"modified":"2026-04-24T11:21:07","modified_gmt":"2026-04-24T11:21:07","slug":"hvorfor-skal-du-bruge-scss-i-stedet-for-stylede-komponenter","status":"publish","type":"post","link":"https:\/\/thecodest.co\/da\/blog\/why-should-you-use-scss-instead-of-styled-components\/","title":{"rendered":"Hvorfor skal du bruge SCSS i stedet for Styled Components?"},"content":{"rendered":"<p>Efter at have sammenlignet popul\u00e6re l\u00f8sninger som almindelig CSS, Emotion, <strong>SCSS <\/strong>og<strong> Stylede komponenter<\/strong>Til sidst valgte jeg den sidste. Alt s\u00e5 ud til at v\u00e6re i orden. Det har et meget popul\u00e6rt bibliotek i dag, hvilket betyder<br>Der er allerede et stort f\u00e6llesskab, s\u00e5 hvis jeg f\u00e5r problemer, finder jeg sikkert en l\u00f8sning et eller andet sted p\u00e5 Stack Overflow eller GitHub. Men derudover.., <strong>Stylede komponenter<\/strong> har nogle optimeringsfunktioner, som betyder, at de kun gengives, n\u00e5r der er brug for det. De <a href=\"https:\/\/thecodest.co\/da\/dictionary\/why-do-projects-fail\/\">projekt<\/a> forventedes at blive bygget ved hj\u00e6lp af <a href=\"https:\/\/thecodest.co\/da\/blog\/conditional-component-visibility-in-react\/\">React<\/a> og <a href=\"https:\/\/thecodest.co\/da\/dictionary\/typescript-developer\/\">Manuskript<\/a>. Dette bibliotek har god underst\u00f8ttelse af begge teknologier. Det lyder fantastisk, ikke?<\/p>\n\n\n\n<p>S\u00e5 begyndte jeg at kode. Efter en m\u00e5ned, da appen var vokset, blev frontend'en <a href=\"https:\/\/thecodest.co\/da\/blog\/best-practices-for-building-a-strong-and-cohesive-team\/\">hold<\/a> og jeg fokuserede p\u00e5 at levere funktioner, fandt vi ud af, at den fantastiske <strong>Stylede komponenter <\/strong>Biblioteket havde sit eget m\u00e5l, og jeg skal fort\u00e6lle dig hvorfor.<\/p>\n\n\n\n<p>F\u00f8rst og fremmest navnekonventionen. For at skelne mellem <strong>Stylede komponenter<\/strong> fra <a href=\"https:\/\/thecodest.co\/da\/blog\/react-development-all-you-have-to-know\/\">React-komponenter<\/a>, var jeg n\u00f8dt til at bruge <code>Stylet<\/code> pr\u00e6fiks, som faldt <a href=\"https:\/\/thecodest.co\/da\/dictionary\/what-is-code-refactoring\/\">Kode<\/a> l\u00e6sbarhed. Og s\u00e5 (hvad der m\u00e5ske er m\u00e6rkeligt), underst\u00f8ttelse af Typescript. <strong>Stylede komponenter<\/strong>er, som du m\u00e5ske ved, baseret p\u00e5 CSS-in-JS-tilgangen. Det betyder, at du kan sende en hvilken som helst prop til dem og \u00e6ndre stilen p\u00e5, dvs. input baseret p\u00e5 denne prop, og jeg synes personligt, at denne funktion er fantastisk. I Typescript b\u00f8r du ogs\u00e5 implementere typen af denne prop, hvilket g\u00f8r koden l\u00e6ngere, hvis du har en <strong>Stylet komponent<\/strong>. \"Men det ville tage 5 sekunder mere, s\u00e5 hvad er problemet?\" - siger du m\u00e5ske. Du har ret, men n\u00e5r appen skaleres hurtigt op, og antallet af komponenter er<br>N\u00e5r tiden \u00f8ges, kan disse 5 sekunder nemt ganges med hundredvis af gange. Et andet problem er placeringen af <strong>Stylede komponenter<\/strong>.<\/p>\n\n\n\n<p>Nogle <strong><a href=\"https:\/\/thecodest.co\/da\/blog\/hire-vue-js-developers\/\">JS<\/a> Udviklere<\/strong> placerer dem i samme fil som den komponent, de h\u00f8rer til, og andre opretter separate filer til dem. Begge tilgange er gode af mange grunde. Det afh\u00e6nger mest af komponentens kompleksitet. Hvis man f\u00f8lger en af disse teknikker, kan man bevare sammenh\u00e6ngen, men hvis man fletter dem sammen, f\u00e5r man pr\u00e6cis det modsatte. Vi droppede CSS-i-JS-tilgangen og migrerede til <a href=\"https:\/\/thecodest.co\/blog\/how-we-care-about-quality-of-css-code\/\">SCSS<\/a>. Det var ikke nemt og hurtigt, men med lidt hj\u00e6lp klarede vi det. Vi begyndte at style html-tags i BEM-metoden og lagde selvf\u00f8lgelig styles i separate filer, en pr. komponent. Jeg sagde, at det at sende JS props til <strong>Stylede komponenter<\/strong> er en fantastisk funktion, men i <strong>SCSS<\/strong> det er umuligt. Jeg tror ogs\u00e5, at vi alle er enige om, at den syntaks, som React vil bruge til at kode betingede klasser, er forf\u00e6rdelig.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/react-classnames.png\" alt=\"kode for react-klassenavne \" title=\"reagere p\u00e5 klassenavne\"\/><\/figure>\n\n\n\n<p>Der er en ganske interessant l\u00f8sning. Hvis du forbinder BEM-metoden med <code>clsx<\/code> bibliotek, f\u00e5r du noget i retning af dette (stor tak til min ven Przemek Adamczyk for at vise mig dette bibliotek)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/will-clsx.png\" alt=\"clsx-kode\" title=\"eksempel p\u00e5 clsx-kode\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Det ser meget renere ud, synes du ikke?<\/h2>\n\n\n\n<p>Det bedste er, at du kun beh\u00f8ver at skrive betingelsesvariablen p\u00e5 komponentniveau og<br>ikke p\u00e5 stylingniveau. Det sparer virkelig tid. Desv\u00e6rre har s\u00e5dan en l\u00f8sning sine ulemper.<br><strong>SCSS<\/strong> er nem og venlig, men v\u00e6r forsigtig, n\u00e5r du bruger den med Next.js. Denne ramme g\u00f8r ikke<br>g\u00f8r det muligt at importere stilfiler direkte i komponentfilen (kun CSS-moduler).<\/p>\n\n\n\n<p>Hvis du foretr\u00e6kker en fil pr. komponent, skal du oprette <code>index.scss<\/code> der indeholder alle dine <strong>SCSS<\/strong> filer og<br>importere det til <code>_app.tsx<\/code> fil. Det eneste problem er, at du manuelt skal importere hver enkelt <strong>SCSS<\/strong> fil, du har oprettet. I React findes dette problem dog ikke, og du kan importere <strong>SCSS<\/strong> filer, hvor du vil. Misforst\u00e5 mig ikke. <strong>Stylede komponenter<\/strong> er virkelig gode. Som jeg sagde f\u00f8r, er overf\u00f8rsel af JS-variabler samt det globale tema fantastiske funktioner. N\u00e5r du bygger en stor app, hvor optimering er afg\u00f8rende, vil dette bibliotek sandsynligvis opfylde dine behov. I vores tilf\u00e6lde var det dog n\u00f8dvendigt at migrere til <strong>SCSS<\/strong> fik jackpot.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Opsummering<\/h2>\n\n\n\n<p>Konklusionen er, at selv om der er gode argumenter for begge dele <strong>SCSS og stiliserede komponenter <\/strong> i <strong><a href=\"https:\/\/thecodest.co\/da\/blog\/find-your-node-js-expert-for-hire-today\/\">webudvikling<\/a> <\/strong>Den endelige beslutning afh\u00e6nger af forskellige faktorer. <strong>SCSS <\/strong> tilbyder en mere velkendt syntaks for <strong>erfarne udviklere <\/strong> i traditionel CSS og giver en problemfri integration med eksisterende <strong>Kodebaser <\/strong> og <strong>komponentbiblioteker <\/strong>.<\/p>\n\n\n\n<p>P\u00e5 den anden side, <strong>Stylede komponenter <\/strong> tilbyde forbedret <strong>udviklererfaring <\/strong> med sin evne til at indkapsle stilarter i komponenter og forenkle stylingprocessen. Det fremmer ogs\u00e5 kodens modularitet og genanvendelighed, hvilket g\u00f8r det muligt for front-end <a href=\"https:\/\/thecodest.co\/da\/blog\/team-extension-guide-software-development\/\">Ingeni\u00f8rer<\/a> til effektivt at styre <strong>komponentkatalog <\/strong> og skabe en ensartet brugergr\u00e6nseflade p\u00e5 tv\u00e6rs af <strong><a href=\"https:\/\/thecodest.co\/da\/blog\/find-your-ideal-stack-for-web-development\/\">web<\/a> app <\/strong>. I betragtning af vigtigheden af <strong>bruger <a href=\"https:\/\/thecodest.co\/da\/blog\/app-data-collection-security-risks-value-and-types-explored\/\">data<\/a> <\/strong> sikkerhed og ydeevne, er det afg\u00f8rende at vurdere begge tilganges indvirkning p\u00e5 den endelige pakkest\u00f8rrelse og indl\u00e6sningstiden. I sidste ende er valget mellem <strong>SCSS og stiliserede komponenter <\/strong> b\u00f8r v\u00e6re baseret p\u00e5 projektets specifikke behov, medarbejdernes f\u00e6rdigheder og <strong><a href=\"https:\/\/thecodest.co\/da\/blog\/how-to-hire-the-best-outsourced-development-team-for-a-scaleup\/\">udviklingsteam<\/a> <\/strong>og de overordnede m\u00e5l for <strong> webapplikation <\/strong>. Det er tilr\u00e5deligt for udviklere at evaluere alle faktorer, holde sig opdateret gennem <strong>blogindl\u00e6g <\/strong> og branchediskussioner, og tr\u00e6ffe en informeret beslutning, der er i overensstemmelse med deres projektkrav og forbedrer den overordnede <strong>front-end <a href=\"https:\/\/thecodest.co\/da\/blog\/what-to-look-for-in-a-custom-software-development-company\/\">udviklingsproces<\/a> <\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"<p>I de sidste par m\u00e5neder har jeg arbejdet p\u00e5 et projekt for en af vores kunder. Da jeg var helt i begyndelsen, stod jeg over for et valg af bibliotek til styling.<\/p>","protected":false},"author":2,"featured_media":3932,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-3931","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Why Should You Use SCSS Instead of Styled Components? - The Codest<\/title>\n<meta name=\"description\" content=\"For the last couple of months, I\u2019ve been working on a project for one of our clients. When I was at very beginning, I faced a choice of the library for styling.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/da\/blog\/hvorfor-skal-du-bruge-scss-i-stedet-for-stylede-komponenter\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Why Should You Use SCSS Instead of Styled Components?\" \/>\n<meta property=\"og:description\" content=\"For the last couple of months, I\u2019ve been working on a project for one of our clients. When I was at very beginning, I faced a choice of the library for styling.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecodest.co\/da\/blog\/hvorfor-skal-du-bruge-scss-i-stedet-for-stylede-komponenter\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-01T08:53:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-24T11:21:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/scss_stc.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/\"},\"author\":{\"name\":\"thecodest\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\"},\"headline\":\"Why Should You Use SCSS Instead of Styled Components?\",\"datePublished\":\"2019-04-01T08:53:00+00:00\",\"dateModified\":\"2026-04-24T11:21:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/\"},\"wordCount\":820,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/scss_stc.png\",\"articleSection\":[\"Software Development\"],\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/\",\"name\":\"Why Should You Use SCSS Instead of Styled Components? - The Codest\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/scss_stc.png\",\"datePublished\":\"2019-04-01T08:53:00+00:00\",\"dateModified\":\"2026-04-24T11:21:07+00:00\",\"description\":\"For the last couple of months, I\u2019ve been working on a project for one of our clients. When I was at very beginning, I faced a choice of the library for styling.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/scss_stc.png\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/scss_stc.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecodest.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Why Should You Use SCSS Instead of Styled Components?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"name\":\"The Codest\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecodest.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"width\":144,\"height\":36,\"caption\":\"The Codest\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/pl.linkedin.com\\\/company\\\/codest\",\"https:\\\/\\\/clutch.co\\\/profile\\\/codest\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\",\"name\":\"thecodest\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"caption\":\"thecodest\"},\"url\":\"https:\\\/\\\/thecodest.co\\\/da\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Hvorfor skal du bruge SCSS i stedet for stylede komponenter? - The Codest","description":"I de sidste par m\u00e5neder har jeg arbejdet p\u00e5 et projekt for en af vores kunder. Da jeg var helt i begyndelsen, stod jeg over for et valg af bibliotek til styling.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thecodest.co\/da\/blog\/hvorfor-skal-du-bruge-scss-i-stedet-for-stylede-komponenter\/","og_locale":"da_DK","og_type":"article","og_title":"Why Should You Use SCSS Instead of Styled Components?","og_description":"For the last couple of months, I\u2019ve been working on a project for one of our clients. When I was at very beginning, I faced a choice of the library for styling.","og_url":"https:\/\/thecodest.co\/da\/blog\/hvorfor-skal-du-bruge-scss-i-stedet-for-stylede-komponenter\/","og_site_name":"The Codest","article_published_time":"2019-04-01T08:53:00+00:00","article_modified_time":"2026-04-24T11:21:07+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/scss_stc.png","type":"image\/png"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"5 minutter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#article","isPartOf":{"@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/"},"author":{"name":"thecodest","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76"},"headline":"Why Should You Use SCSS Instead of Styled Components?","datePublished":"2019-04-01T08:53:00+00:00","dateModified":"2026-04-24T11:21:07+00:00","mainEntityOfPage":{"@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/"},"wordCount":820,"commentCount":0,"publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"image":{"@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/scss_stc.png","articleSection":["Software Development"],"inLanguage":"da-DK","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/","url":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/","name":"Hvorfor skal du bruge SCSS i stedet for stylede komponenter? - The Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/scss_stc.png","datePublished":"2019-04-01T08:53:00+00:00","dateModified":"2026-04-24T11:21:07+00:00","description":"I de sidste par m\u00e5neder har jeg arbejdet p\u00e5 et projekt for en af vores kunder. Da jeg var helt i begyndelsen, stod jeg over for et valg af bibliotek til styling.","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/"]}]},{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#primaryimage","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/scss_stc.png","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/scss_stc.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecodest.co\/"},{"@type":"ListItem","position":2,"name":"Why Should You Use SCSS Instead of Styled Components?"}]},{"@type":"WebSite","@id":"https:\/\/thecodest.co\/#website","url":"https:\/\/thecodest.co\/","name":"Codest","description":"","publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecodest.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","width":144,"height":36,"caption":"The Codest"},"image":{"@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/pl.linkedin.com\/company\/codest","https:\/\/clutch.co\/profile\/codest"]},{"@type":"Person","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76","name":"thecodest","image":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","caption":"thecodest"},"url":"https:\/\/thecodest.co\/da\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/da\/wp-json\/wp\/v2\/posts\/3931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/da\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/da\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/da\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/da\/wp-json\/wp\/v2\/comments?post=3931"}],"version-history":[{"count":9,"href":"https:\/\/thecodest.co\/da\/wp-json\/wp\/v2\/posts\/3931\/revisions"}],"predecessor-version":[{"id":8166,"href":"https:\/\/thecodest.co\/da\/wp-json\/wp\/v2\/posts\/3931\/revisions\/8166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/da\/wp-json\/wp\/v2\/media\/3932"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/da\/wp-json\/wp\/v2\/media?parent=3931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/da\/wp-json\/wp\/v2\/categories?post=3931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/da\/wp-json\/wp\/v2\/tags?post=3931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}