Fórum Root.cz

Hlavní témata => Vývoj => Téma založeno: MartinKOV 16. 11. 2016, 18:23:03

Název: CSS editace barev ve vedlejším souboru
Přispěvatel: MartinKOV 16. 11. 2016, 18:23:03
Ahoj všem,

Mám soubor CSS ve kterém potřebuji editovat barvy ale protože je jich tam hodně chtěl bych udělat soubor "edit-colors" ze kterého by se barvy načítaly a bylo by to pro mě přehlednější.

Originální soubor
http://pastebin.com/aXDceweT


test.css
Kód: [Vybrat]
/*
--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */
 
html, body {
    color: #%ODKAZ NA SOUBOR A NA BARVU 1%;
    background-color: #%ODKAZ NA SOUBOR A NA BARVU 2%;
}
 
h1 {
    color: #%ODKAZ NA SOUBOR A NA BARVU 3%;
}
 
h2 {
    color: #%ODKAZ NA SOUBOR A NA BARVU 4%;
}

edit-colors
Kód: [Vybrat]
%ODKAZ NA SOUBOR A NA BARVU 1% #8B1F6C
%ODKAZ NA SOUBOR A NA BARVU 2% #5DB42E
%ODKAZ NA SOUBOR A NA BARVU 3% #8EFF9B
%ODKAZ NA SOUBOR A NA BARVU 4% #511501

Děkuji všem za pomoc a za rady.
Název: Re:CSS Editace
Přispěvatel: to_je_jedno 16. 11. 2016, 18:44:46
http://compass-style.org/ , tohle udelas pres variables a mixins. vubec nepremyslej, ze bys pachal cokoliv dalsiho bez toho aby ses naucil pouzivat tohle.

EDIT: a byt tebou tak se mrknu zrovna taky na tohle: "bootstrap compass". Bude to chtit trochu vic veci nastudovat - nodejs, bower, idealne taky grunt/gulp(ale bez tech se nakonec i obejdes, bower bych ale doporucil)
Název: Re:CSS Editace
Přispěvatel: MartinKOV 16. 11. 2016, 20:08:13
Nepotřebuji se učit PHP ani cokoliv co má co společného se CSS.
Potřebuji jen tohle kvůli tomu jsem zde psal.

Když nechceš poradit nemusíš nikdo tě nenutí.

To co si napsal mě nepomůže nijak:
Je to jako kdyby se člověk musel učit nukleoniku kvůli tomu že na základní škole potřebuje udělat prezentaci na jednu A4 jak funguje jaderná elektrárna. (A nikdy víc to už potřebovat nebude)
Název: Re:CSS Editace
Přispěvatel: Ivan Nový 16. 11. 2016, 20:14:08
Nepotřebuji se učit PHP ani cokoliv co má co společného se CSS.
Potřebuji jen tohle kvůli tomu jsem zde psal.

Když nechceš poradit nemusíš nikdo tě nenutí.

To co si napsal mě nepomůže nijak:
Je to jako kdyby se člověk musel učit nukleoniku kvůli tomu že na základní škole potřebuje udělat prezentaci na jednu A4 jak funguje jaderná elektrárna. (A nikdy víc to už potřebovat nebude)

Nelze. Css nemá proměnné. Musíte použít nějaký preprocesor, ale to by bylo asi pro vás příliš složité jako LESS, SASS. Tedy v podstatě to co vám nabízel kolega nade mnou.
Název: Re:CSS Editace
Přispěvatel: MartinKOV 16. 11. 2016, 20:17:13
Ivan Nový: Děkuji já ovládám pouze skriptovaní ve windows + powershell a linux
Takže jsem myslel že by se to dalo vyrešit právě nějakou (proměnnou)

PS:
zatím jsem našel tohle: http://css-color-replace.orca-multimedia.de/
Usnadní mě to práci víc něž to co jsem původně zde psal.

Ale hledám něco podobného jako software na windows nebo linux
Název: Re:CSS Editace
Přispěvatel: Kit 16. 11. 2016, 20:37:48
Ale hledám něco podobného jako software na windows nebo linux

sed
Název: Re:CSS Editace
Přispěvatel: Filip Jirsák 16. 11. 2016, 20:52:23
LESS (http://lesscss.org/), SASS (http://sass-lang.com/) nebo CSS proměnné (http://caniuse.com/#feat=css-variables).
Název: Re:CSS Editace
Přispěvatel: Ivan Nový 16. 11. 2016, 20:53:28
Možná toto, ale nevím jak je složité to instalovat a používat, je to pro Windows http://winless.org/
Název: Re:CSS Editace
Přispěvatel: to_je_jedno 16. 11. 2016, 22:01:31
Nepotřebuji se učit PHP ani cokoliv co má co společného se CSS.
Potřebuji jen tohle kvůli tomu jsem zde psal.

Když nechceš poradit nemusíš nikdo tě nenutí.

To co si napsal mě nepomůže nijak:
Je to jako kdyby se člověk musel učit nukleoniku kvůli tomu že na základní škole potřebuje udělat prezentaci na jednu A4 jak funguje jaderná elektrárna. (A nikdy víc to už potřebovat nebude)

Compass neni zadna jaderna veda, jestli nezvladnes neco takoveho - co mimochodem naprosto presne resi tvuj problem a ja to taky zacal pouzivat prave kvuli variables - tak se na to vybodni a radsi sbirej vicka od jogurtu.

S widlema pravda neporadim, ale v linuxovym (a macovym svete) jsou to 2 prikazy copy - paste
Citace
sudo apt-get install -y ruby ruby-dev
sudo gem install compass

Evidentne jsi poradit nechtel.
Název: Re:CSS editace barev ve vedlejším souboru
Přispěvatel: Halamus 17. 11. 2016, 18:54:33
CSS proměnné jsou hudbou budoucnosti.
Krom zmíněných možností je možné jednomu elementu deklarovat více tříd a jedna ze tříd může deklarovat barvy
.barvy1 {color; background;}
.barvy2 {color;}
.barvy3 {color;}
.barvy4 {color;}


<body class="formatovani barvy1">
    <h1 class="formatovani-h1 barvy2">


Název: Re:CSS editace barev ve vedlejším souboru
Přispěvatel: Ivan Nový 17. 11. 2016, 20:06:12
CSS proměnné jsou hudbou budoucnosti.
Krom zmíněných možností je možné jednomu elementu deklarovat více tříd a jedna ze tříd může deklarovat barvy
.barvy1 {color; background;}
.barvy2 {color;}
.barvy3 {color;}
.barvy4 {color;}


<body class="formatovani barvy1">
    <h1 class="formatovani-h1 barvy2">


+1
Název: Re:CSS editace barev ve vedlejším souboru
Přispěvatel: Filip Jirsák 17. 11. 2016, 20:36:36
CSS proměnné jsou hudbou budoucnosti.
Dával jsem odkaz na web Can I use. Nejsou podporované akorát v Internet Exploreru, Edge, Opeře Mini a ve starém Android Browseru, přičemž Edge je bude podporovat v některé z příštích verzí. Případně je můžete zpracovat CSS pre- nebo postprocessorem.
Název: Re:CSS Editace
Přispěvatel: Ondrej Nemecek 17. 11. 2016, 21:28:01
Ivan Nový: Děkuji já ovládám pouze skriptovaní ve windows + powershell a linux
Takže jsem myslel že by se to dalo vyrešit právě nějakou (proměnnou)

PS:
zatím jsem našel tohle: http://css-color-replace.orca-multimedia.de/
Usnadní mě to práci víc něž to co jsem původně zde psal.

Ale hledám něco podobného jako software na windows nebo linux

Já taky doporučím Less. Použití není složité, v podstatě to jen vygeneruje css soubory z less souborů. A v less souborech mohou být proměnné a další vymoženosti. Podstatné je, že validním less souborem je libovolný css soubor. Takže prostě jen změníte příponu z css na less a pokračujete jako doposud. Nic vás nenutí se něco učit - učíte se až za pochodu podle potřeby.

Less soubory pak přeložíte do css a načtete na webové stránce anebo můžete načíst na stránce i přímo less, pokud současně  načtete i soubor less.js (javascriptovou implementaci Less). Tím "naučíte" prohlížeč less. Takže v tomto případě stačí změnit příponu a přidat less.js do stránky. Viz http://lesscss.org/#client-side-usage Tento režim se hodí pro vývoj, pro finální provoz je lepší provést překlad. 

Jinak online si můžete less syntaxi vyzkoušet zde http://less2css.org/

Co se týče SASS http://sass-lang.com/ je to dost podobné. Compass je pak nadstavba, čímž se to komplikuje. Doporučuju začít tím nejjednodušším.

Neboť souhlasím, že seznámit se se vším naráz (node, grunt, compass, sass atd.) bude pro začátečníka dost složité na zorientování. Pokud nemáte kontext, do kterého ty vědomosti začleníte, můžete být chvíli zmaten, co je vlastně co...
Název: Re:CSS editace barev ve vedlejším souboru
Přispěvatel: to_je_jedno 17. 11. 2016, 22:13:11
V cem je samotny Compass slozitejsi nez prezitek jako je Less?