{"id":4107,"date":"2016-10-03T13:08:47","date_gmt":"2016-10-03T11:08:47","guid":{"rendered":"https:\/\/www.hiberus.com\/blog\/?p=4107"},"modified":"2020-09-15T16:22:32","modified_gmt":"2020-09-15T14:22:32","slug":"diarios-de-un-junior-css-vs-sass","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/diarios-de-un-junior-css-vs-sass\/","title":{"rendered":"Diarios de un junior: CSS vs SASS"},"content":{"rendered":"

\u00bfQu\u00e9 es CSS y qu\u00e9 es SASS?<\/strong><\/h2>\n

CSS<\/strong> \u00abCascading Style Sheets\u00bb<\/em> es un lenguaje de hojas de estilo,\u00a0sirve para organizar la presentaci\u00f3n y aspecto de una p\u00e1gina web, ya sea en un ordenador, un m\u00f3vil, una Tablet, etc.<\/p>\n

SASS<\/strong> \u00abSyntactically Awesome Stylesheets<\/em>\u00a0\u00bb\u00a0(definido como CSS con superpoderes<\/strong>) es un metalenguaje de hojas de estilo. \u00c9ste es un lenguaje de script que es traducido a CSS.<\/p>\n

Consiste en dos sintaxis, la original que es la sintaxis indentada \u201c.sass\u201d que usa la indentaci\u00f3n para separar bloques de c\u00f3digo y el car\u00e1cter nueva l\u00ednea para separar las reglas. La sintaxis m\u00e1s reciente, \u201c.scss\u201d, que usa el formato de bloques como CSS, usa llaves para denotar bloques de c\u00f3digo y punto y coma para separar las l\u00edneas dentro de un bloque.<\/p>\n

El int\u00e9rprete de SASS traduce el c\u00f3digo a CSS<\/p><\/blockquote>\n

Diferencias entre SCSS y SASS<\/strong><\/h2>\n

\"giphy\"<\/a><\/p>\n

SASS es el pre-procesador y la sintaxis al completo, mientras que SCSS es la sintaxis de CSS pero con todas las ventajas de\u00a0SASS.<\/p>\n

\"SCSS<\/a><\/p>\n

Ahora que ya est\u00e1 clara la diferencia entre SASS y SCSS<\/strong> vamos a ver todas las caracter\u00edsticas que hace que SASS sea mucho m\u00e1s potente que CSS.<\/strong><\/p>\n

Uso de variables y anidaci\u00f3n<\/strong><\/h3>\n

Una vez que declaras una variable puedes usarla a lo largo de todo el proyecto siempre y cuando importes el archivo en el que est\u00e1 declarada, y si deseas modificarla se modificar\u00e1 en todos los sitios en los que se use a la vez, dejando de lado el t\u00edpico \u201cbuscar y reemplazar\u201d.<\/p>\n

SASS permite 4 tipos de datos<\/strong>:<\/p>\n