en modo estudio me refiero en modo block de notas para anotar y no cedear haha y si!! he!! estan muy buenos!! la de li click a la plubli jijij para que generes mas clicksz!! hahah xD
si entiendo! pero estan muy buenos oye! una consulta mira @mixin position($type,$top,$right,$bottom,$left){ @if $type != "relative"{ position:$type; top:$top; right:$right; left:$left; bottom:$bottom; } @else{ position:relative; } } ---------------------------------------------------------------------------- #uno{ @include position_general(absolute,30px,90px,90px,90px); background:red; } asi si me funciona pero lo que pretendo es solo meter algunos elementos ejemplo #uno{ @include position_general($type:"absolute",$top:"40px",$left:"100px"); background:red; } creo que si me doy a entender lo que quiero hacer no? quiero usar solo algunas variables no todas que me recomiendas
Sí no le asignas un valor por defecto al mixin, Sass obvia que el mixin necesita un valor. El motivo es que a menudo se necesita que los mixins sí tengan valores requeridos o obligatorios.
Ejemplo:
@mixin miMixin ($parm) { // cosas }
.soyClase { @include miMixin (10px) ; // esta bien @include miMixin (); // incorrecto, el mixin necesita un argumento }
Para que el mixin no requiera argumentos hay que definirle un parámetro por defecto. Se hace así:
@mixin miMixin ($parm: 5px) { // cosas }
Entonces ahora es valido hacer esto: .soyClase { @include miMixin (20px); // esta bien @include miMixin (); // esta bien @include miMixin; // esta bien }
Y otra cosa Sass soporta 6 tipos de variables. Numeros, por ejemplo: 1.2, 13, 10px String (cadenas de caracteres), por ejemplo: "foo", 'bar', baz Colores, por ejemplo: blue, #04a3f9, rgba(255, 0, 0, 0.5) Boleanos, por ejemplo: true, false Nulos, por ejemplo: null Listas de valores, por ejemplo: 1.5em 1em 0 2em, Helvetica, Arial, sans-serif
Lo digo porque en el mixin que creaste le pasaste valores tipo string: position_general($type:”absolute”,$top:”40px”,$left:”100px”);
Son string ya que van entre comillas, pero no es necesario que todos sean tipo string, tal vez quedaría mejor así:
mi estimado con el ejemplo que me hizo me aclaro mucho ya me salio como queria asi quedo mire! @mixin position($type,$top:null, $right:null, $bottom:null, $left:null){ @if $type != relative{ position:$type; top:$top; right:$right; bottom:$bottom; left:$left; } @else{ position:relative; } } ya con eso! ya puedo posicionar de una forma muy dinamica XD el resultado del css es este #uno { height: 200px; position: absolute; top: 200px; left: 40px; background: red; width: 200px; } ve muy limpio y funcional !! mil gracias jojo estamos en contacto! y al pendiente de los nuevos aportes
si me funciona por que cuando le pongo el valor null me toma top,left,rigth,bottom como un valor inexistente y no me lo pone en el css hasta no cambiar el null por algo valido que es un valor en px o en em o en % calalo! o igual me equiboque yo pero hasta donde me parece si funciona bien y como espero!!
mm.. algo raro XD pero igual la funcion cumple con lo que debe de hacer y en el css resultado me pone lo que le digo que ponga sin nada mas! la usare pero estare al pendiente si llegase a ocurrir algun errorsillo! xD hahaha... !Muchas Gracias!
Muy buenos los videos amigo !! ya los vi todo y ahora me abro mi siblime text en modo estudio para hacer mis anotaciones! xD
ResponderEliminar¿Cómo es eso de sublime text en modo estudio?
ResponderEliminarBueno, me alegro que te hayan gustado los videos. Yo tengo que seguir publicando más videos, todavía faltan varios. Un saludo ;-)
en modo estudio me refiero en modo block de notas para anotar y no cedear haha y si!! he!! estan muy buenos!! la de li click a la plubli jijij para que generes mas clicksz!! hahah xD
ResponderEliminarAhh bueno gracias :) Yo espero pronto subir más videos, por diversos temas no he podido subir más videos.
ResponderEliminarGracias :)
si entiendo! pero estan muy buenos oye! una consulta mira
ResponderEliminar@mixin position($type,$top,$right,$bottom,$left){
@if $type != "relative"{
position:$type;
top:$top;
right:$right;
left:$left;
bottom:$bottom;
}
@else{
position:relative;
}
}
----------------------------------------------------------------------------
#uno{
@include position_general(absolute,30px,90px,90px,90px);
background:red;
}
asi si me funciona pero lo que pretendo es solo meter algunos elementos ejemplo
#uno{
@include position_general($type:"absolute",$top:"40px",$left:"100px");
background:red;
}
creo que si me doy a entender lo que quiero hacer no? quiero usar solo algunas variables no todas que me recomiendas
Hola Gus,
ResponderEliminarSí no le asignas un valor por defecto al mixin, Sass obvia que el mixin necesita un valor. El motivo es que a menudo se necesita que los mixins sí tengan valores requeridos o obligatorios.
Ejemplo:
@mixin miMixin ($parm) {
// cosas
}
.soyClase {
@include miMixin (10px) ; // esta bien
@include miMixin (); // incorrecto, el mixin necesita un argumento
}
Para que el mixin no requiera argumentos hay que definirle un parámetro por defecto. Se hace así:
@mixin miMixin ($parm: 5px) {
// cosas
}
Entonces ahora es valido hacer esto:
.soyClase {
@include miMixin (20px); // esta bien
@include miMixin (); // esta bien
@include miMixin; // esta bien
}
Y otra cosa Sass soporta 6 tipos de variables.
Numeros, por ejemplo: 1.2, 13, 10px
String (cadenas de caracteres), por ejemplo: "foo", 'bar', baz
Colores, por ejemplo: blue, #04a3f9, rgba(255, 0, 0, 0.5)
Boleanos, por ejemplo: true, false
Nulos, por ejemplo: null
Listas de valores, por ejemplo: 1.5em 1em 0 2em, Helvetica, Arial, sans-serif
Lo digo porque en el mixin que creaste le pasaste valores tipo string:
position_general($type:”absolute”,$top:”40px”,$left:”100px”);
Son string ya que van entre comillas, pero no es necesario que todos sean tipo string, tal vez quedaría mejor así:
@include position($type:absolute, $top: 40px, $left: 100px);
Cualquier otra duda me dices, no tengo problemas en responder.
Que estés bien ;-)
Aquí arregle a la rápida el mixin -> http://codepen.io/Writkas/pen/vJHkp
ResponderEliminarmi estimado con el ejemplo que me hizo me aclaro mucho ya me salio como queria asi quedo mire!
ResponderEliminar@mixin position($type,$top:null, $right:null, $bottom:null, $left:null){
@if $type != relative{
position:$type;
top:$top;
right:$right;
bottom:$bottom;
left:$left;
}
@else{
position:relative;
}
}
ya con eso! ya puedo posicionar de una forma muy dinamica XD
el resultado del css es este
#uno {
height: 200px;
position: absolute;
top: 200px;
left: 40px;
background: red;
width: 200px;
}
ve muy limpio y funcional !! mil gracias jojo estamos en contacto! y al pendiente de los nuevos aportes
Pero te funciona con null? Es que se supone que la propiedad top (por ejemplo) se le debe colocar pixeles, o porcentajes, etc.
ResponderEliminarsi me funciona por que cuando le pongo el valor null me toma top,left,rigth,bottom como un valor inexistente y no me lo pone en el css hasta no cambiar el null por algo valido que es un valor en px o en em o en % calalo! o igual me equiboque yo pero hasta donde me parece si funciona bien y como espero!!
ResponderEliminarEs que lo probé con el shell interactivo de compass y ahí me da un error.
ResponderEliminar[writkas@writkas ~]$ compass interactive
>> top: null;
SyntaxError: Invalid CSS after "top": expected expression (e.g. 1px, bold), was ": null;"
>>
Pero tampoco es que lo haya probado con un proyecto.
Saludos
mm.. algo raro XD pero igual la funcion cumple con lo que debe de hacer y en el css resultado me pone lo que le digo que ponga sin nada mas! la usare pero estare al pendiente si llegase a ocurrir algun errorsillo! xD hahaha... !Muchas Gracias!
ResponderEliminar