{"id":297,"date":"2023-10-09T22:44:19","date_gmt":"2023-10-09T20:44:19","guid":{"rendered":"https:\/\/gdm.sosthe.sk\/?page_id=297"},"modified":"2023-10-09T22:44:41","modified_gmt":"2023-10-09T20:44:41","slug":"procesory-css","status":"publish","type":"page","link":"https:\/\/gdm.sosthe.sk\/?page_id=297","title":{"rendered":"Procesory CSS"},"content":{"rendered":"<h2><span style=\"font-size: 16px;\">Preprocesory<\/span><\/h2>\n<div id=\"node-887\" class=\"node\">\n<div class=\"content clear-block clear-both \">\n<p>Preprocesor CSS je n\u00e1stroj, ktor\u00fd zo zdrojov\u00e9ho k\u00f3du zap\u00edsan\u00e9ho pomocou vlastnej syntaxe vygeneruje v\u00fdsledn\u00fd\u00a0<q>klasick\u00fd<\/q>\u00a0\u00a0kask\u00e1dov\u00fd \u0161t\u00fdl (CSS).\u00a0Oproti klasick\u00e9mu CSS pon\u00faka funkcie, premenn\u00e9 a preddefinovan\u00e9 sady tzv.\u00a0<q>mix\u00edny<\/q>\u00a0.<\/p>\n<p>Nev\u00fdhodou je\u00a0<strong>nutnos\u0165 kompil\u00e1cie<\/strong>\u00a0do v\u00fdsledn\u00e9ho CSS.<\/p>\n<p>CSS preprocesor:<\/p>\n<ul>\n<li>umo\u017e\u0148uje pou\u017e\u00edva\u0165 &#8222;klasick\u00e9&#8220; CSS<\/li>\n<li>do v\u00fdsledn\u00e9ho &#8222;skompilovan\u00e9ho&#8220; CSS neprid\u00e1va \u017eiadne nov\u00e9 funkcie<\/li>\n<li>zjednodu\u0161uje a spreh\u013ead\u0148uje z\u00e1pis kask\u00e1dov\u00fdch \u0161t\u00fdlov<\/li>\n<li>je mo\u017en\u00e9 pou\u017e\u00edva\u0165\u00a0<strong>premenn\u00e9<\/strong>\u00a0, ktor\u00e9 umo\u017e\u0148uj\u00fa meni\u0165 \u00fadaje na viacer\u00fdch miestach naraz\n<ul>\n<li>\u200bvnoren\u00e9\u00a0<strong>lok\u00e1lne<\/strong>\u00a0premenn\u00e9 maj\u00fa prednos\u0165 pred\u00a0\u00a0<strong>glob\u00e1lnymi<\/strong><\/li>\n<\/ul>\n<\/li>\n<li>u\u013eah\u010duje spr\u00e1vu viacer\u00fdch CSS s\u00faborov<\/li>\n<li>podporuje\u00a0\u00a0<strong>vnoren\u00e9 defin\u00edcie<\/strong><\/li>\n<li><strong>matematick\u00e9 oper\u00e1cie<\/strong>\u00a0u\u013eah\u010duj\u00fa v\u00fdpo\u010dty rozmerov a farieb<\/li>\n<li>umo\u017e\u0148uje definova\u0165 opakovane vyu\u017eite\u013en\u00e9 tzv.\u00a0<strong>mixins funkcie<\/strong><\/li>\n<li>pon\u00faka\u00a0<strong>podmienen\u00e9 funkcie<\/strong><\/li>\n<li>definovan\u00e9\u00a0<strong>sady funkci\u00ed<\/strong>\u00a0je mo\u017en\u00e9 pomenova\u0165 a vyu\u017ei\u0165 tak tzv. menn\u00e9 priestory<\/li>\n<li>umo\u017e\u0148uje vyu\u017e\u00edva\u0165 ako zobrazovan\u00e9, tak aj\u00a0<strong>skryt\u00e9 koment\u00e1re<\/strong><\/li>\n<li>umo\u017e\u0148uje &#8222;skry\u0165&#8220; v\u00fdvojov\u00e9 postupy pred z\u00e1kazn\u00edkom<\/li>\n<\/ul>\n<p>Najzn\u00e1mej\u0161ie preprocesory CSS:<\/p>\n<ul>\n<li><a class=\"ext\" href=\"http:\/\/www.lesscss.cz\/\" target=\"_blank\" rel=\"nofollow noopener\">LESS<\/a>\u00a0(Leaner CSS \u2013 \u0161t\u00edhlej\u0161\u00ed CSS)<\/li>\n<li><a class=\"ext\" href=\"http:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"nofollow noopener\">SASS<\/a>\n<ul>\n<li>youtube.com\/watch?v=Q4UCtuvMDTI (slovensky)<\/li>\n<li>peteschuster.com\/2012\/05\/replacing-respond-js-with-sass\/<\/li>\n<\/ul>\n<\/li>\n<li><a class=\"ext\" href=\"http:\/\/learnboost.github.io\/stylus\/\" target=\"_blank\" rel=\"nofollow noopener\">Stylus<\/a><\/li>\n<\/ul>\n<table>\n<tbody>\n<tr>\n<td><\/td>\n<th>SASS\/SCSS<\/th>\n<th>Stylus<\/th>\n<th>LESS<\/th>\n<\/tr>\n<tr>\n<th>Spracovanie<\/th>\n<td>server<\/td>\n<td>server<\/td>\n<td>server aj klient<\/td>\n<\/tr>\n<tr>\n<th>Jazyk<\/th>\n<td>Ruby<\/td>\n<td>Ruby<\/td>\n<td>JavaScript<\/td>\n<\/tr>\n<tr>\n<th>Syntax<\/th>\n<td>bez\u00a0<strong>{}<\/strong>\u00a0a\u00a0\u00a0<strong>;<\/strong><br \/>\naj<br \/>\nklasick\u00e9 CSS<br \/>\n(vy\u017eaduje najviac p\u00edsania)<\/td>\n<td>bez\u00a0<strong>{\u00a0<\/strong><strong>}<\/strong>\u00a0,:\u00a0<strong>a<\/strong>\u00a0;\u00a0\u00a0aj\u00a0klasick\u00e9 CSS\u00a0(vy\u017eaduje najmenej p\u00edsanie)<\/td>\n<td>klasick\u00e9 CSS<\/td>\n<\/tr>\n<tr>\n<th>Hl\u00e1senie ch\u00fdb<\/th>\n<td>najpresnej\u0161ie<\/td>\n<td>ob\u010das chybn\u00e9 ur\u010denie riadku<\/td>\n<td>najhor\u0161ie<\/td>\n<\/tr>\n<tr>\n<th>Mo\u017enosti<\/th>\n<td>zrejme najv\u00e4\u010d\u0161\u00ed<\/td>\n<td>ve\u013ek\u00e9<\/td>\n<td>drobn\u00e9 obmedzenia<\/td>\n<\/tr>\n<tr>\n<th>Mixins<\/th>\n<td><a class=\"ext\" href=\"http:\/\/compass-style.org\/reference\/compass\/css3\/\" target=\"_blank\" rel=\"nofollow noopener\">Compass CSS3 mixins<\/a><\/td>\n<td><a class=\"ext\" href=\"http:\/\/visionmedia.github.io\/nib\/\" target=\"_blank\" rel=\"nofollow noopener\">NIB<\/a><\/td>\n<td><a class=\"ext\" href=\"http:\/\/lesselements.com\/\" target=\"_blank\" rel=\"nofollow noopener\">LESS Elements<\/a><br \/>\n<a class=\"ext\" href=\"http:\/\/getbootstrap.com\/css\/#grid-less\" target=\"_blank\" rel=\"nofollow noopener\">Bootstrap LESS mixins<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Postprocesory<\/h2>\n<p>Modul\u00e1rne n\u00e1stroje vykon\u00e1vaj\u00face n\u00e1sledn\u00fa transform\u00e1ciu CSS.<\/p>\n<ul>\n<li><a class=\"ext\" href=\"http:\/\/leaverou.github.io\/prefixfree\/\" target=\"_blank\" rel=\"nofollow noopener\">Prefix free<\/a>\u00a0&#8211; vy\u017eaduje v prehliada\u010di\u00a0<strong>povolen\u00fd JavaScript<\/strong>\u00a0(6 kB)\n<ul>\n<li>Desktop: IE9+, Opera 10+, Firefox 3.5+, Safari 4+ a Chrome<\/li>\n<li>Mobile: Mobile Safari, Android browser, Chrome a Opera Mobile<\/li>\n<\/ul>\n<\/li>\n<li><a class=\"ext\" href=\"https:\/\/github.com\/postcss\/postcss\" target=\"_blank\" rel=\"nofollow noopener\">PostCSS<\/a>\u00a0\u2013 vy\u017eaduje v prehliada\u010di\u00a0<strong>povolen\u00fd JavaScript<\/strong>\n<ul>\n<li><a class=\"ext\" href=\"https:\/\/github.com\/postcss\/autoprefixer\" target=\"_blank\" rel=\"nofollow noopener\">Autoprefixer<\/a>\u00a0(1 MB) \u2013 anal\u00fdza CSS a n\u00e1sledn\u00e9 doplnenie iba t\u00fdch prefixov\u00fdch pravidiel, ktor\u00e9 s\u00fa potrebn\u00e9 pre spr\u00e1vnu funk\u010dnos\u0165 konkr\u00e9tneho prehliada\u010da.\u00a0CSS je teda mo\u017en\u00e9 p\u00edsa\u0165 pod\u013ea aktu\u00e1lnych W3C \u0161tandardov.<\/li>\n<li>RTLCSS a\u00a0\u00a0<a class=\"ext\" href=\"https:\/\/github.com\/postcss\/postcss#plugins\" target=\"_blank\" rel=\"nofollow noopener\">\u010fal\u0161ie roz\u0161\u00edrenie<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Preprocesory Preprocesor CSS je n\u00e1stroj, ktor\u00fd zo zdrojov\u00e9ho k\u00f3du zap\u00edsan\u00e9ho pomocou vlastnej syntaxe vygeneruje v\u00fdsledn\u00fd\u00a0klasick\u00fd\u00a0\u00a0kask\u00e1dov\u00fd \u0161t\u00fdl (CSS).\u00a0Oproti klasick\u00e9mu CSS pon\u00faka funkcie, premenn\u00e9 a preddefinovan\u00e9 sady tzv.\u00a0mix\u00edny\u00a0. Nev\u00fdhodou je\u00a0nutnos\u0165 kompil\u00e1cie\u00a0do v\u00fdsledn\u00e9ho CSS. CSS preprocesor: umo\u017e\u0148uje pou\u017e\u00edva\u0165 &#8222;klasick\u00e9&#8220; CSS do v\u00fdsledn\u00e9ho &#8222;skompilovan\u00e9ho&#8220; CSS neprid\u00e1va \u017eiadne nov\u00e9 funkcie zjednodu\u0161uje a spreh\u013ead\u0148uje z\u00e1pis kask\u00e1dov\u00fdch \u0161t\u00fdlov je mo\u017en\u00e9 pou\u017e\u00edva\u0165\u00a0premenn\u00e9\u00a0, ktor\u00e9 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-297","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=297"}],"version-history":[{"count":3,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/297\/revisions"}],"predecessor-version":[{"id":300,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/297\/revisions\/300"}],"wp:attachment":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}