Ayuda con Sass
2 seguidores
Hola estoy comenzando a usar Sass y hay unas cosas que no entiendo como hacer esto: no definir ninguna familia de fuentes directamente en la hoja de estilos, es decir, no esta permitido definir (font-family: sans-serif;) ni tampoco definirlas como variables (puras) de Sass esto como lo podría hacer y este otro en el que las fuente del diseño estarán reverenciados con operaciones a un tamaño base de 1em en CSS se como hacerlo pero en Sass como se hace esto
Usuario desconocido
¿como que no esta permitido? ¿como lo estas haciendo (pega el codigo) ?
Usuario desconocido
* Ahí no veo como estas poniendo las fuentes, pero no sé por que dices que no se pueden definir fuentes en sass, se pueden definir sin ningun problema tanto directamente como en una variable, yo lo hago todos los dias.
* Tienes errores en el codigo, hay un margin-left: 10ps; y eso de ps no existe, supongo que querias decir px
* No tiene sentido que llames a las variables como colores. Se puede dar el caso de que tengas una variable $white que tenga el color negro dentro y lleva a la confusion. Los nombres de las variables deberian hacer referencia a la funcion del color ($fondo, $color_secundario, etc)
* No tienes porque replicar la estructura de anidacion del html en el sass. Yo practicamente nunca uso más de dos niveles de anidacion para mantenerlo todo mas claro y tener css mas ligeros. Por ejemplo, no es necesario que definas li dentro de ul porque en el html li siempre va a estar dentro de un ul. Tienes que considerar cuando un estilo se va a aplicar siempre a esa clase o si se va a aplicar solo cuando esté dentro de otro elemento, que es el unico caso donde debes anidarlo. Por ejemplo si "a" siempre va a ser text-decoration: none; deberias definirla en la raiz del sass, sin anidar.
*Lo de los bordes así:
@mixin bordes ($radius, $all:none) {
border-top-left-radius: $radius;
border-top-right-radius: $radius;
@if $all=="all" {
border-radius: $radius;
}
}
@include bordes(20px);
@include bordes(20px,all);
Usuario desconocido
Otro apunte @samuelalonso , yo antes tambien usaba los mixins para añadir los prefijos vendor, pero ahora compilo con Gulp en vez de usar Sass y (aparte de que es mucho mas rapido cuando hay que compilar decenas de scss) se puede usar el plugin autoprefixer https://www.npmjs.com/package/gulp-autoprefixer que es una maravilla y añade todos los prefijos necesarios al compilar.
Hay que tener un poco de cuidado al configurarlo para que genere los sourcemaps correctamente pero permite tener los scss aun más claros y cortos.