{"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":"miksi-sinun-pitaisi-kayttaa-scssaa-tyyliteltyjen-komponenttien-sijasta","status":"publish","type":"post","link":"https:\/\/thecodest.co\/fi\/blog\/why-should-you-use-scss-instead-of-styled-components\/","title":{"rendered":"Miksi sinun pit\u00e4isi k\u00e4ytt\u00e4\u00e4 SCSS:\u00e4\u00e4 tyyliteltyjen komponenttien sijaan?"},"content":{"rendered":"

Vertailtuamme suosittuja ratkaisuja, kuten tavallista CSS:\u00e4\u00e4, Emotion, SCSS <\/strong>ja Tyylitellyt komponentit<\/strong>, valitsin lopulta viimeisen. Kaikki n\u00e4ytti olevan kunnossa. Se on nyky\u00e4\u00e4n hyvin suosittu kirjasto, mik\u00e4 tarkoittaa, ett\u00e4 -
on jo suuri yhteis\u00f6, joten jos kohtaisin ongelmia, l\u00f6yd\u00e4n todenn\u00e4k\u00f6isesti ratkaisun jostain Stack Overflow'sta tai GitHubista. Sen lis\u00e4ksi, Tyylitellyt komponentit<\/strong> on joitakin optimointiominaisuuksia, mik\u00e4 tarkoittaa, ett\u00e4 ne render\u00f6iv\u00e4t vain silloin, kun niit\u00e4 tarvitaan. Osoitteessa projekti<\/a> odotettiin rakennettavan k\u00e4ytt\u00e4en React<\/a> ja Kirjoitusk\u00e4sikirjoitus<\/a>. T\u00e4m\u00e4 kirjasto tukee erinomaisesti molempia tekniikoita. Kuulostaa mahtavalta, eik\u00f6?<\/p>\n\n\n\n

Aloitin koodaamisen silloin. Kuukauden kuluttua, kun sovellus on kasvanut, etusivun joukkue<\/a> ja min\u00e4 keskityin ominaisuuksien toimittamiseen, huomasimme, ett\u00e4 h\u00e4mm\u00e4stytt\u00e4v\u00e4sti toimiva Tyylitellyt komponentit <\/strong>kirjastolla oli oma maalinsa, ja kerron teille miksi.<\/p>\n\n\n\n

Ensinn\u00e4kin, nime\u00e4misk\u00e4yt\u00e4nt\u00f6. Erottamaan toisistaan Tyylitellyt komponentit<\/strong> osoitteesta React-komponentit<\/a>, minun oli k\u00e4ytett\u00e4v\u00e4 Tyylitelty<\/code> etuliite, joka v\u00e4heni koodi<\/a> luettavuus. Sitten (mik\u00e4 saattaa olla outoa), Typescript-tuki. Tyylitellyt komponentit<\/strong>perustuvat CSS-in-JS-l\u00e4hestymistapaan, kuten ehk\u00e4 tied\u00e4tkin. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 voit siirt\u00e4\u00e4 niille mink\u00e4 tahansa propin ja muuttaa sy\u00f6tteen tyyli\u00e4 t\u00e4m\u00e4n propin perusteella, ja henkil\u00f6kohtaisesti pid\u00e4n t\u00e4t\u00e4 ominaisuutta mahtavana. Typescriptiss\u00e4 sinun pit\u00e4isi my\u00f6s toteuttaa t\u00e4m\u00e4n propin tyyppi tekee siit\u00e4 koodia pidemm\u00e4n mink\u00e4 tahansa Tyylitelty komponentti<\/strong>. \"Mutta se kest\u00e4isi viel\u00e4 5 sekuntia, joten mik\u00e4 on ongelmasi?\" - saatat sanoa. Olet oikeassa, vaikka kun sovellus skaalautuu nopeasti ja komponenttien m\u00e4\u00e4r\u00e4 on
lis\u00e4\u00e4ntyy, n\u00e4m\u00e4 5 sekuntia voidaan helposti moninkertaistaa satoihin kertoihin. Toinen ongelma on sijoitus Tyylitellyt komponentit<\/strong>.<\/p>\n\n\n\n

Jotkut JS<\/a> kehitt\u00e4j\u00e4t<\/strong> sijoittavat ne samaan tiedostoon sen komponentin kanssa, johon ne kuuluvat, ja toiset luovat niille erilliset tiedostot. Molemmat l\u00e4hestymistavat ovat hyvi\u00e4 monista syist\u00e4. Se riippuu l\u00e4hinn\u00e4 komponentin monimutkaisuudesta. Jompaakumpaa tekniikkaa noudattamalla voidaan s\u00e4ilytt\u00e4\u00e4 koheesio, mutta niiden yhdist\u00e4misell\u00e4 saavutetaan juuri p\u00e4invastainen tulos. Luovuimme CSS-in-JS -l\u00e4hestymistavasta ja siirryimme k\u00e4ytt\u00e4m\u00e4\u00e4n SCSS<\/a>. Se ei ollut helppoa ja nopeaa, mutta pienen avun avulla selvisimme siit\u00e4. Aloitimme html-tunnisteiden muotoilun BEM-menetelm\u00e4ll\u00e4 ja laitoimme tietenkin tyylit erillisiin tiedostoihin, yksi per komponentti. Sanoin, ett\u00e4 JS-tukien v\u00e4litt\u00e4minen Tyylitellyt komponentit<\/strong> on mahtava ominaisuus, mutta SCSS<\/strong> se on mahdotonta. Luulen, ett\u00e4 olemme my\u00f6s kaikki samaa mielt\u00e4 siit\u00e4, ett\u00e4 syntaksi, jolla React haluaa koodata ehdollisia luokkia, on kauhea.<\/p>\n\n\n\n

\"react-luokkien<\/figure>\n\n\n\n

No, on olemassa yksi varsin mielenkiintoinen ratkaisu. Jos yhdist\u00e4t BEM-menetelm\u00e4n ja clsx<\/code> kirjasto, saat jotain t\u00e4llaista (iso huuto yst\u00e4v\u00e4lleni Przemek Adamczykille, joka n\u00e4ytti minulle t\u00e4m\u00e4n kirjaston).<\/p>\n\n\n\n

\"clsx-koodi\"<\/figure>\n\n\n\n

N\u00e4ytt\u00e4\u00e4 paljon siistimm\u00e4lt\u00e4, eik\u00f6 vain?<\/h2>\n\n\n\n

Parasta on se, ett\u00e4 sinun tarvitsee vain kirjoittaa olosuhdemuuttuja komponenttitasolla ja
ei muotoilun tasolla. Se todella s\u00e4\u00e4st\u00e4\u00e4 aikaa. Valitettavasti t\u00e4llaisella ratkaisulla on haittapuolensa.
SCSS<\/strong> on helppo ja yst\u00e4v\u00e4llinen, mutta ole varovainen, kun k\u00e4yt\u00e4t sit\u00e4 Next.js:n kanssa. T\u00e4m\u00e4 kehys ei
sallii tyylitiedostojen tuonnin suoraan komponenttitiedostoon (vain CSS-moduulit).<\/p>\n\n\n\n

Jos haluat yhden tiedoston komponenttia kohti, sinun on luotava seuraavat tiedostot index.scss<\/code> joka sis\u00e4lt\u00e4\u00e4 kaikki SCSS<\/strong> tiedostot ja
tuo se _app.tsx<\/code> tiedosto. Ainoa ongelma on se, ett\u00e4 sinun on tuotava manuaalisesti jokainen SCSS<\/strong> luotu tiedosto. React:ss\u00e4 t\u00e4t\u00e4 ongelmaa ei kuitenkaan ole, ja voit tuoda SCSS<\/strong> tiedostoja minne haluat. \u00c4l\u00e4 ymm\u00e4rr\u00e4 minua v\u00e4\u00e4rin. Tyylitellyt komponentit<\/strong> ovat todella hyvi\u00e4. Kuten sanoin aiemmin, JS-muuttujien siirt\u00e4minen sek\u00e4 globaali teema ovat h\u00e4mm\u00e4stytt\u00e4vi\u00e4 ominaisuuksia. Kun rakennat isoa sovellusta, jossa optimointi on ratkaisevaa, t\u00e4m\u00e4 kirjasto todenn\u00e4k\u00f6isesti t\u00e4ytt\u00e4\u00e4 tarpeesi. Meid\u00e4n tapauksessamme kuitenkin siirtyminen SCSS<\/strong> osui j\u00e4ttipottiin.<\/p>\n\n\n\n

Yhteenveto<\/h2>\n\n\n\n

Lopuksi voidaan todeta, ett\u00e4 vaikka on olemassa p\u00e4tevi\u00e4 perusteluja molemmille. SCSS ja tyylitellyt komponentit <\/strong> osoitteessa web-kehitys<\/a> <\/strong>, lopullinen p\u00e4\u00e4t\u00f6s riippuu useista tekij\u00f6ist\u00e4. SCSS <\/strong> tarjoaa tutumman syntaksin kokeneet kehitt\u00e4j\u00e4t <\/strong> perinteisess\u00e4 CSS:ss\u00e4 ja tarjoaa saumattoman integraation olemassa oleviin koodipohjat <\/strong> ja komponenttikirjastot <\/strong>.<\/p>\n\n\n\n

Toisaalta, Tyylitellyt komponentit <\/strong> tarjota parannettu kehitt\u00e4j\u00e4kokemus <\/strong> sen kyky kapseloida tyylej\u00e4 komponenttien sis\u00e4ll\u00e4 ja yksinkertaistaa muotoiluprosessia. Se edist\u00e4\u00e4 my\u00f6s koodin modulaarisuutta ja uudelleenk\u00e4ytett\u00e4vyytt\u00e4, mik\u00e4 mahdollistaa front-endin insin\u00f6\u00f6rit<\/a> hallinnoida tehokkaasti komponenttien hakemisto <\/strong> ja luoda johdonmukainen k\u00e4ytt\u00f6liittym\u00e4 koko web<\/a> sovellus <\/strong>. Ottaen huomioon k\u00e4ytt\u00e4j\u00e4 tiedot<\/a> <\/strong> turvallisuuden ja suorituskyvyn kannalta on ratkaisevan t\u00e4rke\u00e4\u00e4 arvioida molempien l\u00e4hestymistapojen vaikutusta lopulliseen paketin kokoon ja latausaikoihin. Viime k\u00e4dess\u00e4 valinta seuraavien vaihtoehtojen v\u00e4lill\u00e4 SCSS ja tyylitellyt komponentit <\/strong> tulisi perustua hankkeen erityistarpeisiin, hankkeen toteuttajan osaamiseen ja osaamiseen. kehitystiimi<\/a> <\/strong>ja ohjelman yleiset tavoitteet verkkosovellus <\/strong>. Kehitt\u00e4jien on suositeltavaa arvioida kaikki tekij\u00e4t, pysy\u00e4 ajan tasalla l\u00e4pi blogikirjoitukset <\/strong> ja alan keskusteluista ja tehd\u00e4 tietoon perustuva p\u00e4\u00e4t\u00f6s, joka vastaa heid\u00e4n projektivaatimuksiaan ja parantaa yleist\u00e4 kokonaisuutta. front-end kehitysprosessi<\/a> <\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"

Olen ty\u00f6skennellyt parin viime kuukauden ajan er\u00e4\u00e4n asiakkaamme projektin parissa. Kun olin aivan alussa, jouduin valitsemaan kirjaston muotoilua varten.<\/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":"\nWhy 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\/fi\/blogi\/miksi-sinun-pitaisi-kayttaa-scssaa-tyyliteltyjen-komponenttien-sijasta\/\" \/>\n<meta property=\"og:locale\" content=\"fi_FI\" \/>\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\/fi\/blogi\/miksi-sinun-pitaisi-kayttaa-scssaa-tyyliteltyjen-komponenttien-sijasta\/\" \/>\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 minuuttia\" \/>\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\":\"fi\",\"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\":\"fi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fi\",\"@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\":\"fi\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fi\",\"@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\":\"fi\",\"@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\\\/fi\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Miksi sinun pit\u00e4isi k\u00e4ytt\u00e4\u00e4 SCSS:\u00e4\u00e4 tyyliteltyjen komponenttien sijaan? - 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\/fi\/blogi\/miksi-sinun-pitaisi-kayttaa-scssaa-tyyliteltyjen-komponenttien-sijasta\/","og_locale":"fi_FI","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\/fi\/blogi\/miksi-sinun-pitaisi-kayttaa-scssaa-tyyliteltyjen-komponenttien-sijasta\/","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 minuuttia"},"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":"fi","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":"Miksi sinun pit\u00e4isi k\u00e4ytt\u00e4\u00e4 SCSS:\u00e4\u00e4 tyyliteltyjen komponenttien sijaan? - 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":"fi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/"]}]},{"@type":"ImageObject","inLanguage":"fi","@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":"fi"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"fi","@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":"fi","@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\/fi\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/posts\/3931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/comments?post=3931"}],"version-history":[{"count":9,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/posts\/3931\/revisions"}],"predecessor-version":[{"id":8166,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/posts\/3931\/revisions\/8166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/media\/3932"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/media?parent=3931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/categories?post=3931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/tags?post=3931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}