CSS preprocessor (SASS) : HOW TO in Bubble?


How do I integrate in an Bubble HTML element the folowing SCSS+HTML :

Properly done we should end up displaying this radial indicator:


<div class="pie pie--63 pie--disc">63%</div>


@mixin pie ($percent, $fgcolor, $bgcolor) {
    background-image: linear-gradient(45+(3.6deg * $percent), $fgcolor 50%, $bgcolor 50%);
    border-color:  $bgcolor;

    @if ($percent > 25) {
      border-top-color: $fgcolor;
    } @else {
      border-top-color: rgba(0,0,0,0);
    @if ($percent > 50) {
      border-right-color: $fgcolor
    } @elseif ($percent > 25) {
      border-right-color: rgba(0,0,0,0);
    @if ($percent > 75) {
      border-bottom-color: $fgcolor
    } @elseif ($percent > 50) {
      border-bottom-color: rgba(0,0,0,0);
    @if ($percent > 100) {
      border-left-color:  $fgcolor
    } @elseif ($percent > 75) {
      border-left-color: rgba(0,0,0,0);

body {
  font:100%/1.5 georgia, arial;
.pie {
  position: relative;
  display: inline-block;
  width: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 130%;
  margin: 10px;
  color: #fff;

  &:before, &:after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
  &:before {
    background-origin: border-box;
    transform: rotate(45deg);
    border-width: 50px;
    border-style: solid;

.pie--disc {
  color: #000;
.pie--disc:after {
  background: #fff;

.pie--15:before {
  @include pie(15, #d44, #a11);
.pie--63:before {
  @include pie(63, #fc3, #c80);
.pie--35:before {
  @include pie(35, #ac0, #080);
.pie--79:before {
  @include pie(79, #0ac, #058);

You can compile the SAAS code with http://www.cssportal.com/scss-to-css/ and then put the compiled CSS output within style tags.

Then if you paste the HTML and CSS (with style tags) into the Bubble HTML element, you should get the required output.

I tried this here:

and got the output

This looks great. I can’t seem to see the editor. Is it private?

@scottb50 sorry the app-editor was set to private, you can view it now.

@patrick.gouraud you might want to check out the JustGage plugin by @jarrad. If you’re using charts and gages extensively in your app, this gives you some pretty sweet options!

This link should let you see it:

[edit] hmmm… it doesn’t work when I drop the link directly. Let’s try like this.
sassembed Editor

nice plugins, thanks @djwideman!

@rico.trevisan, you replaced the & with & in the editor link and it works . Am wondering why sharing the bubble app editor URL directly doesn’t work…

Indeed, something about how it handles the stuff after the “?” in an URL breaks the link.

OK, maybe someone from the Bubble team can comment.

I have seen this problem in few other posts as well.

Trying to access someone else’s shared/public app editor link leads me to the https://bubble.io/home page instead (unless I replace the “& + amp;” with “&” in the url).

I think it is a problem with the forum software (which the gents from Bubble do not build).

1 Like

oh, OK.

This topic was automatically closed after 70 days. New replies are no longer allowed.