Compass - Browser Support

style.scss

@import "compass";

$debug-browser-support: true;

p{
  border: 2px solid black;
  @include border-radius(12px);
}

a{
  @include opacity(0.5);
  @include single-transition(all, 5s);
  &:hover {
    font-size: 28px;
    color:red;
  }
}

output:

/* line 5, ../sass/style.scss */p {
  border: 2px solid black;
  /* Capability border-radius is prefixed with -moz because 0.25036% of users need it which is more than the threshold of 0.1%. */  /* Creating new -moz context. */  -moz-border-radius: 12px;
  /* Capability border-radius is not prefixed with -ms because 0% of users are affected which is less than the threshold of 0.1. */  /* Capability border-radius is not prefixed with -o because 0% of users are affected which is less than the threshold of 0.1. */  /* Capability border-radius is prefixed with -webkit because 0.1583% of users need it which is more than the threshold of 0.1%. */  /* Creating new -webkit context. */  -webkit-border-radius: 12px;
  border-radius: 12px;
}

/* line 10, ../sass/style.scss */
a {
  /* Content for ie 8.  Min version: unspecified.  User threshold to keep: 0.1%. If ie 8 are omitted: 4.46163%. */  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
  /* Capability css-transitions is prefixed with -moz because 0.60801% of users need it which is more than the threshold of 0.1%. */  /* Creating new -moz context. */  -moz-transition: all 5s;
  /* Capability css-transitions is not prefixed with -ms because 0% of users are affected which is less than the threshold of 0.1. */  /* Capability css-transitions is prefixed with -o because 0.10183% of users need it which is more than the threshold of 0.1%. */  /* Creating new -o context. */  -o-transition: all 5s;
  /* Capability css-transitions is prefixed with -webkit because 9.62358% of users need it which is more than the threshold of 0.1%. */  /* Creating new -webkit context. */  -webkit-transition: all 5s;
  transition: all 5s;
}
/* line 13, ../sass/style.scss */a:hover {  font-size: 28px;
  color: red;
}

****************************************
If we add $border-radius-threshold: 0.5;

/* line 6, ../sass/style.scss */
p {
  border: 2px solid black;
  /* Capability border-radius is not prefixed with -moz because 0.25036% of users are affected which is less than the threshold of 0.5. */  /* Capability border-radius is not prefixed with -ms because 0% of users are affected which is less than the threshold of 0.5. */  /* Capability border-radius is not prefixed with -o because 0% of users are affected which is less than the threshold of 0.5. */  /* Capability border-radius is not prefixed with -webkit because 0.1583% of users are affected which is less than the threshold of 0.5. */  border-radius: 12px;
}

/* line 11, ../sass/style.scss */
a {
  /* Content for ie 8.  Min version: unspecified.  User threshold to keep: 0.1%. If ie 8 are omitted: 4.46163%. */  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
  /* Capability css-transitions is prefixed with -moz because 0.60801% of users need it which is more than the threshold of 0.1%. */  /* Creating new -moz context. */  -moz-transition: all 5s;
  /* Capability css-transitions is not prefixed with -ms because 0% of users are affected which is less than the threshold of 0.1. */  /* Capability css-transitions is prefixed with -o because 0.10183% of users need it which is more than the threshold of 0.1%. */  /* Creating new -o context. */  -o-transition: all 5s;
  /* Capability css-transitions is prefixed with -webkit because 9.62358% of users need it which is more than the threshold of 0.1%. */  /* Creating new -webkit context. */  -webkit-transition: all 5s;
  transition: all 5s;
}
/* line 14, ../sass/style.scss */
a:hover {
  font-size: 28px;
  color: red;
}

Yorumlar

Bu blogdaki popüler yayınlar

Angular Material Design Mat-Select Unit Test

@SerializedName and @Expose annotations