EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Flexbox css
            Flexbox, modelo de caja flexible en CSS
            02/11/2019
            elementos estilos codigo composicion web
            Estilos, elementos y código para la composición de tu web
            02/11/2019

            Preprocesadores CSS: Less y Sass

            preprocesadores css less sass

            preprocesadores css less sass

            Preprocesadores CSS

            La simplicidad de CSS hace que sea muy limitado. Por ejemplo, en el caso de necesitar cambiar el valor de una propiedad para que sea igual en muchos documentos se hace muy costoso. Además, tampoco se pueden utilizar condicionales, variables o estructuras anidadas. Para facilitar estas tareas, y muchas otras, nacen los preprocesadores CSS.

            Mediante los preprocesadores CSS se desarrollan estilos más mantenibles y con una sintaxis más rica. Los ficheros de los preprocesadores son parecidos a los de CSS y deben compilarse para traducirse a hojas de estilo CSS reconocibles por los diferentes navegadores.

            Ver las diferentes opciones para compilar un fichero de un preprocesador.

            Preprocesadores Less y Sass

            Los preprocesadores más utilizados son Less y Sass, veamos algunos ejemplos de código.

            Ejemplos Sass:

            Variables:

            $font-stack: Helvetica, sans-serif; 
            $primary-color: #333; 
            
            body {   
                 font:  $font-stack;   
                 color: $primary-color; 
            }

            Nesting:

            nav { 
                ul { 
                    margin: 0; 
                    padding: 0; 
                    list-style: none; 
                } 
                li { 
                    display: inline-block; 
                } 
            }

            Operators:

            article { 
                float: left; 
                width: 600px / 960px * 100%; 
            } 
            aside { 
                float: right; 
                width: 300px / 960px * 100%; 
            }

            Mixins:

            @mixin transform($property) { 
                -webkit-transform: $property; 
                -ms-transform: $property; 
                transform: $property;
            } 
            .box { 
                @include transform(rotate(30deg)); 
            }

            Conoce más acerca de los preprocesadores Sass y Less en los siguientes enlaces:

            • Aprende Sass
            • Aprende Less
            Compartir

            UD4. CSS Avanzado

            • 1. Tipos de diseño web
            • 2. Medios en CSS
            • 3. Media queries CSS
            • 4. Metaetiqueta viewport
            • 5. Sombras CSS
            • 6. Gradientes CSS
            • 7. Selector de atributos en CSS
            • 8. Transiciones en CSS
            • 9. Transformaciones en CSS
            • 10. Propiedad overflow
            • 11. Flexbox, modelo de caja flexible
            • 12. Centrar horizontal y verticalmente con CSS
            • 13. Preprocesadores Less y Sass
            • 14. Estilos, elementos y código para la composición de tu web
            • 15. Herramientas útiles y referencias CSS
            • 16. CSS Grid para maquetar contenido con rejillas

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results