Resumen
Sumario Apuntes de curso SASS/SCSS
- Institución
- Desarrollo De Aplicaciones Web
Resumen de la materia con ejemplos, diseño web con SASS / SCSS, requiere conocimiento de CSS.
[Mostrar más]Vista previa 2 fuera de 9 páginas
Vista previa 2 fuera de 9 páginas
Añadir al carritoVendedor
Seguir
Vista previa del contenido
Curso de SASS (sass/scss)SCSS, también conocido como Sassy CSS, es un preprocesador de CSS. Fue diseñado para
facilitar la tarea de escribir CSS al agregar características avanzadas como variables,
anidamiento, mixins y más.
Aquí te dejo una breve descripción de estas características:
Variables: Permiten definir valores que pueden ser reutilizados a lo largo de la hoja de
estilo.
Anidamiento: Facilita la organización y legibilidad del código CSS permitiendo anidar
selectores.
Mixins: Son un tipo de función que acepta argumentos y se puede reutilizar a lo largo de
todo el código.
El SCSS funciona generando archivos CSS estándar que pueden ser interpretados por
cualquier navegador web2. Aunque CSS y SCSS buscan el mismo objetivo de crear aplicaciones
web visualmente atractivas y bien organizadas, el uso de SCSS puede simplificar y mejorar el flujo
de trabajo de un desarrollador.
Aquí tienes un ejemplo de cómo se ve el código SCSS:
SCSS CSS
$color-principal: #333; body {
color: #333;
body { font-family: Arial, sans-serif;
color: $color-principal; font-size: 0.9em;
font: { }
family: Arial, sans-serif; body p {
size: 0.9em; color: #999;
} }
p{
color: lighten($color-principal, 20%);
}
}
Como puedes ver, SCSS permite una escritura más eficiente y organizada del código CSS.
Para compilar un archivo SCSS a CSS usando Ruby, necesitarás utilizar la gema sass.
Aquí te dejo los pasos para hacerlo:
1. Instala la gema sass. Si aún no la tienes instalada, puedes hacerlo ejecutando el siguiente
comando en tu terminal:
gem install sass
2. Compila tu archivo SCSS. Una vez que tienes la gema instalada, puedes compilar tu
archivo SCSS a CSS con el siguiente comando:
sass input.scss:output.css
En este comando, donde "input.scss" es el nombre de tu archivo SCSS y
"output.css" es el nombre del archivo CSS que se generará el cual debe estar
vinculado por medio del query "link" en html para que los estilados surtan efecto.
3. Ejecuta el comando en ruby [sass --watch input.scss:output.css] Para que todo cambio
que se realice en el input.scss sea compilado en tiempo real al output.css.
, VARIABLES
Las variables en SCSS, al igual que en muchos lenguajes de programación, permiten
almacenar un valor que luego se puede reutilizar a lo largo de todo el documento SCSS. Las
variables en SCSS comienzan con el carácter $.
Las variables son útiles para almacenar valores que se utilizan con frecuencia, como
colores, tamaños de fuente, márgenes, etc. Esto facilita la codificación y el mantenimiento del
código CSS, creando diseños consistentes.
Aquí tienes un ejemplo de cómo se definen las variables en SCSS:
$color-primario: #55A;
$color-secundario: #6B6;
$color-texto: #666;
$espaciado-estandar: 10px;
$espaciado-doble: 20px;
$fuente-normal: 1em;
$fuente-pequena: 0.8em;
$fuente-grande: 1.4em;
$tipografia-general: arial, verdana, sans-serif;
$tipografia-alternativa: 'Times New Roman', Times, serif;
En este código, se definen varias variables, como $color-primario, $color-secundario,
$color-texto, etc., que luego se pueden utilizar en todo el documento SCSS.
Es importante mencionar que las variables SCSS se compilan en CSS estándar, lo que
significa que no se incluyen en la salida CSS. Esto permite que el CSS resultante sea compatible
con todos los navegadores.
Los beneficios de comprar resúmenes en Stuvia estan en línea:
Garantiza la calidad de los comentarios
Compradores de Stuvia evaluaron más de 700.000 resúmenes. Así estas seguro que compras los mejores documentos!
Compra fácil y rápido
Puedes pagar rápidamente y en una vez con iDeal, tarjeta de crédito o con tu crédito de Stuvia. Sin tener que hacerte miembro.
Enfócate en lo más importante
Tus compañeros escriben los resúmenes. Por eso tienes la seguridad que tienes un resumen actual y confiable. Así llegas a la conclusión rapidamente!
Preguntas frecuentes
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
100% de satisfacción garantizada: ¿Cómo funciona?
Nuestra garantía de satisfacción le asegura que siempre encontrará un documento de estudio a tu medida. Tu rellenas un formulario y nuestro equipo de atención al cliente se encarga del resto.
Who am I buying this summary from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller enriquebrizuela. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy this summary for 5,39 €. You're not tied to anything after your purchase.
Can Stuvia be trusted?
4.6 stars on Google & Trustpilot (+1000 reviews)
45,681 summaries were sold in the last 30 days
Founded in 2010, the go-to place to buy summaries for 14 years now