{"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":"af-hverju-aettir-thu-ad-nota-scss-i-stad-styled-components","status":"publish","type":"post","link":"https:\/\/thecodest.co\/is\/blog\/why-should-you-use-scss-instead-of-styled-components\/","title":{"rendered":"Af hverju \u00e6ttir \u00fe\u00fa a\u00f0 nota SCSS \u00ed sta\u00f0 Styled Components?"},"content":{"rendered":"<p>Eftir a\u00f0 hafa bori\u00f0 saman vins\u00e6lar lausnir eins og hreint CSS, Emotion, <strong>SCSS <\/strong>og<strong> St\u00edlhreinar einingar<\/strong>, \u00e9g valdi loks \u00feann s\u00ed\u00f0asta. Allt virtist vera \u00ed lagi. Hann hefur mj\u00f6g vins\u00e6la b\u00f3kasafn n\u00fa \u00e1 d\u00f6gum, sem \u00fe\u00fd\u00f0ir<br>\u00dea\u00f0 er \u00feegar til st\u00f3r h\u00f3pur, svo ef \u00e9g lendi \u00ed einhverjum vandr\u00e6\u00f0um mun \u00e9g l\u00edklega finna lausn einhvers sta\u00f0ar \u00e1 Stack Overflow e\u00f0a GitHub. A\u00f0 auki, <strong>St\u00edlhreinar einingar<\/strong> Eiga nokkrar f\u00ednstillingareiginleika sem \u00fe\u00fd\u00f0ir a\u00f0 \u00fe\u00e6r birtast a\u00f0eins \u00feegar \u00fe\u00f6rf krefur. \u00deeir <a href=\"https:\/\/thecodest.co\/is\/dictionary\/why-do-projects-fail\/\">verkefni<\/a> var b\u00faist vi\u00f0 a\u00f0 yr\u00f0i byggt me\u00f0 <a href=\"https:\/\/thecodest.co\/is\/blog\/conditional-component-visibility-in-react\/\">React<\/a> og <a href=\"https:\/\/thecodest.co\/is\/dictionary\/typescript-developer\/\">Tegundaskjal<\/a>. \u00deessi b\u00f3kasafn b\u00fd\u00f0ur upp \u00e1 fr\u00e1b\u00e6ran stu\u00f0ning fyrir b\u00e1\u00f0ar t\u00e6knir. Hlj\u00f3mar fr\u00e1b\u00e6rlega, ekki satt?<\/p>\n\n\n\n<p>\u00c9g byrja\u00f0i \u00fe\u00e1 a\u00f0 k\u00f3\u00f0a. Eftir m\u00e1nu\u00f0, \u00feegar forriti\u00f0 hefur vaxi\u00f0, frontendi\u00f0 <a href=\"https:\/\/thecodest.co\/is\/blog\/best-practices-for-building-a-strong-and-cohesive-team\/\">li\u00f0<\/a> og \u00e9g einbeittum okkur a\u00f0 afhendingu eiginleika, komumst vi\u00f0 a\u00f0 \u00fev\u00ed a\u00f0 hi\u00f0 \u00f3tr\u00falega <strong>St\u00edlhreinar einingar <\/strong>B\u00f3kasafni\u00f0 haf\u00f0i sitt eigi\u00f0 mark og \u00e9g mun segja \u00fe\u00e9r af hverju.<\/p>\n\n\n\n<p>Fyrst og fremst, nafngiftingarregluger\u00f0in. Til a\u00f0greiningar <strong>St\u00edlhreinar einingar<\/strong> fr\u00e1 <a href=\"https:\/\/thecodest.co\/is\/blog\/react-development-all-you-have-to-know\/\">React \u00edhlutir<\/a>, \u00e9g \u00feurfti a\u00f0 nota <code>St\u00edlhrein<\/code> forskei\u00f0 sem minnka\u00f0i <a href=\"https:\/\/thecodest.co\/is\/dictionary\/what-is-code-refactoring\/\">k\u00f3\u00f0i<\/a> Lestrarh\u00e6fni. S\u00ed\u00f0an (sem g\u00e6ti veri\u00f0 skr\u00fdti\u00f0) stu\u00f0ningur vi\u00f0 TypeScript. <strong>St\u00edlhreinar einingar<\/strong>, eins og \u00fe\u00fa g\u00e6tir vita\u00f0, byggja \u00e1 CSS-in-JS-a\u00f0fer\u00f0inni. \u00deetta \u00fe\u00fd\u00f0ir a\u00f0 \u00fe\u00fa getur sent \u00feeim hva\u00f0a prop sem er og breytt st\u00edlnum, \u00fe.e. \u00fatliti inntaksins, \u00fat fr\u00e1 \u00feessum prop, og \u00e9g tel pers\u00f3nulega a\u00f0 \u00feessi eiginleiki s\u00e9 fr\u00e1b\u00e6r. \u00cd TypeScript \u00e6ttir\u00f0u einnig a\u00f0 innlei\u00f0a ger\u00f0 \u00feessa prop, sem gerir k\u00f3\u00f0ann lengri hva\u00f0 sem er <strong>St\u00edlhreinn \u00edhlutur<\/strong>. \u201cEn \u00fea\u00f0 myndi taka svona fimm sek\u00fandur \u00ed vi\u00f0b\u00f3t, svo hva\u00f0 er vandam\u00e1li\u00f0 \u00feitt?\u201d \u2013 g\u00e6tir\u00f0u sagt. \u00de\u00fa hefur r\u00e9tt fyrir \u00fe\u00e9r, \u00fe\u00f3 \u00feegar forriti\u00f0 st\u00e6kkar hratt og fj\u00f6ldi \u00edhluta er<br>\u00dear sem \u00feetta eykst, er au\u00f0velt a\u00f0 margfalda \u00feessar fimm sek\u00fandur hundru\u00f0 sinnum. Anna\u00f0 vandam\u00e1l er sta\u00f0setningin \u00e1 <strong>St\u00edlhreinar einingar<\/strong>.<\/p>\n\n\n\n<p>Sumir <strong><a href=\"https:\/\/thecodest.co\/is\/blog\/hire-vue-js-developers\/\">JS<\/a> forritarar<\/strong> setja \u00feau \u00ed s\u00f6mu skr\u00e1 og \u00fe\u00e6r \u00edhlutir sem \u00feau tilheyra, en a\u00f0rir b\u00faa til s\u00e9rstakar skr\u00e1r fyrir \u00feau. B\u00e1\u00f0ar n\u00e1lganirnar eru g\u00f3\u00f0ar af m\u00f6rgum \u00e1st\u00e6\u00f0um. \u00dea\u00f0 fer a\u00f0allega eftir fl\u00e6kjustigi \u00edhlutarins. A\u00f0 fylgja annarri \u00feessara a\u00f0fer\u00f0a getur vi\u00f0haldi\u00f0 samheldni, en a\u00f0 sameina \u00fe\u00e6r skapar n\u00e1kv\u00e6mlega hi\u00f0 gagnst\u00e6\u00f0a. Vi\u00f0 h\u00e6ttum a\u00f0 nota CSS-in-JS-a\u00f0fer\u00f0ina og fluttumst yfir \u00ed <a href=\"https:\/\/thecodest.co\/blog\/how-we-care-about-quality-of-css-code\/\">SCSS<\/a>. \u00dea\u00f0 var ekki au\u00f0velt n\u00e9 flj\u00f3tlegt en me\u00f0 sm\u00e1 hj\u00e1lp komumst vi\u00f0 \u00feanga\u00f0. Vi\u00f0 byrju\u00f0um a\u00f0 st\u00edla HTML-tagi \u00ed BEM-a\u00f0fer\u00f0afr\u00e6\u00f0i og, au\u00f0vita\u00f0, settum st\u00edla \u00ed a\u00f0skildar skr\u00e1r, eina fyrir hvern \u00fe\u00e1tt. \u00c9g sag\u00f0i a\u00f0 \u00fea\u00f0 a\u00f0 senda JS-eiginleika til <strong>St\u00edlhreinar einingar<\/strong> er fr\u00e1b\u00e6r eiginleiki, en \u00ed <strong>SCSS<\/strong> \u00dea\u00f0 er \u00f3m\u00f6gulegt. \u00c9g held a\u00f0 vi\u00f0 s\u00e9um \u00f6ll samm\u00e1la um a\u00f0 setningafr\u00e6\u00f0i React til a\u00f0 k\u00f3\u00f0a skilyrtar flokka s\u00e9 hr\u00e6\u00f0ileg.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/react-classnames.png\" alt=\"k\u00f3\u00f0i react flokksn\u00f6fn \" title=\"react flokksn\u00f6fn\"\/><\/figure>\n\n\n\n<p>J\u00e6ja, \u00fea\u00f0 er ein ansi \u00e1hugaver\u00f0 lausn. Ef \u00fe\u00fa tengir BEM-a\u00f0fer\u00f0afr\u00e6\u00f0ina vi\u00f0 <code>flokk<\/code> b\u00f3kasafn, \u00fe\u00fa munt f\u00e1 eitthva\u00f0 svona (st\u00f3rt hr\u00f3s til vinar m\u00edns Przemeks Adamczyk fyrir a\u00f0 s\u00fdna m\u00e9r \u00feetta b\u00f3kasafn)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/will-clsx.png\" alt=\"clsx k\u00f3\u00f0i\" title=\"d\u00e6mi um clsx k\u00f3\u00f0a\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">L\u00edtur mun hreinna \u00fat, finnst \u00fe\u00e9r ekki?<\/h2>\n\n\n\n<p>\u00dea\u00f0 besta er a\u00f0 \u00fe\u00fa \u00fearft a\u00f0eins a\u00f0 sl\u00e1 inn skilyr\u00f0isbreytuna \u00e1 \u00edhlutastigi og<br>Ekki \u00e1 st\u00edlstigi. \u00dea\u00f0 sparar virkilega t\u00edma. \u00dev\u00ed mi\u00f0ur hefur sl\u00edk lausn s\u00edn \u00f3kostina.<br><strong>SCSS<\/strong> er einfalt og notendav\u00e6nt en vertu vark\u00e1r \u00feegar \u00fe\u00fa notar \u00fea\u00f0 me\u00f0 Next.js. \u00deetta rammasett gerir \u00fea\u00f0 ekki<br>Leyfa a\u00f0 flytja inn st\u00edlskr\u00e1r beint \u00ed \u00edhlutisskr\u00e1na (a\u00f0eins CSS-einingar).<\/p>\n\n\n\n<p>Ef \u00fe\u00fa k\u00fdst eina skr\u00e1 fyrir hvern \u00edhlut, \u00fearftu a\u00f0 b\u00faa til <code>v\u00edsitala.scss<\/code> sem inniheldur allt \u00feitt <strong>SCSS<\/strong> skr\u00e1r og<br>Flytja \u00fea\u00f0 inn \u00ed <code>_app.tsx<\/code> skr\u00e1. Eina vandam\u00e1li\u00f0 er a\u00f0 \u00fe\u00fa \u00fearft a\u00f0 flytja inn hvern og einn handvirkt. <strong>SCSS<\/strong> skr\u00e1na sem \u00fe\u00fa bj\u00f3st til. \u00cd React er \u00feetta vandam\u00e1l hins vegar ekki til sta\u00f0ar og \u00fe\u00fa getur flutt inn <strong>SCSS<\/strong> Skr\u00e1r hvar sem \u00fe\u00fa vilt. Ekki misskilja mig. <strong>St\u00edlhreinar einingar<\/strong> eru virkilega g\u00f3\u00f0ar. Eins og \u00e9g sag\u00f0i \u00e1\u00f0ur, er \u00fea\u00f0 \u00f3tr\u00falegt a\u00f0 geta sent JS-breytur sem og al\u00fej\u00f3\u00f0lega \u00feema\u00f0. \u00deegar \u00fe\u00fa b\u00fdr\u00f0 til st\u00f3rt forrit \u00fear sem hagr\u00e6\u00f0ing er mikilv\u00e6g, mun \u00feessi b\u00f3kasafn l\u00edklega uppfylla \u00fearfir \u00fe\u00ednar. \u00cd okkar tilfelli hins vegar, flutningur til <strong>SCSS<\/strong> Landa\u00f0i st\u00f3ru.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00c1lyktun<\/h2>\n\n\n\n<p>A\u00f0 lokum, \u00fe\u00f3 a\u00f0 gild r\u00f6k s\u00e9u fyrir b\u00e1\u00f0um <strong>SCSS og Styled Components <\/strong> \u00ed <strong><a href=\"https:\/\/thecodest.co\/is\/blog\/find-your-node-js-expert-for-hire-today\/\">vef\u00fer\u00f3un<\/a> <\/strong>, endanleg \u00e1kv\u00f6r\u00f0un r\u00e6\u00f0st af \u00fdmsum \u00fe\u00e1ttum. <strong>SCSS <\/strong> b\u00fd\u00f0ur upp \u00e1 kunnari m\u00e1lfar fyrir <strong>reynslumiklir forritarar <\/strong> \u00ed hef\u00f0bundnu CSS og b\u00fd\u00f0ur upp \u00e1 hn\u00f6kralausa sam\u00fe\u00e6ttingu vi\u00f0 \u00fea\u00f0 sem fyrir er <strong>k\u00f3\u00f0agrunnar <\/strong> og <strong>\u00edhlutab\u00f3kas\u00f6fn <\/strong>.<\/p>\n\n\n\n<p>\u00c1 hinn b\u00f3ginn, <strong>St\u00edlhreinar einingar <\/strong> bj\u00f3\u00f0a upp \u00e1 b\u00e6tt <strong>upplifun forritara <\/strong> me\u00f0 getu sinni til a\u00f0 fanga st\u00edla innan \u00edhluta og einfalda st\u00edlsetningarferli\u00f0. \u00dea\u00f0 stu\u00f0lar einnig a\u00f0 m\u00f3duleiningu og endurn\u00fdtanleika k\u00f3\u00f0a, sem gerir framanver\u00f0u vi\u00f0m\u00f3ti kleift <a href=\"https:\/\/thecodest.co\/is\/blog\/team-extension-guide-software-development\/\">verkfr\u00e6\u00f0ingar<\/a> til a\u00f0 stj\u00f3rna \u00e1 skilvirkan h\u00e1tt <strong>m\u00f6guleikar st\u00fdringar <\/strong> og b\u00faa til samr\u00e6mda notendavi\u00f0m\u00f3ti\u00f0 um allt <strong><a href=\"https:\/\/thecodest.co\/is\/blog\/find-your-ideal-stack-for-web-development\/\">vefur<\/a> forrit <\/strong>. Me\u00f0 hli\u00f0sj\u00f3n af mikilv\u00e6gi <strong>notandi <a href=\"https:\/\/thecodest.co\/is\/blog\/app-data-collection-security-risks-value-and-types-explored\/\">g\u00f6gn<\/a> <\/strong> Var\u00f0andi \u00f6ryggi og frammist\u00f6\u00f0u er mikilv\u00e6gt a\u00f0 meta \u00e1hrif beggja n\u00e1lgana \u00e1 endanlega st\u00e6r\u00f0 pakkans og hle\u00f0slut\u00edma. A\u00f0 lokum er vali\u00f0 milli <strong>SCSS og Styled Components <\/strong> \u00e6tti a\u00f0 byggja \u00e1 s\u00e9rt\u00e6kum \u00fe\u00f6rfum verkefnisins, f\u00e6rni setti af <strong><a href=\"https:\/\/thecodest.co\/is\/blog\/how-to-hire-the-best-outsourced-development-team-for-a-scaleup\/\">\u00fer\u00f3un team<\/a> <\/strong>, og heildarmarkmi\u00f0in af <strong> vefforrit <\/strong>. \u00dea\u00f0 er r\u00e1\u00f0legt fyrir forritara a\u00f0 meta alla \u00fe\u00e6tti og fylgjast me\u00f0 n\u00fdjustu \u00fer\u00f3uninni \u00ed gegnum <strong>bloggf\u00e6rslur <\/strong> og i\u00f0na\u00f0arr\u00e6\u00f0ur, og taka uppl\u00fdsta \u00e1kv\u00f6r\u00f0un sem samr\u00e6mist kr\u00f6fum verkefnisins og eykur heildina <strong>framhli\u00f0 <a href=\"https:\/\/thecodest.co\/is\/blog\/what-to-look-for-in-a-custom-software-development-company\/\">\u00fer\u00f3unarferli<\/a> <\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Undanfarna tvo m\u00e1nu\u00f0i hef \u00e9g unni\u00f0 a\u00f0 verkefni fyrir einn af vi\u00f0skiptavinum okkar. \u00deegar \u00e9g var r\u00e9tt \u00ed byrjun st\u00f3\u00f0 \u00e9g frammi fyrir vali \u00e1 b\u00f3kasafni til st\u00edlsetningar.<\/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=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/is\/blogg\/af-hverju-aettir-thu-ad-nota-scss-i-stad-styled-components\/\" \/>\n<meta property=\"og:locale\" content=\"is_IS\" \/>\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\/is\/blogg\/af-hverju-aettir-thu-ad-nota-scss-i-stad-styled-components\/\" \/>\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 minutes\" \/>\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\":\"is\",\"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\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/#breadcrumb\"},\"inLanguage\":\"is\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"is\",\"@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\":\"is\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"is\",\"@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\":\"is\",\"@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\\\/is\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Af hverju \u00e6ttir \u00fe\u00fa a\u00f0 nota SCSS \u00ed sta\u00f0 Styled Components? - The Codest","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\/is\/blogg\/af-hverju-aettir-thu-ad-nota-scss-i-stad-styled-components\/","og_locale":"is_IS","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\/is\/blogg\/af-hverju-aettir-thu-ad-nota-scss-i-stad-styled-components\/","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 minutes"},"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":"is","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":"Af hverju \u00e6ttir \u00fe\u00fa a\u00f0 nota SCSS \u00ed sta\u00f0 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","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#breadcrumb"},"inLanguage":"is","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/"]}]},{"@type":"ImageObject","inLanguage":"is","@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":"is"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"is","@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":"is","@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\/is\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/posts\/3931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/comments?post=3931"}],"version-history":[{"count":9,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/posts\/3931\/revisions"}],"predecessor-version":[{"id":8166,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/posts\/3931\/revisions\/8166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/media\/3932"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/media?parent=3931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/categories?post=3931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/tags?post=3931"}],"curies":[{"name":"vp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}