FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Fondzee
Člen
Avatar
Fondzee:2.9.2019 9:55

Ahoj,

mohl by někdo poradit jak řešit situaci kdy potřebuji v sass vytvořit vlastní proměnné ?

Úplně jednoduchý příklad:

$border: 1px solid ${border};

.nejaky_div{
        border: $border;
}

Kde '${border}' je beackendem generovaná proměnná (hexa) která se doplní až před vykreslením

Zkusil jsem: Pokoušel jsem se to řešit pomocí css variables což fungovalo ale zas není 100% podpora (IE, opera mobila atp.)

Chci docílit: potřeboval bych aby 'sass-loader' používaný ke kompilaci akceptoval třeba tento zápis 'border: 1px solid ${border}'

 
Odpovědět
2.9.2019 9:55
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3.9.2019 7:49

google = sass class promena

Sass: @extend

https://sass-lang.com/documentation/at-rules/extend
<div class="error error--serious">
  Oh no! You've been hacked!
</div>



.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}
----
.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}
---
.error:hover {
  background-color: #fee;
}

.error--serious {
  @extend .error;
  border-width: 3px;
}
---
.alert:hover, %strong-alert {
  font-weight: bold;
}

%strong-alert:hover {
  color: red;
}
 
Nahoru Odpovědět
3.9.2019 7:49
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3.9.2019 7:53

google = sass class promena
Sass Basics
https://sass-lang.com/guide

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
---
// base.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}
---
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }
---
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

Temi minusky jsem oddelil ruzne priklady z te stranky. Snad ti to pomuze.

 
Nahoru Odpovědět
3.9.2019 7:53
Avatar
Fondzee
Člen
Avatar
Fondzee:3.9.2019 12:51

Asi nechápu jak mi to má pomoci.
Já vím jak použít srandarndní proměnné/extend v sass...

Ale potřebuju aby compiler vzal přesně toto

$border: 1px solid ${border};

Kde ${border}; se doplní až po kompilaci sassu to co ty popisuješ je standardní použití proměnných což není můj případ. Nebo mi něco uniklo ?
Každopádně děkuji za reakci

 
Nahoru Odpovědět
3.9.2019 12:51
Avatar
Fondzee
Člen
Avatar
Odpovídá na Peter Mlich
Fondzee:3.9.2019 13:23

viz výše...

Editováno
 
Nahoru Odpovědět
3.9.2019 13:23
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.