Cómo empezar con SASS

Sep 12, 2025
Cómo
[dieciséis]

Hablar con descaro a Es una herramienta poderosa que ofrece muchas características de otros lenguajes de programación a CSS, como funciones, variables y bucles, además de traer sus propias características intuitivas, como mezcladas, anidación y parciales para nombrar algunos.

En este tutorial, estaremos creando iconos sociales utilizando bucles de Sass, Mixins y funciones. También estaremos utilizando el poderoso anidamiento disponible en SASS.

  • ¿Qué es el SASS?

Estaremos creando una lista en SASS para generar nuestros iconos sociales, lo que consistirá en el nombre de clase, la referencia de fuentes y el color primero, y luego la información sobre herramientas.

Y usaremos mezclinins para crear consultas de medios reutilizables y crear una función para convertir un valor de píxeles en un valor de em. Para hacer esto, también crearemos una variable para nuestro tamaño de fuente de base.

Hay varias formas de instalar y usar SASS dependiendo de su sistema y sus necesidades de herramientas de compilación, se pueden encontrar más detalles aquí - Sin embargo, usaremos Codepen para compilar nuestros SASS en CSS para mantener las cosas lo más simples posible.

Para aprovechar verdaderamente el poder de los SASS y no se convierte en un lío de especificidad y complejidad, se requiere una comprensión sólida de CSS. El sabor particular de SASS que usaremos es SCSS (Sassy CSS), lo que significa que seguiremos usando los soportes rizados {} en nuestro código de SASS.

Obtener los archivos tutoriales

Para descargar los archivos de ejemplo para este tutorial, vaya a Filesilo , seleccione cosas gratis y contenido gratis junto al tutorial. Nota: Los usuarios por primera vez deberán registrarse para usar Filesilo.

01. Configure su COTEPEN CSS

[sesenta y cinco]

[dieciséis] Conseguir su configuración CSS CSS correctamente es clave

Lo primero que tendremos que hacer es. crear una nueva pluma y cambie algunas de las configuraciones predeterminadas para el editor CSS en Codepen. Cambiaremos el preprocesador CSS a SCSS y activaremos Normalizar y AutoPrefixer.

02. Comienza a escribir un código

Ahora, hemos establecido todo, podemos comenzar a escribir un código. Dentro del editor HTML, crearemos un contenedor y una serie de elementos dentro que contienen el enlace e icono para cada uno de nuestros iconos.

Los nombres utilizados aquí se utilizarán en nuestra lista de SASS como referencia en CSS. También utilizaremos la convención de denominación BEM para nuestros nombres de clase. 

 & lt; div clase = "Social__Container" & GT;
  & lt; div clase = "social__item" & gt;
  & lt; un objetivo = "_ en blanco" href = "..."
  clase = "Social__icon - Twitter" & GT;
  & lt; i class = "icon - twitter" & gt; & lt; / i & gt; / i & gt;
  & lt; / a & gt;
  & lt; / DIV & GT;
  ...
& lt; / DIV & GT;

03. Establecer estilos básicos

Mudarse al editor CSS. Comenzaremos con increíble de fuentes, configurando una variable para nuestro tamaño de fuente de base y algunos estilos básicos para la página. 

 @Import URL (http://srt.lt/w8yt8);
// Variables
$ Tamaño de fuente de base: 16px;
// Styling básico
cuerpo {
  Tamaño de fuente: $ Base-Tamaño de fuente;
  ...
}

04. Crea una función básica.

A continuación, crearemos una función básica para convertir un valor de píxeles a un valor de EM utilizando nuestra variable '$ Fuentes' $.

Las funciones en SASS se crean utilizando '@Function' seguido del nombre de la función y la entrada utilizada para realizar la función.

Luego, dentro de la Declaración, usamos '@Return' para generar el valor al usar la función. El '# {}' que rodea el cálculo se utiliza para interpolación . 

 // Funciones
@function px-to-em-em ($ píxeles) {
@return # {$ pixels / $ base-talla de fuente} em;
}

05. Hacer mixinins

Continuando con nuestra configuración Crearemos mezclinins para simples consultas de medios móviles utilizando nuestra función 'PX-AM', que pasaremos en un valor PX para devolver un valor de EM.

Las mezclas se crean utilizando '@mixin' seguido de un nombre para la mezcla. Luego, dentro de la Declaración, usamos '@Content' para generar el código que ponemos dentro de la mezcla cuando lo llamamos más adelante en nuestra base de código. 

 @mixin viewport - grande {
  @media solo pantalla y
  (Min-ancho: px-to-em (1680px)) {
  @contenido;
}}
@mixin viewport - medio {
  @media solo pantalla y
  (Min-Ancho: PX-A-EM (1080px)) {
  @contenido;
}}

06. Configure una lista de SASS

El último paso en nuestra configuración es crear una lista. Las listas en SASS se crean utilizando una variable; Después de eso, la sintaxis exacta está bastante suelta, aceptando una amplia variedad de maneras de definirlo .

Dentro de la variable definiremos el nombre de la clase, el valor de Unicode y el color para cada icono, separándolos con una coma, dentro de paréntesis. 

 $ Icon-List: (
  VIMEO "\ F27D" # 1AB7EA,
  Twitter "\ F099" # 1DA1F2,
  ...
  GitHub "\ F113" # 333,
  RSS "\ F09E" # F26522
);

07. Muestra tus iconos en una fila

Para que nuestros iconos sociales muestren en fila, agregaremos algunos CSS simples a cada uno de sus contenedores. 

 .social__item {
  Pantalla: bloque en línea;
  Margen-derecha: 0.05EM;
}

08. Crea un estilo de icono compartido.

Para minimizar la cantidad de CSS que emitimos, vamos a utilizar un selector de CSS3 para encontrar todas las clases que comienzan con 'Icon' y cree un estilo compartido para ellos. 

 [Clase ^ = "icono"] {
  Fuente-familia: 'Fontawesome';
  Hablar: Ninguno;
  Estilo de fuente: normal;
  Peso de fuente: normal;
  Variante de fuentes: normal;
  Transformación de texto: Ninguno;
  Línea de altura: 1;
  -Webkit-Font-alising: antialiased;
  -MOZ-OSX-FONT-SAIPE: escala de grises; }

09. Fondos de botón de estilo up

Usando el mismo método, haremos lo mismo para los botones que definen nuestros valores en 'EM', lo que nos permite cambiar de tamaño del recipiente. 

 [Clase ^ = "Social__icon"] {
  Tamaño de fuente: 1EM; Ancho: 2EM; Altura: 2EM;
  Color de fondo: # 333;
  color blanco;
  Decoración de texto: Ninguno;
  Radio fronterizo: 100%;
  Text-alinec: Centro;
  PANTALLA: FLEX;
  Alinee-Artículos: Centro;
  Justify-Contenido: Centro;
}

10. @each lazo para nuestros iconos

We’ve used our loop to generate the icons for each of our social icons

[dieciséis] Hemos usado nuestro bucle para generar los iconos para cada uno de nuestros iconos sociales.

Ahora tenemos todos nuestros estilos de base, podemos usar nuestra lista para generar la CSS específica para cada icono.

Para crear un bucle en SASS, usamos '@each' seguido de nombres por cada valor de cada elemento: '$ Ícono', '$ Unicode' y '$ Icon-Background', seguido de la palabra 'in' y luego el nombre de la lista.

Dentro del bucle, aplicaremos el valor '$ Unicode' al elemento Pseudo de 'antes' de cada ícono que hemos creado en el HTML, lo que permite el estilo compartido que creamos anteriormente para cuidar todos los otros estilos necesarios. 

 @EACH $ ICON, $ UNICODE, $ Icono-Fondo
en $ icon-list {
  .icon - # {$ icon} {
  & amp; :: antes {
  Contenido: $ Unicode;
  }
  }
}

11. @each lazo para nuestros colores de fondo

We’ve added the background colours as well as the icons to our '@each' loop

[dieciséis] Hemos agregado los colores de fondo, así como los iconos a nuestro bucle '@each'

Los iconos ahora están trabajando, pero todavía tenemos el color de fondo de la libreta. Agregaremos un poco más de código a nuestra lista para solucionarlo. Utilizando el mismo método que la anterior emitiremos el nombre '$ Ícono' pero esta vez en las clases 'Social__icon' y dentro de ese color '$ Icono-Fondo'. 

 @EACH $ ICON, $ UNICODE, $ Icono-Fondo
