css LESS uso di funzioni

**danirota** · 13-05-2013, 14:20

ciao, sto provando ad usarele funzioni nei fogli di stile, ma non capisco perchè non funziona. La sintassi sembra corretta

vi scrivo il codice così capite megio

codice:

@color: #000;

.header{
	background-color:@color;
	.aa;
	width:100%;
	height:55px;
	border:1px solid;
}

.aa(){
	background-color:#F96;
}

il background di #header non diventa nero, e non entra nemmeno nella funzione aa().
Sapete darmi qualche dritta su come si usa questo tipo di "linguaggio"

ho guardanto anche sul sito lesscss.org e usato il file js
<script src="js/less.js" type="text/javascript"></script>

ma non funziona comunque...

ps: quello che ho scritto nella funziona aa è una prova, ovvio che non voglio usare 2 background color ;-)

**danirota** · 14-05-2013, 10:07

Nessuno che sa darmi una mano?

**ldetomi** · 14-05-2013, 10:30

Ciao,
Io ho appena iniziato a usare LESS, proprio da qualche giorno, quindi ancora non so cosa dirti, non ho esperienza.

Però sul sito less2css.org trovi un compilatore in tempo reale in cui tu scrivi il codice LESS e lui ti mostra il CSS generato... puoi fare delle prove molto semplici lì, per poi aggiungere codice man mano e vedere se il risultato è sempre quello atteso...in pratica usalo come strumento di debug...

**ldetomi** · 16-05-2013, 08:46

Come ti avevo pre-annunciato... compilando il tuo codice sul sito less2css.org si ottiene il seguente CSS:

codice:

  .header
  {
     background-color: #000000;
     background-color: #F96; 
     width: 100%; 
     height: 55px; 
     border: 1px solid;
  }

Quindi, a parte il fatto che hai 2 dichiarazioni del background in conflitto (quindi il colore finale sarà #F96), ciò che hai scritto è giusto.... i casi sono 2: o LESS non sta funzionando (controlla il JS) oppure hai qualche altro stile applicato per esempio a un ID invece che a una classe, che "vince" su queste dichiarazioni!

**ratte** · 16-05-2013, 09:27

Ciao Dani, ricorda che less.js va incluso dopo che hai chiamato i tuoi .less 8) e ricorda che i tuoi .less vanno dichirati nell'attributo rel

codice:

<link rel="stylesheet/less" href="miostile.less">

**danirota** · 17-05-2013, 13:07

ciao, ho provato in tutti i modi, ma non funziona... forse devo compilare qualcosa? il sito lesscss.org paarla di compilare... non saprei...

vi lasco il mio codice, magari faccio qualche errore che non vedo

HTML

codice:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
	<?php include('meta.php'); ?>
    
    
    <title>Casi clinici</title>
    
    
  <link rel="stylesheet" type="text/css" href="../../css/style.css">
  <link rel="stylesheet/less" type="text/css"  href="../../css/retina.less">
  
  <script src="../../js/less-1.3.3.min.js"></script>
  <script src="../../js/jquery-1.9.1.min.js" type="text/javascript"></script>
    
   
  </head>

.LESS

codice:

.at2x(@path, @w: auto, @h: auto) {
  background-image: url(@path);
  /*@at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;

  @media all and (-webkit-min-device-pixel-ratio : 1.5) {
    background-image: url(@at2x_path);
    background-size: @w @h;
  }  */
}

.aa(@colore){
	background-color:@colore;
}

MIO CSS

codice:

body{
	margin:0;
	padding:0;
	font-family:Helvetica, Arial, sans-serif;
	font-size:16px;
	color:#1e255a;
	.aa(#000000);
}

includo il mio css, includo il file retina.less (con la funzione .aa() ) includo il js

nel mio css chiama la funzione .aa() nel body

a questo punto dovrebbe diventare lo sfondo nero, ma in realtà non succede nulla....

su http://less2css.org/ funziona

**ldetomi** · 17-05-2013, 13:21

Ma sai che proprio negli ultimi giorni anche a me pare accadere qualcosa di simile ogni tanto?
In pratica mi sono trovato ad applicare alcuni stili che è come se venissero ignorati...

Prima cosa che ti consiglio è provare a eliminare la media query e vedere se così funziona... non vorrei che per qualche strano motivo quel check fallisse...

**ratte** · 17-05-2013, 13:43

Hmmm se nn sbaglio, questo:

codice:

body{
	margin:0;
	padding:0;
	font-family:Helvetica, Arial, sans-serif;
	font-size:16px;
	color:#1e255a;
	.aa(#000000);
}

nel css non può funzionare... css non può caricare una variabile less

**danirota** · 17-05-2013, 14:01

ah, quindi le variabile less (@qualcosa) devono stare SOLO nei file .less?

**ratte** · 17-05-2013, 14:07

Absolutli eh! sisisii

css continua a funzionare solo come css, solo i file .less vedono le variabili less.

we got it?

Discussione: css LESS uso di funzioni

Strumenti discussione

Ricerca discussione

Visualizza

css LESS uso di funzioni

Re: css LESS uso di funzioni

Permessi di invio