CSS Motore JavaScript per estendere quello CSS.

Stato
Discussione chiusa ad ulteriori risposte.

Vasilij

Utente Palladium
8 Novembre 2012
2,088
277
607
1,580
Ultima modifica:
Ho trovato quello che mi serviva, chiudo.
 

Allegati

  • Wizard.png
    Wizard.png
    10.5 KB · Visualizzazioni: 30
A sto punto se uno utilizza già Sass o Less risolve gran parte dei problemi che risolve il tuo motore. O sbaglio?
Vorrei capire le potenzialità di questo engine
 
  • Mi piace
Reazioni: Vasilij
A sto punto se uno utilizza già Sass o Less risolve gran parte dei problemi che risolve il tuo motore. O sbaglio?

SASS e LESS sono due cose diverse, loro non estendono nessuna funzionalità del CSS, lo compilano, (dovrai compilare i file less e sass sul tuo computer prima di mettere il tutto online). Quindi sass e less risparmiano tempo

Possono farti creare variabili ad esempio in questo modo:
Codice:
@variabile = #202020;

body {
    Background-color: @variabile;
}

Questo però va compilato da uno dei 2 preprocessori che hai citato, e prima di caricare il documento css su internet quindi, va compilato, ed esce fuori questo:

Codice:
body {
    Background-color: #202020;
}

Qui è diverso, non viene compilato niente, tu carichi i file nel web già con quella sintassi, e oltre a questo. Puoi creare dei controlli condizionali ad esempio dichiarare regole in base alla versione e al nome del browser. Ciò non è possibile ne con SASS ne con LESS ne con nessun perprocessore, perché loro non comunicano in alcun modo con il browser. Semplicemente analizzano e compilano del testo (CSS).

Ad esempio questa è una funzionalità di questo engine:
Codice:
.layout-normale
{
    display: flex;
    margin: 20px 15px 2px 10px;
} @supports {
    display: flex;
}

Qui non viene compilato niente, semplicemente le proprietà dentro .layout-normale saranno applicate solo se il browser supporta la proprietà "display" con valore "flex", questo non è possibile farlo con SASS o LESS, nemmeno se il loro team lo decidesse, perché appunto loro compilano semplicemente il codice CSS per far risparmiare tempo a te.
Spero di essermi spiegato.
 
  • Mi piace
Reazioni: </Singh>™
SASS e LESS sono due cose diverse, loro non estendono nessuna funzionalità del CSS, lo compilano, (dovrai compilare i file less e sass sul tuo computer prima di mettere il tutto online). Quindi sass e less risparmiano tempo

Possono farti creare variabili ad esempio in questo modo:
Codice:
@variabile = #202020;

body {
    Background-color: @variabile;
}

Questo però va compilato da uno dei 2 preprocessori che hai citato, e prima di caricare il documento css su internet quindi, va compilato, ed esce fuori questo:

Codice:
body {
    Background-color: #202020;
}

Qui è diverso, non viene compilato niente, tu carichi i file nel web già con quella sintassi, e oltre a questo. Puoi creare dei controlli condizionali ad esempio dichiarare regole in base alla versione e al nome del browser. Ciò non è possibile ne con SASS ne con LESS ne con nessun perprocessore, perché loro non comunicano in alcun modo con il browser. Semplicemente analizzano e compilano del testo (CSS).

Ad esempio questa è una funzionalità di questo engine:
Codice:
.layout-normale
{
    display: flex;
    margin: 20px 15px 2px 10px;
} @supports {
    display: flex;
}

Qui non viene compilato niente, semplicemente le proprietà dentro .layout-normale saranno applicate solo se il browser supporta la proprietà "display" con valore "flex", questo non è possibile farlo con SASS o LESS, nemmeno se il loro team lo decidesse, perché appunto loro compilano semplicemente il codice CSS per far risparmiare tempo a te.
Spero di essermi spiegato.
Si, allora può essere utile, se realizzato bene
 
  • Mi piace
