7
¿Entonces sería en este caso .show > & equivalente a .show > .nav-pills .nav-link?
Sí.
¿Se hereda todas los selectores padres con &?
Sí.
Según la documentación oficial (Inglés):
Sometimes it's useful to use a nested rule's parent selector in other
ways than the default. For instance, you might want to have special
styles for when ...
5
CSS es el lenguaje de estilo que cualquier navegador entiende para diseñar páginas web.
SCSS es un tipo especial de archivo para SASS, un programa escrito en Ruby que ensambla hojas de estilo CSS para un navegador, y para información SASS agrega muchas funciones adicionales a las variables de tipo CSS, anidamiento y más, lo que hace que escribir CSS sea más ...
4
Rápidamente se me ocurre que sería una muy buena opción para usar calc() para variar la posición a la izquierda left, tomando como referencia el 50% y restándole la mitad del ancho que ocupa la "flecha". Seguramente quedarían pendiente algunos ajustes menores, pero la idea está plasmada a continuación:
.container1 {
color: #727176;
background-...
respondida el 6 sep. 17 a las 15:10
Shaz
28.1k1818 medallas de oro3636 medallas de plata5858 medallas de bronce
4
Acabo de correr la task gulp-sass, no gulp-serve como lo venía haciendo y pude ver en el error log que había un conflicto con la gema sass (error que no me salía en el log cuando corría gulp-serve, el cuál también utilizaba la task de sass)
Raro porque yo había instalado la gema desde el Gemfile anteriormente, así que volví a hacer un bundle install y volví ...
3
Sass es un metalenguaje de CSS, es decir, es un lenguaje de script que es traducido a CSS. Del mismo modo que, por ejemplo, los cambios hechos en un código fuente en C no se reflejan en el programa hasta que se compila, los cambios que haces en Sass/SCSS no se reflejan automáticamente en el fichero CSS, sino que deben traducirse primero.
Entonces para ...
respondida el 7 nov. 18 a las 17:16
3
Vale ya di con la solución. Para que nth-child() admita esa variable, la tengo que poner como #{$i}. Dejo un captura de pantalla por si a alguien le pasa algo similar.
respondida el 2 ago. 18 a las 16:17
Carlos Rayón Álvarez
31322 medallas de oro55 medallas de plata1313 medallas de bronce
3
Realmente creo que lo que buscas no existe. Yo también he buscado más de una vez este comportamiento (hacer referencia al elemento abuelo en vez de al padre pero no he podido encontrar nada).
Sin embargo, según tu ejemplo puedes cambiar de sentido los bloques del SASS:
.contenedor {
&.pausado {
.botones {
.play {
...
respondida el 4 abr. 17 a las 13:59
Francisco Romero
15.9k44 medallas de oro2727 medallas de plata5656 medallas de bronce
3
Juan, debes tener un problema sea con el archivo de fontawesome que estás usando, sea con restricciones del navegador, o con las rutas u otra cosa.
De todos modos en la página de FA, ellos dan una opción de instalar mediante un archivo javascript que se encargará de cargar los iconos en local.
He probado con ese solo archivo y el código me ha funcionado.
...
respondida el 13 feb. 18 a las 15:11
A. Cedano
73.9k1818 medallas de oro100100 medallas de plata196196 medallas de bronce
3
El @content lo he usad en mixin con un enfoque similar al que propones:
Para trabajar mediaqueries donde desee como este ejemplo:
@mixin desde($size){
@if map-has-key($breakpoints,$size){
// Si el parámetro es el nombre de un tamaño, se extrae desde el map
@media screen and (min-width: map-get($breakpoints,$size)){
@content;...
3
Según mi experiencia lo más cercano que hay sería usar el & o referenciador de selectores superiores (padres):
input {
&[type=text], &[type=password], &[type=email] {
&:focus {
border: 3px solid #AFDDFB;
transition: 100ms linear;
}
}
}
respondida el 10 sep. 16 a las 21:35
Shaz
28.1k1818 medallas de oro3636 medallas de plata5858 medallas de bronce
3
Editado
El uso de content blocks tal y como menciona @blonfu puede llegar a ser muy útil, con la etiqueta @content podrás extender las capacidades de tu mixin.
En la documentación de sass podrás ver un excelente ejemplo que utiliza el content para aumentar la flexibilidad de tu mixin, para complementar el ejemplo que te ofrezco podemos añadir al mixin ...
respondida el 2 oct. 19 a las 5:46
Daniel Rodríguez Meza
1,38133 medallas de plata1111 medallas de bronce
3
Media Queries
No funcionó porque se utilizó max-with en lugar de max-width, ya que la primera es una Media features no válida.
Aquí la solución al problema Media Queries:
@mixin respond ($breakpoint) {
@if $breakpoint == phone {
@media only screen and (max-width: 37.5em) { @content };
}
@if $breakpoint == tab-port {
@media only screen and ...
respondida el 18 ene. 20 a las 3:29
David E. Luna M.
2,37499 medallas de plata2424 medallas de bronce
2
Te falta poner rel="stylesheet" en el link que hace referencia a font-awesome.
Tiene que quedar así:
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap....
2
Puedes segmentar tu estilo css en varios archivos directamente.
Por ejemplo, en el archivo app.vue ( o como se llame su .vue inicial ) puede añadir lo siguiente:
<style lang="scss">
@import './styles/build.css';
// or
@import './styles/build.scss';
</style>
Ahora en el directorio styles, el archivo build será importado:
.example1 {
}
...
2
Traducción de la respuesta de juzraai en un cross-post en el sitio en inglés
Puedes generar esos selectores & ~ & ... usando un bucle for, interpolación de cadenas y concatenación:
// función para repetir una cadena:
@function r($string, $times) {
$result: "";
@if $times >= 1 {
@for $i from 1 through $times {
$result: $result + $...
2
Edit
para poner el primer elemento al 0% y el último elemento al 100% en la solución que encontré es necesario saber cuantos elementos hay. Tal vez se pueda refinar
HTML
<body>
<div class="mycontainer">
<div class="line">
<div class="step step-5">
<clr-icon class="circle circle-1">1</clr-icon>
...
respondida el 23 abr. 18 a las 9:31
alo Malbarez
8,53122 medallas de oro88 medallas de plata2929 medallas de bronce
2
Instala nuevamente el node-sass con esta version
npm install node-sass@4.7.2
si te genera algun problema al momento de la instalacion prueba lo siguiente
npm rebuild node-sass@4.7.2 --force
si con esto te sigue dando problema el node-sass te guio a realizarlo manualmente.
ve al repositorio en github: https://github.com/sass/node-sass
procede a realizar ...
2
Lo mas simple y correcto seria compilar en local para obtener los archivos estáticos (CSS, JavaScript, fuentes e imágenes) listos para producción.
Ya que para una aplicación en Laravel que no dependa de librerías JavaScript para el servidor es innecesario instalar nodejs y npm en producción.
Compiling Assets (Laravel Mix)
2
El truco está en usar pixels y definir los margenes y rellenos deseados (además de sacarle el estilo lista) al elemento UL. en este ejemplo el left y bottom los puse en pixels, los podes usar en % pero por lo general tenes mas control al usar pixels ( los dispositivos retina o con diferentes pixel ratio hacen la cuenta de donde debería caer el asunto).
....
respondida el 5 jul. 18 a las 23:01
alo Malbarez
8,53122 medallas de oro88 medallas de plata2929 medallas de bronce
2
Nunca he usado SASS, pero mirando la documentación he descubierto la función inspect( ). Usándola, vemos que
a {
color: inspect( map-get( $colors, "darkTurquoise" ) );
}
produce
a {
color: null;
}
Haciendo algunas pruebas mas
$colors: (
darkTurquoise: #000000
);
$themeConfig: (
linkColor: map-get($colors, "darkTurquoise")
);
a {
color:...
respondida el 20 abr. 19 a las 6:42
Trauma
24.7k44 medallas de oro3232 medallas de plata5858 medallas de bronce
2
Como SASS es un lenguaje "Turing Complete" al satisfacer la Regla 110, puedes realizar cualquier calculo o programa computacional usándolo.
Por consecuencia podrías programar absolutamente todo lo que quisieras (con la justa dotación de HTML), y con programar me refiero a realmente programar, por ejemplo he visto gente hacer fractales y pintar el conjunto ...
respondida el 2 may. 20 a las 6:15
Ruslan López
8,85577 medallas de oro2828 medallas de plata5454 medallas de bronce
2
Lo que puedes hacer es utilizar la extension Live Sass Compiler ya que comentas que usas vscode, compila todo el sass del proyecto a la vez, no requiere que tengas ningun paquete de npm instalado, solo la instalas y la activas. Es la forma mas cómoda.
2
Una forma que podrías hacer para optimizar la forma en como compilas es crear un archivo dentro del folder scss llamado main.scss. Dentro de este archivo, debes importar tus archivos scss @import 'boostrapstyles', 'mystyles';. O haces un import para cada uno
@import boostrapstyles;
@import mystyles
Luego debes hacerle el watch a tu archivo main.scss y listo!...
2
Lo primero es conocer cómo se deben declarar las reglas en css:
Las etiquetas se declaran por nombre, sin signos:
div {} Asignará el estilo a todos los elementos con esta etiqueta
p.una-clase {} Aplica a todos los párrafos que tengan la clase <p class="una-clase"></p>
Para definir reglas por ID se antepone #:
#boton {} Aplica a un ...
respondida el 9 feb. a las 17:07
Triby
11.6k22 medallas de oro1010 medallas de plata2828 medallas de bronce
1
Como se menciona en la documentación, descarga el paquete para windows desde su repositorio en github extraelo en el directorio que deseas y luego agregalo a tu PATH en las variables de Windows según se indica aquí
respondida el 4 jul. 18 a las 16:39
Levi Arista
2,61022 medallas de oro1010 medallas de plata2424 medallas de bronce
1
<div style="position:absolute; top:15%; z-index:1;">
<div class="row left ">
<div class="col s12"><p>Blockchain</p></div>
</div>
<div class="row left ">
<div class="col s12"><p>Develop, test, and deploy secure blockchain apps</p></div>
</div>
<div class="row ...
1
El error sucede porque hay un conflicto entre la posición absoluta del botón y el span interno, por lo que yo te recomiendo que no uses top o left para moverlo, prueba con transform: translateX() translateY() o transform: translate(X,Y); debes aplicarlo tanto al boton como al span.
Por cierto, lo puedes hacer también prescindiendo del span, usando pseudo-...
respondida el 17 ene. 18 a las 20:40
Edgar Gutiérrez
3,64077 medallas de plata2323 medallas de bronce
Solo están habilitadas las respuestas de wiki más votadas con una longitud mínima y que no pertenecen a la comunidad
Etiquetas relacionadas
sass × 119css × 63
scss × 30
html × 23
css3 × 17
javascript × 16
nodejs × 13
gulp × 11
reactjs × 8
html5 × 7
npm × 6
webpack × 6
bootstrap × 5
font-awesome × 5
gulp-sass × 5
jquery × 4
angular × 4
vue.js × 4
web × 4
responsive × 4
laravel × 3
ruby × 3
bootstrap-4 × 3
mediaqueries × 3
pug × 3