Summary
Sumario Apuntes de curso SASS/SCSS
- Course
- Institution
Resumen de la materia con ejemplos, diseño web con SASS / SCSS, requiere conocimiento de CSS.
[Show more]
Seller
Follow
enriquebrizuela
Content preview
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.
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
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.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes 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 these notes for $5.49. You're not tied to anything after your purchase.
Can Stuvia be trusted?
4.6 stars on Google & Trustpilot (+1000 reviews)
67096 documents were sold in the last 30 days
Founded in 2010, the go-to place to buy study notes for 14 years now