Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Utiliza los mixins en tus break points
Danniel Navas
Danniel Navas

Posted on • Edited on

     

Utiliza los mixins en tus break points

Los media querys son una forma de acomodar nuestro sitio web para diferentes dispositivos.

Con la utilización de SASS en cada ves más proyectos se vuelve necesario simplificar el proceso de declaración de nuestros breakpoints y para esta tarea se utilizan los mixins, los cuales son una porción de código que podemos reutilizar en esas partes que se hacen repetitivas.

Para definir los mixins vamos a colocar tres break points los cuales son:

Moviles: 767px

Tablets: mínimo 768px, máximo 999px

Desktop: 1280px

pasamos a la declaración creamos un nuevo archivo.scss y en este dejaremos el siguiente código:

mixins.png

ahora importaremos este archivo en nuestro scss de la siguiente forma:

@import '../../utils/mixins.scss';

ahora lo vamos a utilizar definiendo nuestros estilos para los diferentes dispositivos

definicion.png

Y con esto ya tendríamos implementado nuestros break points de una forma más practica y sencilla de utilizar.

Espero te ayudara este post.

Gracias por leer, nos vemos en la próxima.

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

💻 Frontend Developer Master🚀 sci-fi fan
  • Location
    Bogota
  • Education
    Ingeniero de sistemas
  • Work
    Frontend Developer master 💪
  • Joined

More fromDanniel Navas

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp