Vamos a frenarlo. Así es como funciona
Tienes tu html
- ¿Cómo podemos maximizar el uso de un archivo de texto como base de datos?
- ¿Cuál es mejor en Js angular y 2 angular?
- ¿Cuánto tráfico necesita un sitio (o página) para ejecutar A / B o pruebas de conversión que produzcan resultados estadísticamente significativos (es decir, procesables)?
- ¿Cuáles son las principales diferencias entre Ruby on Rails y Django?
- Cómo hacer una copia de seguridad / restaurar Drupal
Ahora crea un archivo styles.scss y comienza a escribir sass
¡Eso es!
Hay un script detrás de escena que convierte el sass a css. Entonces “tienes que” no hacer nada
Ahora su pregunta se convierte en “cuál es el punto de usar sass en lugar de css”
Sass facilita la escritura de CSS y le da más funcionalidad.
El ejemplo más básico son las variables.
$ rojo: # F34567
Si su sitio tiene muchas áreas donde se usa `# F34567`. escribir `$ red` es más fácil.
Tengo un archivo _vars.scss donde tengo mis colores principales, anchos y consultas de medios. Tiendo a usar nombres de colores como el anterior. # F34567 es rojo, pero en mi opinión, $ rojo es muy natural. Si tengo diferentes tonos de lectura, entonces haría algo mejor.
Ahora mira esto
@mixin bp ($ punto) {
@if $ punto == papa-oso {
@media (ancho máximo: 1600px) {@content; }
}
@else if $ point == mama-bear {
@media (ancho máximo: 1250 px) {@content; }
}
@else if $ point == baby-bear {
@media (ancho máximo: 365px) {@content; }
}
@else {
@media (ancho máximo: $ punto) {@content; }
}
}
Ahora, cuando necesito puntos de interrupción, no necesito escribir todo eso. yo solo
.cualquier clase {
@incluye bp (baby-bear) {
ancho: …
}
}
incluir bp (baby-bear) en todo el lugar es más rápido que escribir este @media (max-width: 365px), y lo más importante, tener que recordar 365px, baby-bear obviamente es la pantalla más pequeña. (Obtuve esta configuración de css-tricks.com)
Y hay muchas más cosas que puedes hacer.
Más aún, nuevamente hablando del más básico de todos. Puede tener 50 archivos sass. Puedes dividir tus estilos de la forma que quieras. Si desea cambiar algo en el encabezado, en lugar de buscar la línea que escribió, simplemente abra ‘header.scss’ y listo.
Todos esos archivos se reducen a un archivo CSS.
La otra razón por la cual este problema que plantea no es un problema es que, incluso si escribió css, sería conveniente comprimirlo. Por lo tanto, todavía tendrá que “convertirlo”, ya sea para eliminar espacios en blanco o para convertir sass a css, una vez que lo haya realizado, no lo está haciendo a mano (tratando de no ser técnico a propósito).