en $ icon-list {
  ...
  .social__icon - # {$ icon} {
  Fondo-color: $ Icono-Fondo;
  }
}

12. Usa las mezclas.

Using our mixins we've updated the font size of the container to change the icons size depending on the viewport width

[dieciséis] Usando nuestras mezclas, hemos actualizado el tamaño de fuente del contenedor para cambiar el tamaño de los iconos dependiendo del ancho de la ventana

El uso de los mixins hemos creado anteriormente y debido a que LABRÓ los iconos usando los valores 'em' podemos aplicar una fuente de tamaño al contenedor y aumentar el uso de nuestra mixin medios consulta utilizando '@include' y el nombre del mixin seguido por el Código que queremos incluir en la consulta de medios. 

 .Social__Container {
  Tamaño de fuente: 1EM;
  @Include viewport - Medium {
  Tamaño de fuente: 1.5EM;
  }
  @Include viewport - grande {
  Tamaño de fuente: 2EM;
  }}

13. Añadir estados de interacción y funciones incorporadas.

Podemos agregar algo de interactividad a nuestros botones cambiando el color de fondo cuando se interactúa el botón con el mouse o el teclado.

SASS tiene una serie de Funciones de color incorporadas Permitiéndonos tomar el color de fondo que hemos establecido en nuestra lista y mezclarlo con negro para oscurecer el botón, cuando interactúe con. 

 icono - # {$ icon} {
  Fondo-color: $ Icono-Fondo;
  & amp;: Hover,
  & amp;: enfoque,
  & amp;: activo {
  color de fondo:
  mezclar (negro, $ icono-fondo, 15%);
  }}

14. Transición del color de fondo.

También podemos utilizar la propiedad 'Transición' en CSS para animar las diferencias entre los colores de fondo. Podríamos usar el valor 'todo', pero eso es caro en términos de rendimiento y no nos permitiría transitar diferentes valores en diferentes tiempos y funciones de tiempo. 

 [Clase ^ = "Social__icon"] {
  ...
  Transición: color de fondo
  150ms aliviar
  ;
}

15. Añadir más efectos de transición.

Al agregar un posicionamiento 'relativo' a los botones y un valor superior y agregar 'top' a nuestra propiedad 'transición' podemos preparar los elementos para una mayor interacción. 

 [Clase ^ = "Social__icon"] {
  Posición: Relativo;
  TOP: 0;
  ...
  Transición: color de fondo
   150 ms aliviado,
    Top 250ms lineal
  ; }

16. Mueve los botones en la interacción.

Para esta interacción, no hay nada necesario para crearlo, por lo tanto, podemos agregar el código a la clase compartida. Al aplicar un valor superior negativo y eliminar el esquema, tenemos una señal visual aún más clara de la interacción. 

 [Clase ^ = "Social__icon"] {
  ...
  & amp;: Hover,
  & amp;: enfoque,
  & amp;: activo {
  Esquema: Ninguno;
  TOP: -0.25EM;
  }}

17. Añadir una sombra de caída.

Using transition properties we’ve animated any interaction with the buttons – moving them up, darkening the background and adding a drop shadow

[dieciséis] Usando las propiedades de transición, hemos animado cualquier interacción con los botones, moviéndolos, oscureciendo el fondo y agregando una sombra de caída

También podemos usar el mismo método para crear y animar una 'Box-Shadow': agregar un poco más de profundidad a la interacción, cambiando la altura vertical de la sombra al mismo tiempo que el valor superior. 

 Box-Shadow:
  0 0 0.25Em -0.25M RGBA (0,0,0,0.2);
& amp;: Hover,
& amp;: enfoque,
& amp;: activo {
  ...
  sombra de la caja:
  0 0.5EM 0.25ET -0.25M RGBA (0,0,0,0.3);
}

18. Añadir información sobre herramientas

Podemos agregar fácilmente información sobre herramientas con CSS para agregar más claridad para nuestros usuarios. Lo primero que haremos es agregar el valor de la información sobre herramientas a la lista. Asegurarse de escribirlos en comillas para permitir el uso de espacios si es necesario. 

 $ Icon-List: (
  Vimeo "Vimeo" "\ F27D" # 1AB7EA,
  Twitter "Twitter" "\ F099" # 1DA1F2,
  ...
  GitHub "GitHub" "" \ F113 "# 333,
  RSS "RSS" "\ F09E" # F26522,
);

