Autor Zpráva
Milan Sobotka
Profil
Dobrý den.
Potřeboval bych poradit s @import CSS.
Vím že se to tu už řešilo i jsem se koukal na https://developer.mozilla.org/en-US/docs/Web/CSS/@import ale moc mi to nejde. Nikdy jsem o tom nic neslysel. Jde mi o to, ze mám soubor style1.css a v nem jsou vsechny styly stranky ale jelikoz chci mit ten web jednoduse ovladatelny, tak chi mit vsechny vedouci barvy v textaku. Kazda barva tedy bude jen v textaku sama a bude to dobre menitelny takze kdyz ji zmenim v tom jednom souboru, tak to bude v style1.css vsude menit. neco jako php include. Akorat jsem nepochopil kterou z techto moznosti zvolit...

1 @import url("fineprint.css") print;
2 @import url("bluish.css") projection, tv;
3 @import 'custom.css';
4 @import url("chrome://communicator/skin/");
5 @import "common.css" screen, projection;
6 @import url('landscape.css') screen and (orientation:landscape);
Kubo2
Profil
Milan Sobotka:
Akorat jsem nepochopil kterou z techto moznosti zvolit...

Úplne stačí @import 'adresa-css-suboru'; či @import url(adresa-css-suboru); (to druhé je normálny zápis URL adresy v CSS ako ho poznáš napríklad pri zapisovaní background-image).
Tie ostatné nejakým spôsobom ovplyvňujú prostredie, v ktorom sa daný štýl bude aplikovať (napríklad pri použití print sa budú štýly aplikovať len na tlačený dokument, tj. na papieri).
Milan Sobotka
Profil
No presne tak to mam:
body {
font-family:arial;
font-size:100px;
@import '/styles/style2.css';
}
to je ten /styles/style1.css

a tady je /styles/style2.css:
color:red;

no ale cerveny pismo to neudela...


no a tady je home.php :
<!DOCTYPE>
<HTML>
    <HEAD>
       <META name="autor" content="">
       <META  http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link type="text/css" rel="stylesheet" href="/styles/style1.css">
       <TITLE></TITLE>
        <style>
            
            
            
        
        </style>
   </HEAD>
   <BODY>
 

   </BODY>
</HTML>
juriad
Profil
To proto, že @import nepatří dovnitř pravidla, ale ven.

Tedy:
@import '/styles/style2.css';

body {
  font-family:arial;
  font-size:100px;
}

a v style2.css budeš mít:
body {
  color: #aabbcc;
}

A navíc:
The @import CSS at-rule allows to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, it cannot be used inside conditional group at-rules.
To musí být na začátku, před vším ostatním v CSS souboru.

Takže to neslouží k tomu, co od toho očekaváš.
Milan Sobotka
Profil
No takže když budu mit mnoho pozadi a barev tak to vlastne musim myt v mnoho stylech protze se mi tohle vztahuje na celej soubor css. a neexistuje neco jinyho ze by to bylo jak jsem psal dovnitr pravidla?


Proste neco jako include treba jen na barvu v css?
Plaváček
Profil
Milan Sobotka:

Nejspíš hledáš něco jako CSS preprocesor, ne? Viz http://www.zdrojak.cz/clanky/css-preprocesory-mene-psani-vyssi-efektivita/
juriad
Profil
V CSS zatím ne, je návrh na CSS proměnné, ale to ještě nikde nefunguje.
Ale existují CSS preprocesory, které to umožňují. Nepíšeš vlastně CSS, ale něco jako CSS, které se do CSS zkompiluje.
Jedním z nich je například less.
Milan Sobotka
Profil
Ehm. moc nechapu.
Plaváček
Profil
Milan Sobotka:

Ehm. moc nechapu.

No, ona je to už "vyšší dívčí". Nejdřív musíš znát důkladně CSS samotné.
Milan Sobotka
Profil
No tak jako css znam krome transitions atak. s timhle jsem se proste jeste nepotkal.
juriad
Profil
Vytvoříš si soubor (třeba pro ten less): styly.less
do něj napíšeš:
@pekna-modra: #5B83AD;
@skoro-bila: #010203;

