Sass-syntaxis voor het schrijven van deze waarde

Ik gebruik Sass in een recent project en probeer de volgende code te gebruiken voor afgeronde hoeken die niet werken. Hoe zou ik dit specificeren, zodat elke afgeronde hoek is ingesteld op 8px?

$radius_size:8px;
.rounded-corners {
  -moz-border-radius-topleft: #{$radius_size}px;
  -webkit-border-top-left-radius: #{$radius_size}px;
  border-top-left-radius: #{$radius_size}px;
  -moz-border-radius-topright: #{$radius_size}px;
  -webkit-border-top-right-radius: #{$radius_size}px;
  border-top-right-radius: #{$radius_size}px;
}

Dankje

0
Overweeg het gebruik van Compass + SASS - met de scss grensradiusmix zou je gewoon @include border-radius (8px) gebruiken; en klaar.
toegevoegd de auteur potench, de bron

2 antwoord

Je hebt het gewoon te ingewikkeld gemaakt!

$radius_size: 8px;
.rounded-corners {
  -moz-border-radius-topleft: $radius_size;
  //... and so on ...
}
2
toegevoegd
thx- werkt correct
toegevoegd de auteur timpone, de bron
  1. Seems like you inserting double 'px' parts.
  2. You can use variables without #{}

    $radius_size: 8px;

.rounded-corners {

    -moz-border-radius-topleft: $radius_size;
    -webkit-border-top-left-radius: $radius_size;
    border-top-left-radius: $radius_size;
    -moz-border-radius-topright: $radius_size;
    -webkit-border-top-right-radius: $radius_size;
    border-top-right-radius: $radius_size;
}

Controleer ook deze site voor het online testen van sass

0
toegevoegd
thx - werkt goed
toegevoegd de auteur timpone, de bron