EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Tutoriales
  • Blog
✕
            Sin resultados Ver todos los resultados

            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.

            Contenidos del artículo

            • Preprocesadores CSS
            • Preprocesadores Less y Sass
                • Ejemplos Sass:

            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

            Navegación de entradas

            ← Centrar horizontal y verticalmente en CSS un elemento
            Prácticas CSS de páginas web completas →

            Tutorial CSS Nivel Avanzado

            • 1. Tipos de diseño web
            • 2. Medios en CSS
            • 3. Media queries CSS
            • 4. Flexbox, modelo de caja flexible
            • 5. CSS Grid para maquetar contenido con rejillas
            • 6. Centrar horizontal y verticalmente un elemento
            • 7. Preprocesadores Less y Sass
            • 8. Prácticas CSS
            • 9. Chuleta CSS Nivel avanzado

            Tutoriales

            • Diseño de Interfaces
            • Usabilidad web
            • Accesibilidad web
            • HTML
            • XML
            • CSS Nivel Inicial
            • CSS Nivel Intermedio
            • CSS Nivel Avanzado
            • Bootstrap 5
            • Ver más tutoriales

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            TUTORIALES

            • Contenidos por bloques
            • Diseño de Interfaces Web
            • Lenguajes de Marcas y Sistemas de Gestión de Información

            SÍGUENOS

                 

            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



              © 2023 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          Sin resultados Ver todos los resultados