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
Yorum Gönder