This content originally appeared on DEV Community and was authored by Fernando
Sass I
Sass es un preprocesador CSS que nos permite dotar de superpoderes a css por medio de la anidación de código, la creacion de archivos parciales, y funciones avanzadas.
Que es la compilación de código?
La compilación de código es el proceso de transformar código fuente escrito en un lenguaje de programación de alto nivel (como C++, Java, o TypeScript) a un lenguaje de nivel inferior (como código máquina, bytecode, o JavaScript) que puede ser ejecutado por una computadora. Este proceso es realizado por un compilador, que toma el código fuente, lo analiza, lo optimiza y genera el código objeto correspondiente.
Proceso de instalación y Compilacion con Node.
Instalamos SASS por medio de la linea de comandos:
npm install -g sass
Una vez instalado, puedes compilar un archivo SASS (por ejemplo, styles.scss) a CSS ejecutando el siguiente comando en la terminal:
sass styles.scss styles.css
Este comando compilará styles.scss y generará un archivo styles.css con los estilos en CSS.
Para lograr compilar y que el resultado esté optimizado y comprimido ejecutamos el siguiente comando:
npx sass --style=compressed input.scss output.css
Tambien podemos hacer que el resultado de la compilación sea mas legible y amigable hay que tener en cuenta que de esta forma el archivo no va a estar optimizado.
npx sass --style=expanded input.scss output.css
Proceso de compilacion con la extensión Live Sass compiler.
- Buscamos la extension en la parte de extensiones de visual studio Code.
- configuramos las opciones que nos ofrece live sass:
- Guardar archivos compilados en un directorio específico:
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/path/to/css/folder"
}
]
format: El formato de salida del archivo CSS. Puede ser nested, expanded, compact, o compressed.
extensionName: La extensión del archivo compilado.
savePath: La ruta donde se guardarán los archivos compilados.
- Generar un mapa de fuentes (source map):
"liveSassCompile.settings.generateMap": true
generateMap: Booleano para habilitar o deshabilitar la generación de mapas de fuentes.
- Guardar los archivos compilados en la misma carpeta que el archivo SCSS:
"liveSassCompile.settings.savePath": null`
- Habilitar o deshabilitar la notificación de la compilación exitosa:
"liveSassCompile.settings.showOutputWindow": true
showOutputWindow: Booleano para habilitar o deshabilitar la ventana de salida que muestra los resultados de la compilación.
- Opciones de prefijo automático (autoprefixer):
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 2 versions",
"Firefox ESR"
]
autoprefix: Array de las configuraciones para el prefijo automático (autoprefixer).
La opción autoprefix en la configuración de Live Sass Compiler se utiliza para añadir automáticamente prefijos específicos del navegador a las propiedades CSS que lo requieran. Esto es útil para asegurar la compatibilidad con diferentes navegadores y sus versiones más antiguas.
¿Qué es autoprefix?
Autoprefixer es una herramienta que analiza el CSS y añade los prefijos necesarios del navegador para asegurar la compatibilidad. Por ejemplo, agrega prefijos como -webkit-, -moz-, -ms-, y -o- a las propiedades CSS según sea necesario.
- Excluir carpetas de la compilación:
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
]
excludeList: Array de rutas para excluir de la compilación.
- Cambiar el formato de la salida:
"liveSassCompile.settings.format": "expanded"
format: El formato del CSS generado (nested, expanded, compact, compressed).
- Habilitar o deshabilitar la limpieza de la consola:
"liveSassCompile.settings.showError": true
showError: Booleano para habilitar o deshabilitar la visualización de errores en la consola.
Ejemplo de Configuración Completa en settings.json
Aquí tienes un ejemplo de cómo puedes configurar todas estas opciones en el archivo settings.json:
{
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/dist/css"
}
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.savePath": null,
"liveSassCompile.settings.showOutputWindow": true,
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 2 versions",
"Firefox ESR"
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
"liveSassCompile.settings.format": "expanded",
"liveSassCompile.settings.showError": true
}
configuracion de path
{
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/dist/css"
}
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.showOutputWindow": true
}
format: Especifica el formato del CSS generado. Puede ser nested, expanded, compact, o compressed.
extensionName: La extensión del archivo compilado.
savePath: La ruta donde se guardarán los archivos compilados. Puedes especificar una ruta relativa a la ubicación del archivo SCSS.
Formato compact
Descripción: En el formato compact, cada regla CSS se escribe en una sola línea.
Características:
Menos líneas en comparación con el formato expanded.
Las reglas aún son legibles.
No elimina espacios en blanco innecesarios ni comentarios.
.class1 {
color: red;
}
.class2 {
color: blue;
}
Se convierte en :
.class1 { color: red; }
.class2 { color: blue; }
Formato compressed
Descripción: En el formato compressed, el CSS generado está completamente minificado.
Características:
Elimina todos los espacios en blanco innecesarios.
Elimina los comentarios.
Todo el CSS se escribe en una sola línea.
Ideal para la producción, ya que reduce el tamaño del archivo.
.class1 {
color: red;
}
.class2 {
color: blue;
}
Se convierte en:
.class1{color:red}.class2{color:blue}
Nested
Características del Formato nested
Estructura Jerárquica: Mantiene la estructura de anidamiento de los selectores como se escriben en el archivo Sass, lo que facilita la comprensión de las relaciones entre los selectores.
Legibilidad: Es fácil de leer y entender, ya que la salida CSS sigue una estructura similar a la del Sass original.
Espacios y Sangrías: Utiliza sangrías para mostrar la jerarquía de los selectores
.navbar {
background-color: #333;
.nav-item {
color: #fff;
&:hover {
color: #f0f0f0;
}
}
}
Se convierte en:
.navbar {
background-color: #333; }
.navbar .nav-item {
color: #fff; }
.navbar .nav-item:hover {
color: #f0f0f0; }
Sintaxis SASS
Nesting : El nesting en Sass se refiere a la capacidad de anidar selectores CSS dentro de otros selectores de una manera que refleja la jerarquía HTML, lo que facilita la organización y la legibilidad del código CSS.
¿Cómo Funciona el Nesting en Sass?
En lugar de escribir selectores CSS largos y repetitivos, puedes anidar selectores dentro de otros selectores para indicar que están relacionados. Sass luego convierte esta estructura anidada en CSS plano, expandiendo los selectores anidados según corresponda.
1) Ejemplo basico de Nesting en Sass
HTML básico
<div class="contenedor1">
<p>Lorem ipsum</p>
</div>
<br />
<br />
<br />
<br />
CSS Inicial:
div {
width: 100px;
height: 100px;
background-color: red;
padding: 15px;
}
div p {
font-size: 20px;
color: white;
font-family: Arial, sans-serif;
}
Lo mismo con sass
div {
width: 100px;
height: 100px;
background-color: red;
padding: 15px;
p {
font-size: 20px;
color: white;
font-family: Arial, sans-serif;
}
}
2) Segundo Ejemplo mas complejo
HTML básico
<ul>
<li>
<a href="">Enlac1 </a>
<a href="">Enlace2 </a>
</li>
</ul>
<br />
<br />
<br />
<br />
css inicial
ul {
list-style: none;
}
ul li {
padding: 15px;
display: inline-block;
}
ul li a {
text-decoration: none;
font-size: 16px;
color: #444;
}
Lo mismo con SASS
ul {
list-style: none;
li {
padding: 15px;
display: inline-block;
a {
text-decoration: none;
font-size: 16px;
color: #444;
}
}
}
3) Tercer Ejemplo mas uso del operador &
HTML inicial
<ul>
<li>
<a href="">Enlac1 </a>
<a href="">Enlace2 </a>
</li>
</ul>
CSS Inicial
li {
color: blue;
}
li:hover {
color: red;
}
Lo mismo Con SASS
li {
color: blue;
&:hover {
color: red;
}
}
vars : Las variables son una manera de guardar información que necesites reutilizar en tus hojas de estilos: colores, dimensiones, fuentes o cualquier otro valor. SASS utiliza el símbolo dólar ($) al principio de la palabra clave para crear una variable.
Estas variables se comportan como atributos CSS, y su valor puede ser cualquiera que pudiera adquirir un atributo CSS.
Una buena práctica común consiste en definir todas las variables globales al principio del fichero, para que puedan localizarse rápidamente.
Ejemplo de variables:
<div class="contenedor2">
<h4 class="titulo">Lorem ipsum</h4>
<p class="informacion">Lorem, ipsum dolor sit amet</p>
</div>
<br />
<br />
<br />
<br />
CSS inicial
.titulo {
font: normal;
font-size: 24px;
font-family: Open Arial, Helvetica, sans-serif;
color: #a1a1a1;
}
.información {
color: #444;
}
Lo mismo con SASS
$fuente-titulo: normal, 48px/2, Open Arial, Helvetica, sans-serif;
$color-titulo: #a1a1a1;
$color-información: #444;
.titulo {
font: $fuente-titulo;
color: $color-titulo;
}
.información {
color: #444;
}
import : En Sass, @import se utiliza para incluir el contenido de un archivo en otro. Esto permite dividir el CSS en múltiples archivos más pequeños y organizados, lo que facilita la gestión y el mantenimiento del código. A diferencia del @import de CSS, que requiere que el navegador haga múltiples solicitudes HTTP, el @import de Sass se resuelve durante la compilación, combinando todos los archivos en un único archivo CSS.
Ejemplo Básico de @import
Supongamos que tienes dos archivos: _variables.scss y styles.scss.
_variables.scss
$primary-color: #333;
$font-stack: Helvetica, sans-serif;
styles.scss
@import 'variables';
body {
font: 100% $font-stack;
color: $primary-color;
}
CSS Generado
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
Operaciones Con SASS
En Sass, puedes realizar una variedad de cálculos directamente en tus archivos de estilo, lo que te permite crear estilos dinámicos y flexibles. A continuación se presentan algunos ejemplos de cálculos que puedes hacer en Sass:
Suma
$base-spacing: 10px;
$double-spacing: $base-spacing + 10px;
.container {
padding: $double-spacing; // 20px
}
Resta
$full-width: 100%;
$sidebar-width: 25%;
$content-width: $full-width - $sidebar-width;
.content {
width: $content-width; // 75%
}
Potencia
$base: 2;
$exponent: 3;
$power: pow($base, $exponent);
.result {
width: $power * 10px; // 80px (2^3 = 8)
}
This content originally appeared on DEV Community and was authored by Fernando
Fernando | Sciencx (2024-06-20T03:50:03+00:00) LO BASICO DE SASS. Retrieved from https://www.scien.cx/2024/06/20/lo-basico-de-sass/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.