Para usar las variables o propiedades personalizadas de css en sass hay que usar el comodín #{$nombre-variable-sass} para indicar el valor de la custom propertie como podemos ver en el siguiente ejemplo: // Variables SASS $color-bg: #f00; // :root { […]
Con SASS podemos crear una variable y usarla dentro de un determinado selector o clase. Para ello usaremos la interpolación de SASS envolviendo la variable dentro de la expresión #{}: Algunos ejemplo de uso: $nombre: "leon"; .header-#{$nombre} { color: black; […]
Si has tenido problemas al declarar variables SASS/SCSS dentro de la pseudo-clase :root de CSS, es posible que no las estés declarando correctamente en sass. Para usar variables SASS dentro de tu variables CSS y que se compilen correctamente debes […]
Es muy probable que tengamos en SASS unos estilos para una determinada clase (por ejemplo: .test), pero esta a la vez se utilice en diferentes tipos de selector (p, a, div…) y queremos darle estilos diferentes a cada uno de […]
Me lo ha pedido un usuario, y por si alguien más le puede ser de utilidad aquí os dejo el «gulpfile.js» básico que suelo usar solo para maquetar css en mis proyectos. Uso principalmente estos plugins de gulp: sass: todos […]
Configurar en Sublime Text 2-3 los archivos de sass (.scss) para que tengan una sintaxis de colores y autocompletado como si fueran archivos propios de CSS es muy sencillo. Por defecto al abrir un archivo «scss» nos muestra u archivo […]
Colección de los 10 mixins de SASS que más vengo utilizando en la mayoría de proyectos con su correspondiente ejemplo de uso en scss: 1. Media Queries $mobile: 480px; $tabletPortrait: 767px; $tabletLandscape: 1024px; $desktop: 1200px; @mixin breakpoint($media) { @if $media […]
Actualizar Sass o Compass a su última versión estable es tan sencillo como su instalación. Abrimos la consola de Ruby e insertamos los comandos: Para actualizar a la última versión de Sass: gem update sass Para actualizar a la última […]
A continuación un «mixin» para SASS, para hacer un clearfix (un método para quitar floats) al elemento que va a contener elementos flotantes. %clearfix { *zoom: 1; &:before, &:after { content: " "; display: table; } &:after { clear: both; […]