November Black Friday C/C++ week
Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Pouze tento týden sleva až 80 % na e-learning týkající se C/C++
Avatar
Fondzee
Člen
Avatar
Fondzee:2. září 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. září 9:55
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3. září 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. září 7:49
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3. září 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. září 7:53
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Fondzee
Člen
Avatar
Fondzee:3. září 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. září 12:51
Avatar
Fondzee
Člen
Avatar
Odpovídá na Peter Mlich
Fondzee:3. září 13:23

viz výše...

Editováno 3. září 13:23
 
Nahoru Odpovědět
3. září 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.