{"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":"kodel-turetumete-naudoti-scss-o-ne-stilizuotus-komponentus","status":"publish","type":"post","link":"https:\/\/thecodest.co\/lt\/blog\/why-should-you-use-scss-instead-of-styled-components\/","title":{"rendered":"Kod\u0117l tur\u0117tum\u0117te naudoti SCSS vietoj stilizuot\u0173 komponent\u0173?"},"content":{"rendered":"<p>Palygin\u0119 populiarius sprendimus, tokius kaip paprastas CSS, Emotion, <strong>SCSS <\/strong>ir<strong> Stilizuoti komponentai<\/strong>, galiausiai pasirinkau paskutin\u012f. Viskas atrod\u0117 gerai. \u0160iuo metu ji turi labai populiari\u0105 bibliotek\u0105, o tai rei\u0161kia, kad<br>jau yra didel\u0117 bendruomen\u0117, tod\u0117l jei susidur\u010diau su kokiomis nors problemomis, tikriausiai rasiu sprendim\u0105 kur nors Stack Overflow arba GitHub. Be to, <strong>Stilizuoti komponentai<\/strong> turi tam tikr\u0173 optimizavimo funkcij\u0173, o tai rei\u0161kia, kad jie atvaizduojami tik tada, kai j\u0173 reikia. Svetain\u0117 <a href=\"https:\/\/thecodest.co\/lt\/dictionary\/why-do-projects-fail\/\">projektas<\/a> buvo tikimasi, kad jis bus sukurtas naudojant <a href=\"https:\/\/thecodest.co\/lt\/blog\/conditional-component-visibility-in-react\/\">React<\/a> ir <a href=\"https:\/\/thecodest.co\/lt\/dictionary\/typescript-developer\/\">Ma\u0161inra\u0161tis<\/a>. \u0160i biblioteka puikiai palaiko abi technologijas. Skamba nuostabiai, tiesa?<\/p>\n\n\n\n<p>Tada prad\u0117jau programuoti. Po m\u0117nesio, kai program\u0117l\u0117 i\u0161augo, priekin\u0117 dalis <a href=\"https:\/\/thecodest.co\/lt\/blog\/best-practices-for-building-a-strong-and-cohesive-team\/\">komanda<\/a> ir a\u0161 sutelk\u0117me d\u0117mes\u012f \u012f funkcij\u0173 teikim\u0105, su\u017einojome, kad nuostabus <strong>Stilizuoti komponentai <\/strong>biblioteka tur\u0117jo savo tiksl\u0105 ir a\u0161 jums pasakysiu, kod\u0117l.<\/p>\n\n\n\n<p>Vis\u0173 pirma, pavadinim\u0173 suteikimo tvarka. Norint atskirti <strong>Stilizuoti komponentai<\/strong> i\u0161 <a href=\"https:\/\/thecodest.co\/lt\/blog\/react-development-all-you-have-to-know\/\">React komponentai<\/a>, tur\u0117jau naudoti <code>Stilizuota<\/code> prie\u0161d\u0117lis, kuris suma\u017e\u0117jo <a href=\"https:\/\/thecodest.co\/lt\/dictionary\/what-is-code-refactoring\/\">kodas<\/a> skaitomumas. Tada (kas gali b\u016bti keista), Typescript palaikymas. <strong>Stilizuoti komponentai<\/strong>, kaip tikriausiai \u017einote, yra pagr\u012fsti CSS-in-JS metodu. Tai rei\u0161kia, kad jiems galite perduoti bet kok\u012f rekvizit\u0105 ir pagal j\u012f pakeisti \u012fvesties stili\u0173, t. y. \u012fvesties stili\u0173, ir a\u0161 asmeni\u0161kai manau, kad \u0161i funkcija yra nuostabi. Typescript, taip pat tur\u0117tum\u0117te \u012fgyvendinti \u0161io rekvizito tip\u0105 daro j\u012f kodas ilgiau bet <strong>Stilizuota sudedamoji dalis<\/strong>. \u201cBet tai u\u017etrukt\u0173 dar 5 sekundes, tad kokia j\u016bs\u0173 problema?\u201d - galite pasakyti. Esate teisus, nors kai programa greitai ple\u010diasi ir komponent\u0173 skai\u010dius yra<br>padid\u0117jus, \u0161ias 5 sekundes galima lengvai padauginti \u0161imtus kart\u0173. Kita problema yra ta, kad <strong>Stilizuoti komponentai<\/strong>.<\/p>\n\n\n\n<p>Kai kurie <strong><a href=\"https:\/\/thecodest.co\/lt\/blog\/hire-vue-js-developers\/\">JS<\/a> k\u016br\u0117jai<\/strong> juos talpina \u012f t\u0105 pat\u012f fail\u0105 kartu su komponentu, kuriam jie priklauso, o kiti jiems sukuria atskirus failus. Abu b\u016bdai yra geri d\u0117l daugelio prie\u017eas\u010di\u0173. Tai labiausiai priklauso nuo komponento sud\u0117tingumo. Laikantis vieno i\u0161 \u0161i\u0173 metod\u0173 galima i\u0161laikyti sanglaud\u0105, ta\u010diau juos sujungus gaunama visi\u0161kai prie\u0161inga nauda. Atsisak\u0117me CSS-in-JS metodo ir per\u0117jome prie <a href=\"https:\/\/thecodest.co\/blog\/how-we-care-about-quality-of-css-code\/\">SCSS<\/a>. Nebuvo lengva ir greita, bet su nedidele pagalba mums pavyko. Prad\u0117jome stiliuoti html \u017eymas pagal BEM metodik\u0105 ir, \u017einoma, stilius sud\u0117jome \u012f atskirus failus, po vien\u0105 kiekvienam komponentui. Sakiau, kad perduodant JS rekvizitus <strong>Stilizuoti komponentai<\/strong> yra nuostabi funkcija, ta\u010diau <strong>SCSS<\/strong> tai ne\u012fmanoma. Taip pat manau, kad visi sutinkame, jog sintaks\u0117, kuria React nori koduoti s\u0105lygines klases, yra siaubinga.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/react-classnames.png\" alt=\"react klasi\u0173 pavadinim\u0173 kodai \" title=\"react klasi\u0173 pavadinimai\"\/><\/figure>\n\n\n\n<p>Na, yra vienas gana \u012fdomus sprendimas. Jei BEM metodik\u0105 sujungsite su <code>clsx<\/code> bibliotek\u0105, gausite ka\u017ek\u0105 pana\u0161aus \u012f tai (didelis a\u010di\u016b mano draugui Przemekui Adamczykui u\u017e tai, kad parod\u0117 man \u0161i\u0105 bibliotek\u0105)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/will-clsx.png\" alt=\"clsx kodas\" title=\"clsx kodo pavyzdys\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Atrodo daug \u0161variau, ar ne?<\/h2>\n\n\n\n<p>Geriausia tai, kad komponento lygmenyje tereikia \u012fvesti s\u0105lygos kintam\u0105j\u012f ir<br>ne stiliaus lygiu. Tai tikrai taupo laik\u0105. Deja, toks sprendimas turi ir tr\u016bkum\u0173.<br><strong>SCSS<\/strong> yra paprasta ir patogi, ta\u010diau b\u016bkite atsarg\u016bs j\u0105 naudodami su Next.js. \u0160is karkasas neturi<br>leid\u017eia importuoti stiliaus failus tiesiai \u012f komponento fail\u0105 (tik CSS modulius).<\/p>\n\n\n\n<p>Jei pageidaujate vieno failo kiekvienam komponentui, turite sukurti <code>index.scss<\/code> kuriame yra visi j\u016bs\u0173 <strong>SCSS<\/strong> failus ir<br>importuoti j\u012f \u012f <code>_app.tsx<\/code> failas. Vienintel\u0117 problema yra ta, kad turite rankiniu b\u016bdu importuoti kiekvien\u0105 <strong>SCSS<\/strong> sukurt\u0105 fail\u0105. Ta\u010diau React sistemoje \u0161ios problemos n\u0117ra ir galite importuoti <strong>SCSS<\/strong> failus, kur tik norite. Nesupraskite man\u0119s neteisingai. <strong>Stilizuoti komponentai<\/strong> yra tikrai geri. Kaip jau min\u0117jau, JS kintam\u0173j\u0173 perdavimas ir globali tema yra nuostabios funkcijos. Kai kuriate didel\u0119 program\u0117l\u0119, kurioje labai svarbu optimizuoti, \u0161i biblioteka tikriausiai patenkins j\u016bs\u0173 poreikius. Ta\u010diau m\u016bs\u0173 atveju per\u0117jimas prie <strong>SCSS<\/strong> laim\u0117ti aukso puod\u0105.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apibendrinimas<\/h2>\n\n\n\n<p>Apibendrinant galima teigti, kad nors yra pagr\u012fst\u0173 argument\u0173 ir u\u017e <strong>SCSS ir stilizuoti komponentai <\/strong> svetain\u0117je <strong><a href=\"https:\/\/thecodest.co\/lt\/blog\/find-your-node-js-expert-for-hire-today\/\">\u017einiatinklio k\u016brimas<\/a> <\/strong>, galutinis sprendimas priklauso nuo \u012fvairi\u0173 veiksni\u0173. <strong>SCSS <\/strong> si\u016bloma geriau pa\u017e\u012fstama sintaks\u0117 <strong>patyr\u0119 k\u016br\u0117jai <\/strong> tradicini\u0173 CSS ir u\u017etikrina skland\u017ei\u0105 integracij\u0105 su esamais <strong>kod\u0173 baz\u0117s <\/strong> ir <strong>komponent\u0173 bibliotekos <\/strong>.<\/p>\n\n\n\n<p>Kita vertus, <strong>Stilizuoti komponentai <\/strong> pasi\u016blyti patobulint\u0105 <strong>k\u016br\u0117jo patirtis <\/strong> geb\u0117jimu \u012fkomponuoti stilius \u012f komponentus ir supaprastinti stiliaus k\u016brimo proces\u0105. Jis taip pat skatina kodo moduliacij\u0105 ir pakartotin\u012f panaudojim\u0105, tod\u0117l priekin\u0117s dalies <a href=\"https:\/\/thecodest.co\/lt\/blog\/team-extension-guide-software-development\/\">in\u017einieriai<\/a> efektyviai valdyti <strong>komponent\u0173 katalogas <\/strong> ir sukurti nuosekli\u0105 vartotojo s\u0105saj\u0105 visoje <strong><a href=\"https:\/\/thecodest.co\/lt\/blog\/find-your-ideal-stack-for-web-development\/\">\u017einiatinklio svetain\u0117<\/a> programa <\/strong>. Atsi\u017evelgiant \u012f svarb\u0105 <strong>naudotojas <a href=\"https:\/\/thecodest.co\/lt\/blog\/app-data-collection-security-risks-value-and-types-explored\/\">duomenys<\/a> <\/strong> saugum\u0105 ir na\u0161um\u0105, labai svarbu \u012fvertinti abiej\u0173 metod\u0173 poveik\u012f galutiniam paketo dyd\u017eiui ir \u012fk\u0117limo laikui. Galiausiai reikia pasirinkti tarp <strong>SCSS ir stilizuoti komponentai <\/strong> tur\u0117t\u0173 b\u016bti grind\u017eiamas konkre\u010diais projekto poreikiais, darbuotoj\u0173 \u012fg\u016bd\u017eiais ir j\u0173 kompetencija. <strong><a href=\"https:\/\/thecodest.co\/lt\/blog\/how-to-hire-the-best-outsourced-development-team-for-a-scaleup\/\">k\u016brimo komanda<\/a> <\/strong>, ir bendri tikslai <strong> \u017einiatinklio programa <\/strong>. K\u016br\u0117jams patartina \u012fvertinti visus veiksnius, nuolat atnaujinti <strong>tinklara\u0161\u010dio \u012fra\u0161ai <\/strong> ir pramon\u0117s diskusij\u0173 ir priimti pagr\u012fst\u0105 sprendim\u0105, kuris atitikt\u0173 j\u0173 projekto reikalavimus ir pagerint\u0173 bendr\u0105 projekto kokyb\u0119. <strong>Front-end <a href=\"https:\/\/thecodest.co\/lt\/blog\/what-to-look-for-in-a-custom-software-development-company\/\">k\u016brimo procesas<\/a> <\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Pastaruosius por\u0105 m\u0117nesi\u0173 dirbau su vieno m\u016bs\u0173 kliento projektu. Kai buvau pa\u010dioje prad\u017eioje, susid\u016briau su bibliotekos stiliaus pasirinkimu.<\/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\/lt\/tinklarastis\/kodel-turetumete-naudoti-scss-o-ne-stilizuotus-komponentus\/\" \/>\n<meta property=\"og:locale\" content=\"lt_LT\" \/>\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\/lt\/tinklarastis\/kodel-turetumete-naudoti-scss-o-ne-stilizuotus-komponentus\/\" \/>\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 minut\u0117s\" \/>\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\":\"lt-LT\",\"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\":\"lt-LT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"lt-LT\",\"@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\":\"lt-LT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"lt-LT\",\"@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\":\"lt-LT\",\"@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\\\/lt\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Kod\u0117l tur\u0117tum\u0117te naudoti SCSS vietoj stilizuot\u0173 komponent\u0173? - 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\/lt\/tinklarastis\/kodel-turetumete-naudoti-scss-o-ne-stilizuotus-komponentus\/","og_locale":"lt_LT","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\/lt\/tinklarastis\/kodel-turetumete-naudoti-scss-o-ne-stilizuotus-komponentus\/","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 minut\u0117s"},"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":"lt-LT","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":"Kod\u0117l tur\u0117tum\u0117te naudoti SCSS vietoj stilizuot\u0173 komponent\u0173? - 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":"lt-LT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/"]}]},{"@type":"ImageObject","inLanguage":"lt-LT","@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":"lt-LT"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"lt-LT","@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":"lt-LT","@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\/lt\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/posts\/3931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/comments?post=3931"}],"version-history":[{"count":9,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/posts\/3931\/revisions"}],"predecessor-version":[{"id":8166,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/posts\/3931\/revisions\/8166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/media\/3932"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/media?parent=3931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/categories?post=3931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/tags?post=3931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}