Scss kind: Resolving browser prefix issues in CSS

In the CSS for the browser, the new features always add a -webkit,-o, -moz to adapt to the browser, write the annoyance, look also bloated, so that the readability of the CSS is reduced, the following shadow as an example, How to use Scss to make our CSS look more concise. I use the IDE for Intellij_idea, about scss How to use, go out left to the shadow for example: When you write in Test.scss:

1 @import "function";//Introducing a custom Function function 2 Div {3  width: 200px;  4  height: 200px;  5  margin: 40px;  6  @include box-shadow (1px,3px,10px,0, #48AFF3); 7 }

is automatically generated: test.css

{  width: 200px;   height: 200px;   margin: 40px;   -webkit-box-shadow: 1px 3px 10px 0 #48AFF3;   -o-box-shadow: 1px 3px 10px 0 #48AFF3;   -moz-box-shadow: 1px 3px 10px 0 #48AFF3;   box-shadow: 1px 3px 10px 0 #48AFF3;} /* */

As follows: Then reference the CSS in HTML to

Attached:function.scss

1 //Shadow (horizontal shift value, vertical shift value, shadow blur value, Shadow epitaxial value, color) 2  {3  -webkit-box-shadow: $h $v $vage $extende $color;  4  -o-box-shadow: $h $v $vage $extende $color;  5  -moz-box-shadow:  $h $v $vage $extende $color;  6  box-shadow: $h $v $vage $extende $color;  7 }

When you use other new features, you may want to encapsulate the method call, a hard time, after easy, to be a happy caller.

Scss kind: Resolving browser prefix issues in CSS