body {
  font-family:arial;
  font-size:100px; 
  color: @pekna-modra;
}

.lista {
  background-color: @pekna-modra;
  color: @skoro-bila;
}

Pak v příkazové řádce spustíš příkaz less, který ti vytvoří soubor styly.css, jehož obsahem bude:
body {
  font-family:arial;
  font-size:100px; 
  color: #5B83AD;
}

.lista {
  background-color: #5B83AD;
  color: #010203;
}
A tento soubor pošleš na web. Vždy když chceš udělat změnu, upravíš styly.less, spustíš less v příkazové řádce a uploadneš vygenerovaný css soubor na web.

Výhoda je zřejmá - kompaktnější zápis, nevýhodou je ale naopak nemožnost přímé úpravy css, musíš upravit zdroják (třeba ten less) a pak zkompilovat. Úprava v css souboru by se totiž příště přepsala.

Těch preprocesorů existují mraky, každý umí něco trochu jiného a každý má trochu jiný zápis. Najdi si nějaká porovnání a vyber si takový, který tě osloví.
Milan Sobotka
Profil
Jdu to zkusit.
juriad
Profil
Milan Sobotka:
Využití preprocesorů vyžaduje, abys vyvíjel u sebe a všechny soubory na web kopíroval přes FTP. A ideálně, abys to měl nějak zautomatizované. V praxi je opravdu nevhodné vyvíjet na ostrém serveru - když něco pokazíš, může trvat minuty či hodiny než to spravíš a během té doby můžeš propásnout pár zákazníků a přijdeš o tisíce. Pokud někdo tvorbu webu myslí vážné, vytváří web u sebe na počítači a až je přesvědčený, že funguje, nakopíruje jej na server.
Milan Sobotka
Profil
Akorat jak to zadat do toho prikazoveho radku? s nim jsem nikdy nedelsal. kdyz dam prochazet a najdu styly.less tak mi je to odevre..
juriad
Profil
Nainstaluj si třeba http://winless.org/ v něm zadáš, které soubory má zpracovat a jakmile se změní, rovnou z nich vygeneruje css.
To ohledně příkazové řádky (zapomeň na ní) se týká situace, kdy bys chtěl less používat v rámci Node.js, nebo si vývoj nějak naskriptovat. Tobě stačí nejzákladnější způsob použití.
Milan Sobotka
Profil
Jj. Jdu instalovat. :D


Akorat proc mi to pri vlozeni souboru rika ze nazev styly.less neni spravny...


a vzdy kdyz tam nahraju teda celou slozku tak ten program prestane fungovat...


No tak ted uz se to povedlo a vyhodilo to toto : body{font-family:arial;font-size:100px;color:#5b83ad} a co s tim???????
juriad
Profil
To je tvé výsledné CSS. To přilinkuješ ke své stránce a nahraješ na web. Less se zároveň snaží šetřit místem proto zbytečné mezery, tabulátory a odřádkování vynechává. Ale ty bys nikdy neměl mít potrebu se přímo hrabat v tom CSS souboru.
Milan Sobotka
Profil
hm. tak dekuji za pomoc. :D a jenom neexistuje jeste nejaka jina moznost? tohle je dobry ale kdyby se to dalo delat rovnou v kodu, bylo by to lepsi.
juriad
Profil
Současný návrh proměnný je zhruba v tomto stavu: http://www.zdrojak.cz/clanky/nebylo-aneb-promenne-css-prichazeji/. Takže za takových pět, deset let to bude použitelné v potom aktuálních prohlížečích.
Milan Sobotka
Profil
Skoda ze jeste neexistujou... :(
Radek9
Profil
Milan Sobotka:
Jestli to nechceš kompilovat přes command-linu, sežeň si vhodný editor. Např. Brackets s pluginem Fi Compiler umí automaticky po uložení kompilovat LESS soubory do CSS souboru.
Milan Sobotka
Profil
JJ. Zkusim. Vsem vam moc dekuju za rady.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: