Comunidad de diseño web y desarrollo en internet online

Agrupar las clases dentro de un solo media query en Less

Citar            
MensajeEscrito el 16 Abr 2013 02:52 pm
¿Hay alguna forma de agrupar dentro de un solo media query todas las clases?, algo asi:

Código CSS :

 @media (min-width: 1200px) { 
        .min-width-1200{display: block;} 

        .container,
        .navbar-static-top .container, 
        .navbar-fixed-top .container, 
        .navbar-fixed-bottom .container
        {
            width: 1170px;
        }

        .navbar-fixed-left.collapse.width{
            width: 17.09402%;
        }        
        .content-column {
            overflow: hidden;
            position: relative;        
            left: 17.09402%;
            width: 62.90598%;
            float: left;
        }        
        .content-wraper aside {
            display: block;
            float: right;
            width: 18%;
        }        

     }    


solo encontre que dentro de cada clase se puede definir cada media query para esa clase:

Código CSS :

    .content-wraper{
       position: relative;
       background-color: @grayLighter_f0;

       article{
          min-height: 100%;
          width: auto;
          left: 0;
          padding: 0 1.5%;
          border-top: 1px solid @grayLight_d0;

          h1{
             color: @green;
             font-size: @baseFontSize;
          }
       }

       aside{
        background: none repeat scroll 0 0 @orange;
        display: none;
        color: white;
        padding: 0px 1% 1%;          
       }

       @media (max-width: 480px){ 
          width: 100%;
       }
       @media (max-width: 767px) { 
          width: 100%;
       }
       @media (min-width: 768px){
               -webkit-box-shadow: 0 5px 10px #aaa;
                  -moz-box-shadow: 0 5px 10px #aaa;
                       box-shadow: 0 5px 10px #aaa;                              
       }
       @media (min-width: 979px){
         aside {
                  display: block;
                  float: right;
                  width: 21%;
              }
       }
       @media (min-width: 1200px) { 
         aside {
               display: block;
               float: right;
               width: 18%;
           }           
       }
    }

Por Jorgelig

Claber

3035 de clabLevel

12 tutoriales

 

Monterrey, Nuevo Leon, MX

opera
Citar            
MensajeEscrito el 16 Abr 2013 04:52 pm
Mi codigo no funciona en less, aunque no le veo mucha diferencia con el de bootstrap:

https://github.com/twitter/bootstrap/blob/master/less/responsive-767px-max.less

Por Jorgelig

Claber

3035 de clabLevel

12 tutoriales

 

Monterrey, Nuevo Leon, MX

opera
Citar            
MensajeEscrito el 17 Abr 2013 02:31 pm
¿no es mas facil hacer un css con todas tus clases y llamarlo con un media query?

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

chrome
Citar            
MensajeEscrito el 17 Abr 2013 02:56 pm

Inyaka escribió:

¿no es mas facil hacer un css con todas tus clases y llamarlo con un media query?


No te entendi bien a que te refieres, pero mi problema es que usando solo Css todas las clases van dentro de un solo media query, y en Less solo no eh logrado que funcione asi; la unica forma es definiendo dentro de cada clase todos los media query. Esto es que si tengo 4 media y 10 clases, con css solo tengo 4 agrupaciones, pero usando lo que encontre de less tendria 10 grupos; esto es lo que quiero evitarme.

Por Jorgelig

Claber

3035 de clabLevel

12 tutoriales

 

Monterrey, Nuevo Leon, MX

chrome
Citar            
MensajeEscrito el 17 Abr 2013 04:04 pm
Utilizando Compass es fácil grupar todos los media query. Pero la curva de aprendizaje es un poquito mayor, pero después de aprender es mucho más sencillo escribir el CSS

Por esutoraiki

Claber

548 de clabLevel

4 tutoriales

Genero:Masculino  

Aplicaciones para Web

chrome

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.