Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
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 3.9.2019 13:23
 
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.