Reazioni: Vasilij
SASS e LESS sono due cose diverse, loro non estendono nessuna funzionalità del CSS, lo compilano, (dovrai compilare i file less e sass sul tuo computer prima di mettere il tutto online)
Che io sappia LESS può anche essere utilizzato client-side senza precompilazione (penso con alcune limitazioni, non ho molta conoscenza di LESS), come descritto qui: http://lesscss.org/#client-side-usage

Però il progetto potrebbe diventare interessante aggiungendo funzionalità specifiche non presenti in SASS o LESS.
 
  • Mi piace
Reazioni: Vasilij
Ultima modifica:
Che io sappia LESS può anche essere utilizzato client-side senza precompilazione (penso con alcune limitazioni, non ho molta conoscenza di LESS), come descritto qui: http://lesscss.org/#client-side-usage

Però il progetto potrebbe diventare interessante aggiungendo funzionalità specifiche non presenti in SASS o LESS.
Si è possibile compilare prima dell'output ma il punto era che LESS e SASS o qualunque preprocessore non estende il CSS, qui possiamo comunicare con il browser quindi sapere la sua versione e il suo nome ad esempio, le sue proprietà e quindi c'è un campo libero per creare nuove funzionalità che sono eseguite al caricamento della pagina.
Ci tengo a sottolineare che sono due cose completamente diverse, vedi la funzionalità browser o supports ad esempio.
 
  • Mi piace
Reazioni: abc33
Da utilizzatore di diversi framework e preprocessori posso dire che è davvero un bel progetto, giusto perché va a semplificare alcuni controlli che dovrebbero essere fatti tramite javascript (Una leggera rottura di scatole). Spero possa estendersi bene e aggiungere altre funzionalità.
Comunque sul fatto di SASS e LESS che devono essere compilati sul proprio PC non è del tutto corretto, si può anche ricorrere a script esterni (Tipo SASSPHP) che permettono la compilazione direttamente client-side (Era giusto una precisazione).
 
  • Mi piace
Reazioni: Vasilij
Ultima modifica:
Da utilizzatore di diversi framework e preprocessori posso dire che è davvero un bel progetto, giusto perché va a semplificare alcuni controlli che dovrebbero essere fatti tramite javascript (Una leggera rottura di scatole). Spero possa estendersi bene e aggiungere altre funzionalità.
Comunque sul fatto di SASS e LESS che devono essere compilati sul proprio PC non è del tutto corretto, si può anche ricorrere a script esterni (Tipo SASSPHP) che permettono la compilazione direttamente client-side (Era giusto una precisazione).

Grazie, il mio obbiettivo era proprio quello che hai centrato, sentivo la mancanza di alcune feature CSS, che mi costringevano a ricorrere a del codice JavaScript "mescolando logica e presentazione", il mio obbiettivo è proprio quello :), evitare quelle rotture di scatole, allo stesso tempo aggiungere anche qualche feature interessante.

Per i preprocessori hai fatto benissimo a correggermi grazie :).
 
  • Mi piace
Reazioni: RayperZ
Se proprio vuoi un consiglio: il lavoro è decente? Mettilo su GitHub, qui non lo troverà e non lo utilizzerà nessuno. Su GitHub potrai tranquillamente trovare persone disposte a collaborare e a farti PR per ampliare le funzionalità del tuo progetto, comunque l'idea sembra buona, ma secondo me non è molto utile.
 
  • Mi piace
Reazioni: Vasilij
Se proprio vuoi un consiglio: il lavoro è decente? Mettilo su GitHub, qui non lo troverà e non lo utilizzerà nessuno. Su GitHub potrai tranquillamente trovare persone disposte a collaborare e a farti PR per ampliare le funzionalità del tuo progetto, comunque l'idea sembra buona, ma secondo me non è molto utile.

Ho specificato che viene utilizzato il design pattern modulare, la repository su GitHub sarà privata fino a quando non ci sarà una versione stabile.
 
  • Mi piace
Reazioni: SyncroIT
Stato
Discussione chiusa ad ulteriori risposte.