Pense-bête LESS CSS / SASS

La syntaxe de ce doc est celle de LESS mais la plupart des exemples sont convertibles en SASS :

• Supprimez les  { et  }
• Supprimez les  ;
• Remplacez les @ des variables par des  $

URL de la syntaxe

https://lesscss.org/features/

URL de la doc des fonctions

https://lesscss.org/functions/

Variables

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

df

Imbrication

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

Descendre dans l’imbrication

.services {
	float: left;
	width: 475px;
	line-height: 1em;
	padding: 20px 0 0 20px;
	color: @dark_red;
	img {
		margin: 0 10px;
		&.payment {
			margin: 0 10px 0 15px;
		}
	}
}

Remonter dans l’imbrication

#container_footer {
	padding: 17px 0 320px 0;
	background-color: @dark_red;
	body.order & {
		padding-top: 0;
		margin-top: 17px;
	}
}

Déduire la taille des paddings

.wrap_fees {
	float: left;
	width: 445-40px;
	padding: 29px 0 0 40px;
}

Mixins

.a, #b {
  color: red;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}

donne :

.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}

Mixins avec un paramètre ayant une valeur par défaut

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

// appel :

#header {
  .border-radius();
}

.button {
  .border-radius(6px);
}

Clearfix mixin

.clearfix{
	zoom:1;
	&:before, &:after{ content:""; display:table; }
	&:after{ clear: both; }
}

ul#gallery {
	.clearfix();
	li {
		float: left;
	}
}