Co mají společného Javascript a CSS? Každý, kdo s nimi delší dobu pracuje, dokáže vyjmenovat, jak by se oba jazyky daly vylepšit. Někteří vzali vylepšování do svých rukou, a tak vznikl CoffeeScript a Sass.
CoffeeScript
CoffeeScript je jazyk inspirovaný Ruby a Pythonem, odstraňuje nedostatky JS a přidává některé užitečné nové funkce. Namátkou
Comprehensions
countdown = (num for num in [10..1])
Nové operátory is, isnt, not, and, or, existenční operátor ?
if band?
volume = 10 if band isnt SpinalTap
Pohodlnější práci s třídami a objekty, bezpečnější deklaraci proměnných (globální proměnné už nelze deklarovat omylem, zapomenutím var, ale pouze explicitně) atd.
CoffeeScript se překládá přímo do JS.
Sass
Sass je nadmnožina CSS, která z čistě deklarativního CSS dělá procedurální jazyk s proměnnými a funkcemi. Umožňuje třeba definovat základní hodnoty do proměnných a provádět s nimi psí kusy pomocí specializovaných funkcí
$margin: 16px;
$blue: #3bbfce;
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: darken($blue, 9%);
}
Vytvořit základní, opakující se deklarace a měnit je
@mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
@include left(10px);
}
Nebo dědit vlastnosti od dřív definovaných selektorů
.error {
border: 1px #f00;
background: #fdd;
}
.badError {
@extend .error;
border-width: 3px;
}
Sass se překládá do CSS.
Nepřehání ale zprávy o smrti JS a CSS?
Rails, jeden z významných frameworků pro tvorbu webových aplikací, se rozhodl ve verzi 3.1 přejít právě na CoffeeScript a Sass. Tím jsou obě nadstavby definitivně legitimní součástí vývojářských nástrojů.
Nahrazení JS a CSS začíná.
Co je špatného na
if(band && band != ‘SpinalTap’)
volume = 10;
???
Lidi používají
if(variable)pro testování existence proměnné, ale to funguje chybně v případě, kdy proměnná existuje a má hodnotu false, prázdný řetězec nebo 0.
variable?v CoffeeScriptu se přeloží na
if(typeof variable != "undefined" && variable !== null)Takže se správným testem existence můžeš napsat
if(typeof band != "undefined" && band !== null && band !== 'SpinalTap') {volume = 10;
}
v JS, nebo
volume = 10 if band? and band isnt 'SpinalTap'v CS.
CS je expresivnější (méně psaní na stejnou funkčnost) a líp se čte.
OK, tak pojďme hardcore ;)
volume = (window.band === ‘SpinalTap’)?volume:10;
Alakazaam-information found, problem sovled, thanks!