CSS editace barev ve vedlejším souboru

MartinKOV

CSS editace barev ve vedlejším souboru
« kdy: 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.
« Poslední změna: 16. 11. 2016, 22:45:23 od Petr Krčmář »


Re:CSS Editace
« Odpověď #1 kdy: 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)
Děkuji za možnost editace příspěvku.

MartinKOV

Re:CSS Editace
« Odpověď #2 kdy: 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)

Ivan Nový

Re:CSS Editace
« Odpověď #3 kdy: 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.

MartinKOV

Re:CSS Editace
« Odpověď #4 kdy: 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


Kit

Re:CSS Editace
« Odpověď #5 kdy: 16. 11. 2016, 20:37:48 »
Ale hledám něco podobného jako software na windows nebo linux

sed

Re:CSS Editace
« Odpověď #6 kdy: 16. 11. 2016, 20:52:23 »

Ivan Nový

Re:CSS Editace
« Odpověď #7 kdy: 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/

Re:CSS Editace
« Odpověď #8 kdy: 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.
Děkuji za možnost editace příspěvku.

Halamus

Re:CSS editace barev ve vedlejším souboru
« Odpověď #9 kdy: 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">



Ivan Nový

Re:CSS editace barev ve vedlejším souboru
« Odpověď #10 kdy: 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

Re:CSS editace barev ve vedlejším souboru
« Odpověď #11 kdy: 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.

Re:CSS Editace
« Odpověď #12 kdy: 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...

Re:CSS editace barev ve vedlejším souboru
« Odpověď #13 kdy: 17. 11. 2016, 22:13:11 »
V cem je samotny Compass slozitejsi nez prezitek jako je Less?
Děkuji za možnost editace příspěvku.