css3 - cool - css after before

Preguntas de Fancy Media con algo de magia MENOS

Question

Sería bueno envolver estilos css para diferentes resoluciones dentro de algunas clases CSS usando menos.

Me gustaría hacer algo como:

footer {
  width: 100%;
}

.tablet {
  footer {
    width: 768px;
  }
}

.desktop {
  footer {
    width: 940px;
  }
}

Al final algo así debería ser el resultado:

footer {
  width: 100%;
}

@media screen and (min-width: 768px) {
  footer {
    width: 768px;
  }
}

@media screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}

.tablet podría verse de esta manera:

@media screen and (min-width: 768px) {
  .tablet {

  }
}

Espero que alguien tenga una buena idea!

Answer 1

+1 para Nguyen y Yancey, y una adición más.

Si desea una definición explícita de los anchos, puede lograr eso con string interpolation y variables para sus puntos de corte. Aquí, por ejemplo, con los de bootstrap: las reglas estrictas son para evitar la superposición de definiciones.

/* 
   setup
*/

@xs-min: 480px;
@sm-min: 768px;
@md-min: 992px;
@lg-min: 1200px;

@xs-max: (@sm-min - 1);
@sm-max: (@md-min - 1);
@md-max: (@lg-min - 1);

@phone:          ~"only screen and (min-width: @{xs-min})";
@phone-strict:   ~"only screen and (min-width: @{xs-min}) and (max-width: @{xs-max})";
@tablet:         ~"only screen and (min-width: @{sm-min})";
@tablet-strict:  ~"only screen and (min-width: @{sm-min}) and (max-width: @{sm-max})";
@desktop:        ~"only screen and (min-width: @{md-min})";
@desktop-strict: ~"only screen and (min-width: @{md-min}) and (max-width: @{md-max})";
@large:          ~"only screen and (min-width: @{lg-min})";

/* 
   usage
*/

footer{
    width: 100%;
    @media @tablet {
        width: 768px;
    }
    @media @desktop {
        width: 940px;
    }
}

Answer 2

Esto es lo que hice en mis proyectos:

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

@media @desktop {
  footer {
    width: 940px;
  }
}

@media @tablet {
  footer {
    width: 768px;
  }
}

Esto le permite definir solo sus consultas de medios una vez y puede usarlas en sus menos archivos. También un poco más fácil de leer. :)

Answer 3

Estoy completamente de acuerdo con la respuesta de Hai Nguyen (que ha sido aceptada) pero puedes limpiarla un poco más haciendo algo como esto:

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

footer{
  width: 100%;
  @media @tablet {
    width: 768px;
  }
  @media @desktop {
    width: 940px;
  }
}

Es esencialmente lo mismo, pero le permite anidar sus consultas de medios dentro del selector original. Mantiene todas las CSS para un elemento específico juntas y hace que sus estilos sean mucho más modulares (en comparación con el enfoque de punto de corte dividido).

Answer 4

Estoy usando estas mezclas y variables

.max(@max; @rules){@media only screen and (max-width: (@max - 1)){@rules();}}
.min(@min; @rules){@media only screen and (min-width: @min){@rules();}}
.bw(@min; @max; @rules){@media only screen and (min-width: @min) and (max-width: (@max - 1)){@rules();}}

@pad: 480px;
@tab: 800px;
@desktop: 992px;
@hd: 1200px;

Así que esto

footer{
    width: 100%;
    .bw(@tab,@desktop,{
        width: 768px;
    });
    .min(@desktop,{
        width: 940px;
    });
}

se convierte

footer {
  width: 100%;
}
@media only screen and (min-width: 800px) and (max-width: 991px) {
  footer {
    width: 768px;
  }
}
@media only screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}

Answer 5

Usamos una configuración como esta:

@vp_desktop:    801px;
@vp_tablet:     800px;
@vp_mobile:     400px;

.OnDesktop(@rules) { @media screen and (min-width:@vp_desktop){ @rules(); } };
.OnTablet(@rules) { @media screen and (max-width:@vp_tablet){ @rules(); } };
.OnMobile(@rules) { @media screen and (max-width:@vp_mobile){ @rules(); } };

Solo necesita establecer variables, las mixins manejan el resto por lo que es muy fácil de mantener pero aún flexible:

div {
  display: inline-block;
  .OnTablet({
    display: block;
  });
}

Vale la pena mencionar que si bien esta técnica es muy fácil, si se utiliza mal, su salida de CSS estará llena de consultas de medios. Intento limitar mis consultas de medios a 1 por punto de corte, por archivo. Donde un archivo sería header.less o search.less.

NB Este método probablemente no se compilará a menos que esté utilizando el compilador de JavaScript.

Answer 6

Y también puede combinar consultas de medios como esta

@media @desktop, @tablet, @ipad{ 

//common styles... 

}