He recuperado este blog simplemente por cariño al dominio.
Pondré trucos de tecnología usando el vídeo en este nuevo canal de youtube
https://www.youtube.com/channel/UC18Yb0BuXfzy6Ynagd_pKnA
"me encanta el olor a patán por la mañana" Un viejo blog rescatado para poner trucos tecnológicos que conozcamos
He recuperado este blog simplemente por cariño al dominio.
Pondré trucos de tecnología usando el vídeo en este nuevo canal de youtube
table>tr*5>td*3
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
ul#mimenu>li.miclase$*10
<ul id="mimenu">
<li class="miclase1"></li>
<li class="miclase2"></li>
<li class="miclase3"></li>
<li class="miclase4"></li>
<li class="miclase5"></li>
<li class="miclase6"></li>
<li class="miclase7"></li>
<li class="miclase8"></li>
<li class="miclase9"></li>
<li class="miclase10"></li>
</ul>

#cuerpo {
margin:0 10px;
padding:0 15px;
border-left:1px red solid;
border-right:1px red solid;
width:calc(80% -2*10px - 2*15px -2px)
-moz-width:calc(80% -2*10px - 2*15px -2px)
-webkit-width:calc(80% -2*10px - 2*15px -2px)
-o-width:calc(80% -2*10px - 2*15px -2px)
}
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
Para probar SASS es un follón, tienes que instalar ruby, dentro sass, compass también...
p {
background:#e5c138;
}
a {
color:#e5c138;
background:#cccc;
}
h2 {
border:1px #e5c138 solid;
}
De esta forma tenemos que recordar el color continuamente y si queremos cambiarlo en toda la página hay que hacerlo 200 millones de veces.
@colorPrincipal: #e5c138;
p {
background: @colorPrincipal;
}
a {
color:@colorPrincipal;
background:#cccc;
}
h2 {
border:1px @colorPrincipal; solid;
}
#header { font-family:arial, verdana, sans-serif; }
#header h1 {
font-size:26px;
font-weight:bold;
}
#header p { font-size:12px; }
#header p a { text-decoration:none; }
#header p a:hover { border-width:1px; }
En el .less queda más claro y sin tanta repetición:
#header {
font-family:arial, verdana, sans-serif;
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
El #header tiene el valor por defecto (5px) como podréis suponer se puede anidar clases de forma muy chula, imaginad que quiero hacer un botón siempre igual.
.botones-redondeados{
.rounded-corners(20px);
color:@colorPrincipal;
background:@colorSecundario;
}
d8b db .d88b. d888888b d88888b d8888b. .d8b. d8888b.
888o 88 .8P Y8. `~~88~~' 88' 88 `8D d8' `8b 88 `8D
88V8o 88 88 88 88 88ooooo 88oodD' 88ooo88 88 88
88 V8o88 88 88 88 88~~~~~ 88~~~ 88~~~88 88 88
88 V888 `8b d8' 88 88. 88 88 88 88 .8D
VP V8P `Y88P' YP Y88888P 88 YP YP Y8888D'