19. Modificar el bucle de @each

Debido a la adición a nuestra lista, tendremos que modificar nuestro bucle '@each' para incluir el valor de la información sobre herramientas ('$ nombre'). Luego podemos emitir ese nombre como el contenido del elemento 'Antes de Pseudo' en nuestros botones. 

 @each $ icon, $ nombre, $ unicode,
  $ icon-background in $ icon-list {
  ...
  .social__icon - # {$ icon} {
  ...
  & amp; :: antes {
  Contenido: '# {$ nombre}';
  }
  }}

20. Estilo el elemento pseudo.

We've added some basic styles to the tooltips again adding transitions to animate them into position

[dieciséis] Hemos agregado algunos estilos básicos a las siguientes herramientas, agregando nuevamente transiciones para animarlos a la posición

Ahora tenemos el nombre de cada elemento que se muestra en la pantalla, necesitamos que estigen el elemento, agregando un color de fondo, relleno y otros elementos de estilo, así como posicionando el elemento y preparándolo para las transiciones y modificando la opacidad y los valores principales en la interacción. . 

 & amp; :: antes {...
  TOP: -3.5EM;
  Opacidad: 0;
  transición:
  Top 250ms lineal, opacidad 150ms lineal 150ms;
}
& amp;: Hover, ... {...
  & amp; :: antes {
  Opacidad: 1;
  TOP: -2.5EM; }
}

21. Estilo el elemento pseudo.

Usaremos CSS Triangles Para crear la parte inferior de nuestras herramientas, posicionando nuevamente el elemento para la preparación para las transiciones, mediante la transición de la opacidad y los valores principales en diferentes tiempos.

Al agregar un retraso, conseguimos una animación que consiste en la mesa de herramientas que se desvanece y se mueve hacia abajo. 

 & amp; :: después de {...
  TOP: -1.9EM;
  Opacidad: 0;
  transición:
  Top 250ms lineal, opacidad 150ms lineal 150ms;
}
& amp;: Hover, ... {...
  & amp; :: después {
  Opacidad: 1;
  TOP: -0.9EM; }
}

Se puede encontrar la colección de pisos de tutorial de CodeEpen aquí .

Este artículo apareció originalmente en la revista Web Designer Magazine 264. Cómpralo aquí .

Leer más:

  • ¿Qué es el SASS?
  • 8 Características de CodePen que no sabías
  • 5 consejos para CSS super rápido

Cómo - Artículos más populares

Imagen de trabajo Mascarilla Magic con Houdini

Cómo Sep 12, 2025

[dieciséis] Si está interesado en aprender más sobre Houdini, asegúrese de asistir a Generar New York (24-25 de abril). En la c..

Diseñador de afinidad: Cómo usar la persona de exportación

Cómo Sep 12, 2025

[dieciséis] La afinidad del diseñador es una herramienta de edición de vectores popular. Además de las versiones de Mac y Windows, ..

Mejora tus habilidades de arte conceptuales en Photoshop

Cómo Sep 12, 2025

[dieciséis] Para este taller, me gustaría mostrarle una forma realmente divertida de dibujar personajes de su imaginación. Te mostra..

Cómo crear un robot de PaperCraft

Cómo Sep 12, 2025

[dieciséis] Habiendo graduado el verano pasado, todavía soy bastante nuevo en el mundo de la ilustración independiente. Sin embargo,..

Crea una imagen de paralaje interactivo

Cómo Sep 12, 2025

Desplazamiento de paralaje ya no es la capturadora de atención garantizada que solía ser, pero hay otras formas de usar técnicas de p..

Modelando una nave espacial para el diseño de juego

Cómo Sep 12, 2025

[dieciséis] Con Espacio fracturado Siendo lo que es: un juego de combate de equipo gratuito para jugar: los barcos y sus ha..

15 consejos para la optimización de dispositivos cruzados

Cómo Sep 12, 2025

[dieciséis] Diseño para todos los dispositivos! Anna Dahlström estará hablando de la importancia de ..

Explora código creativo con p5.js

Cómo Sep 12, 2025

[dieciséis] Pasar un día con Brendan Dawes a Generar londres y descubre có..

Categorías