{"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":"kapec-jums-vajadzetu-izmantot-scss-nevis-stilizeto-komponentu-vieta","status":"publish","type":"post","link":"https:\/\/thecodest.co\/lv\/blog\/why-should-you-use-scss-instead-of-styled-components\/","title":{"rendered":"K\u0101p\u0113c jums vajadz\u0113tu izmantot SCSS, nevis stiliz\u0113tus komponentus?"},"content":{"rendered":"<p>P\u0113c popul\u0101ru risin\u0101jumu, piem\u0113ram, vienk\u0101r\u0161a CSS, Emotion, sal\u012bdzin\u0101\u0161anas, <strong>SCSS <\/strong>un<strong> Stiliz\u0113ti komponenti<\/strong>, es beidzot izv\u0113l\u0113jos p\u0113d\u0113jo. \u0160\u0137ita, ka viss ir k\u0101rt\u012bb\u0101. M\u016bsdien\u0101s tai ir \u013coti popul\u0101ra bibliot\u0113ka, kas noz\u012bm\u0113, ka<br>tur jau ir liela kopiena, t\u0101p\u0113c, ja man rastos k\u0101das probl\u0113mas, es, iesp\u0113jams, atrad\u012b\u0161u risin\u0101jumu kaut kur Stack Overflow vai GitHub. Bez tam, <strong>Stiliz\u0113ti komponenti<\/strong> ir da\u017eas optimiz\u0101cijas funkcijas, kas noz\u012bm\u0113, ka t\u0101s tiek atveidotas tikai tad, kad tas ir nepiecie\u0161ams. Port\u0101ls <a href=\"https:\/\/thecodest.co\/lv\/dictionary\/why-do-projects-fail\/\">projekts<\/a> bija paredz\u0113ts b\u016bv\u0113t, izmantojot <a href=\"https:\/\/thecodest.co\/lv\/blog\/conditional-component-visibility-in-react\/\">React<\/a> un <a href=\"https:\/\/thecodest.co\/lv\/dictionary\/typescript-developer\/\">Ma\u0161\u012bnraksts<\/a>. \u0160\u012b bibliot\u0113ka nodro\u0161ina lielisku atbalstu ab\u0101m tehnolo\u0123ij\u0101m. Izklaus\u0101s lieliski, vai ne?<\/p>\n\n\n\n<p>Tad es s\u0101ku kod\u0113t. P\u0113c m\u0113ne\u0161a, kad lietotne bija izaugusi, frontend <a href=\"https:\/\/thecodest.co\/lv\/blog\/best-practices-for-building-a-strong-and-cohesive-team\/\">komanda<\/a> un es koncentr\u0113j\u0101mies uz funkciju nodro\u0161in\u0101\u0161anu, m\u0113s atkl\u0101j\u0101m, ka p\u0101rsteidzo\u0161\u0101 <strong>Stiliz\u0113ti komponenti <\/strong>bibliot\u0113kai bija savi m\u0113r\u0137i, un es jums past\u0101st\u012b\u0161u, k\u0101p\u0113c.<\/p>\n\n\n\n<p>Pirmk\u0101rt, nosaukuma pie\u0161\u0137ir\u0161anas konvencija. Lai no\u0161\u0137irtu <strong>Stiliz\u0113ti komponenti<\/strong> no <a href=\"https:\/\/thecodest.co\/lv\/blog\/react-development-all-you-have-to-know\/\">React komponenti<\/a>, man bija j\u0101izmanto <code>Stiliz\u0113ts<\/code> pried\u0113klis, kas samazin\u0101j\u0101s <a href=\"https:\/\/thecodest.co\/lv\/dictionary\/what-is-code-refactoring\/\">kods<\/a> las\u0101m\u012bba. Tad (kas var\u0113tu b\u016bt d\u012bvaini), Typescript atbalsts. <strong>Stiliz\u0113ti komponenti<\/strong>, k\u0101 j\u016bs, iesp\u0113jams, zin\u0101t, ir balst\u012bta uz CSS-in-JS pieeju. Tas noz\u012bm\u0113, ka j\u016bs varat t\u0101m nodot jebkuru rekviz\u012btu un main\u012bt stilu, t. i., ievades stilu, pamatojoties uz \u0161o rekviz\u012btu, un es person\u012bgi uzskatu, ka \u0161\u012b funkcija ir lieliska. In Typescript, jums vajadz\u0113tu ar\u012b \u012bstenot \u0161o prop tips padara to kods ilg\u0101k jebkuru <strong>Stiliz\u0113ts komponents<\/strong>. \u201cBet tas aiz\u0146emtu v\u0113l 5 sekundes, k\u0101da ir j\u016bsu probl\u0113ma?\u201d - j\u016bs var\u0113tu teikt. Jums ir taisn\u012bba, lai gan, ja lietojumprogramma \u0101tri m\u0113rogojas un komponentu skaits ir<br>palielinot \u0161o 5 sekun\u017eu skaitu, to var viegli reizin\u0101t simtiem rei\u017eu. V\u0113l viena probl\u0113ma ir izvietojums <strong>Stiliz\u0113ti komponenti<\/strong>.<\/p>\n\n\n\n<p>Da\u017ei <strong><a href=\"https:\/\/thecodest.co\/lv\/blog\/hire-vue-js-developers\/\">JS<\/a> izstr\u0101d\u0101t\u0101ji<\/strong> tos ievieto vien\u0101 fail\u0101 ar komponentu, kuram tie pieder, bet citi tiem izveido atsevi\u0161\u0137us failus. Abas pieejas ir labas daudzu iemeslu d\u0113\u013c. Tas galvenok\u0101rt ir atkar\u012bgs no komponenta sare\u017e\u0123\u012bt\u012bbas. Iev\u0113rojot vienu no \u0161\u012bm metod\u0113m, var saglab\u0101t koh\u0113ziju, bet to apvieno\u0161ana dod tie\u0161i pret\u0113ju rezult\u0101tu. M\u0113s atteic\u0101mies no CSS-in-JS pieejas un p\u0101rg\u0101j\u0101m uz <a href=\"https:\/\/thecodest.co\/blog\/how-we-care-about-quality-of-css-code\/\">SCSS<\/a>. Tas nebija viegli un \u0101tri, bet ar nelielu pal\u012bdz\u012bbu mums tas izdev\u0101s. M\u0113s s\u0101k\u0101m veidot html tagus BEM metodolo\u0123ij\u0101 un, protams, ielik\u0101m stilus atsevi\u0161\u0137os failos, pa vienam katram komponentam. Es teicu, ka JS rekviz\u012btu nodo\u0161ana <strong>Stiliz\u0113ti komponenti<\/strong> ir lieliska funkcija, bet <strong>SCSS<\/strong> tas nav iesp\u0113jams. Es dom\u0101ju, ka m\u0113s visi esam vienispr\u0101tis ar\u012b par to, ka React piepras\u012bt\u0101 nosac\u012bjuma kla\u0161u kod\u0113\u0161anas sintakse ir briesm\u012bga.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/react-classnames.png\" alt=\"react klases nosaukumu kods \" title=\"react klases nosaukumi\"\/><\/figure>\n\n\n\n<p>Ir viens diezgan interesants risin\u0101jums. Ja j\u016bs savienojat BEM metodolo\u0123iju ar <code>clsx<\/code> bibliot\u0113ku, j\u016bs ieg\u016bsiet kaut ko l\u012bdz\u012bgu (liels paldies manam draugam P\u0161emekam Adam\u010dikam par \u0161\u012bs bibliot\u0113kas par\u0101d\u012b\u0161anu).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/will-clsx.png\" alt=\"clsx kods\" title=\"clsx koda piem\u0113rs\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Izskat\u0101s daudz t\u012br\u0101k, vai ne?<\/h2>\n\n\n\n<p>Vislab\u0101kais ir tas, ka nosac\u012bjuma main\u012bgais ir j\u0101ievada tikai komponenta l\u012bmen\u012b un<br>ne stila l\u012bmen\u012b. Tas patie\u0161\u0101m ietaupa laiku. Diem\u017e\u0113l \u0161\u0101dam risin\u0101jumam ir ar\u012b tr\u016bkumi.<br><strong>SCSS<\/strong> ir vienk\u0101r\u0161s un \u0113rts, ta\u010du, lietojot to kop\u0101 ar Next.js, j\u0101b\u016bt uzman\u012bgiem. \u0160is ietvars nav<br>\u013cauj import\u0113t stila failus tie\u0161i komponenta fail\u0101 (tikai CSS modu\u013ci).<\/p>\n\n\n\n<p>Ja v\u0113laties, lai katram komponentam b\u016btu viens fails, jums ir j\u0101izveido <code>index.scss<\/code> kur\u0101 ir visi j\u016bsu <strong>SCSS<\/strong> failus un<br>import\u0113t to <code>_app.tsx<\/code> failu. Vien\u012bg\u0101 probl\u0113ma ir t\u0101, ka jums ir manu\u0101li j\u0101import\u0113 katrs <strong>SCSS<\/strong> izveidoto failu. Tom\u0113r React \u0161\u012b probl\u0113ma nepast\u0101v, un j\u016bs varat import\u0113t <strong>SCSS<\/strong> failus, kur vien v\u0113laties. Nesaprotiet mani nepareizi. <strong>Stiliz\u0113ti komponenti<\/strong> ir patie\u0161\u0101m labi. K\u0101 jau teicu iepriek\u0161, JS main\u012bgo nodo\u0161ana, k\u0101 ar\u012b glob\u0101l\u0101 t\u0113ma ir p\u0101rsteidzo\u0161as funkcijas. Ja veidojat lielu lietojumprogrammu, kur\u0101 optimiz\u0101cija ir \u013coti svar\u012bga, \u0161\u012b bibliot\u0113ka, iesp\u0113jams, apmierin\u0101s j\u016bsu vajadz\u012bbas. Tom\u0113r m\u016bsu gad\u012bjum\u0101 migr\u0101cija uz <strong>SCSS<\/strong> tr\u0101p\u012bja d\u017eekpotu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Rezum\u0113jot<\/h2>\n\n\n\n<p>Nobeigum\u0101 j\u0101secina, ka, lai gan ir pamatoti argumenti par labu gan <strong>SCSS un stiliz\u0113ti komponenti <\/strong> vietn\u0113 <strong><a href=\"https:\/\/thecodest.co\/lv\/blog\/find-your-node-js-expert-for-hire-today\/\">t\u012bmek\u013ca izstr\u0101de<\/a> <\/strong>, gal\u012bgais l\u0113mums ir atkar\u012bgs no da\u017e\u0101diem faktoriem. <strong>SCSS <\/strong> pied\u0101v\u0101 paz\u012bstam\u0101ku sintaksi <strong>pieredz\u0113ju\u0161i izstr\u0101d\u0101t\u0101ji <\/strong> tradicion\u0101laj\u0101 CSS un nodro\u0161ina nevainojamu integr\u0101ciju ar eso\u0161o <strong>kodu b\u0101zes <\/strong> un <strong>komponentu bibliot\u0113kas <\/strong>.<\/p>\n\n\n\n<p>No otras puses, <strong>Stiliz\u0113ti komponenti <\/strong> pied\u0101v\u0101 uzlabotu <strong>izstr\u0101d\u0101t\u0101ja pieredze <\/strong> ar t\u0101s sp\u0113ju iekapsul\u0113t stilus komponentos un vienk\u0101r\u0161ot stiliz\u0113\u0161anas procesu. Tas ar\u012b veicina koda modularit\u0101ti un atkalizmantojam\u012bbu, \u013caujot front-end <a href=\"https:\/\/thecodest.co\/lv\/blog\/team-extension-guide-software-development\/\">in\u017eenieri<\/a> efekt\u012bvi p\u0101rvald\u012bt <strong>komponentu katalogs <\/strong> un izveidot konsekventu lietot\u0101ja interfeisu vis\u0101 <strong><a href=\"https:\/\/thecodest.co\/lv\/blog\/find-your-ideal-stack-for-web-development\/\">t\u012bmek\u013ca vietne<\/a> lietotne <\/strong>. \u0145emot v\u0113r\u0101 noz\u012bmi <strong>lietot\u0101js <a href=\"https:\/\/thecodest.co\/lv\/blog\/app-data-collection-security-risks-value-and-types-explored\/\">dati<\/a> <\/strong> dro\u0161\u012bbu un veiktsp\u0113ju, ir b\u016btiski nov\u0113rt\u0113t abu pieeju ietekmi uz gal\u012bgo paketes lielumu un iel\u0101des laiku. Galu gal\u0101 izv\u0113le starp <strong>SCSS un stiliz\u0113ti komponenti <\/strong> j\u0101balst\u0101s uz projekta \u012bpa\u0161aj\u0101m vajadz\u012bb\u0101m, prasm\u0113m, kas nepiecie\u0161amas, lai <strong><a href=\"https:\/\/thecodest.co\/lv\/blog\/how-to-hire-the-best-outsourced-development-team-for-a-scaleup\/\">izstr\u0101des komanda<\/a> <\/strong>, un visp\u0101r\u0113jiem m\u0113r\u0137iem, kas izvirz\u012bti <strong> t\u012bmek\u013ca lietojumprogramma <\/strong>. Izstr\u0101d\u0101t\u0101jiem ir ieteicams izv\u0113rt\u0113t visus faktorus, atjaunin\u0101t inform\u0101ciju, izmantojot <strong>emu\u0101ra ieraksti <\/strong> un nozares diskusij\u0101m, un pie\u0146emt pamatotu l\u0113mumu, kas atbilst vi\u0146u projekta pras\u012bb\u0101m un uzlabo visp\u0101r\u0113jo kvalit\u0101ti. <strong>front-end <a href=\"https:\/\/thecodest.co\/lv\/blog\/what-to-look-for-in-a-custom-software-development-company\/\">izstr\u0101des process<\/a> <\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"<p>P\u0113d\u0113jo p\u0101ris m\u0113ne\u0161u laik\u0101 es str\u0101d\u0101ju pie viena m\u016bsu klienta projekta. Pa\u0161\u0101 s\u0101kum\u0101 es sask\u0101ros ar bibliot\u0113kas izv\u0113li stila veido\u0161anai.<\/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\/lv\/emuars\/kapec-jums-vajadzetu-izmantot-scss-nevis-stilizeto-komponentu-vieta\/\" \/>\n<meta property=\"og:locale\" content=\"lv_LV\" \/>\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\/lv\/emuars\/kapec-jums-vajadzetu-izmantot-scss-nevis-stilizeto-komponentu-vieta\/\" \/>\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 min\u016btes\" \/>\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\":\"lv-LV\",\"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\":\"lv-LV\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"lv-LV\",\"@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\":\"lv-LV\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"lv-LV\",\"@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\":\"lv-LV\",\"@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\\\/lv\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"K\u0101p\u0113c jums vajadz\u0113tu izmantot SCSS, nevis stiliz\u0113tus komponentus? - 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\/lv\/emuars\/kapec-jums-vajadzetu-izmantot-scss-nevis-stilizeto-komponentu-vieta\/","og_locale":"lv_LV","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\/lv\/emuars\/kapec-jums-vajadzetu-izmantot-scss-nevis-stilizeto-komponentu-vieta\/","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 min\u016btes"},"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":"lv-LV","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":"K\u0101p\u0113c jums vajadz\u0113tu izmantot SCSS, nevis stiliz\u0113tus komponentus? - 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":"lv-LV","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/"]}]},{"@type":"ImageObject","inLanguage":"lv-LV","@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":"lv-LV"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"lv-LV","@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":"lv-LV","@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\/lv\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/posts\/3931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/comments?post=3931"}],"version-history":[{"count":9,"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/posts\/3931\/revisions"}],"predecessor-version":[{"id":8166,"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/posts\/3931\/revisions\/8166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/media\/3932"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/media?parent=3931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/categories?post=3931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/lv\/wp-json\/wp\/v2\/tags?post=3931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}