VisualStudioで.scss形式のファイルを使用してブラウザ間で異なるスタイルシートの違いを吸収して保守性をあげる

1.環境の準備

VisualStudioでツール→拡張機能と更新プログラムから"Web Compiler(Created by Mad Kristensen)"をインストールすると.scss形式のファイルを利用可能になります。（他にもLESS,Stylus,JSX形式などが利用可能になります。）

2.複数のブラウザで書き方が異なるCSSの定義をする

WEBサイトプロジェクトを作成し、Common.scssファイルを作成します。

Common.scss

@mixin prop_calc($prop,$value){
    #{$prop}:-webkit-calc(#{$value});
    #{$prop}:-moz-calc(#{$value});
    #{$prop}:calc(#{$value});
}
@mixin word_break($value) {
    -ms-word-break: #{$value};
    word-break: #{$value};
}
@mixin opacity($value) {
    filter: alpha(opacity=$value);
    -moz-opacity: $value * 0.01;
    opacity: $value * 0.01;
}
@mixin box(){
    display: box; /* 標準 */
    display: -moz-box; /* Firefox */
    display: -webkit-box; /* Webkit系 */
    display: -ms-flexbox; /* IE */
}
@mixin box_flex(){
    -webkit-box-flex: 1; /* Safari,Google Chrome用 */
    -moz-box-flex: 1; /* Firefox用 */
    box-flex: 1;
}

これらの定義を利用するコードとして

Common.scss

.box {
    @include box();
}
.transparent-panel {
    @include opacity(60);
}
.menu-popup-panel{
    position:fixed;
    @include prop_calc("height", "100vh - 150px");
    min-height:200px;
}

という感じでスタイルを定義します。

Common.scssファイルを右クリック→Web Compiler→Compile fileでコンパイルが実行でき以下の3つのファイルが作成されます。
・Common.css
・Common.css.map
・Common.min.css

Common.cssを見てみると

Common.css

.box {
    display: box; /* 標準 */
    display: -moz-box; /* Firefox */
    display: -webkit-box; /* Webkit系 */
    display: -ms-flexbox; /* IE */
}
.transparent-panel {
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
}
.menu-popup-panel{
    position:fixed;
    height:-webkit-calc(100vh - 150px);
    height:-moz-calc(100vh - 150px);
    height:calc(100vh - 150px);
    min-height:200px;
}

という感じに展開されます。
複数ブラウザの違いを吸収でき保守性が高まるので困っている人はぜひ.scss形式のファイルを使ってみましょう。