Diskuze: Backend proměnná v sass
Zobrazeno 5 zpráv z 5.
//= Settings::TRACKING_CODE_B ?> //= Settings::TRACKING_CODE ?>
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;
}
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.
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
Zobrazeno 5 zpráv z 5.