SCSS to CSS compile

SCSS to CSS compiler tool, support to convert SCSS code to CSS code that can work in the browser.

Input SCSS:
Example
// grid vars $grid-columns: 12; $gutter_width: 15px; $grid-large-width-breakpoint: 1200px; $grid-medium-width-breakpoint: 992px; $grid-small-width-breakpoint: 768px; $grid-xsmall-width-breakpoint: 768px; $breakpoints: ( 'xs' '(max-width: #{$grid-xsmall-width-breakpoint})' 768px, // xsmall 's' '(min-width: #{$grid-small-width-breakpoint})' 780px, // small 'm' '(min-width: #{$grid-medium-width-breakpoint})' 1000px, // medium 'l' '(min-width: #{$grid-large-width-breakpoint})' 1200px // large ); $widths: ( '1' '8.33333333%', '2' '16.66666667%', '3' '25%', '4' '33.3333333%', '5' '41.66666667%', '6' '50%', '7' '58.33333333%', '8' '66.66666667%', '9' '75%', '10' '83.33333333%', '11' '91.66666667%', '12' '100%' ); //mixins.scss @mixin font-size($size) { font-size: $size; line-height: $base-line-height*$size; margin: ($size / 2) 0 ($size / 2.5) 0; } // mixin border-radius @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } // mixin box-shadow @mixin box-shadow ($values...) { -webkit-box-shadow: $values; box-shadow: $values; } // mixin box-sizing @mixin box-sizing ($type: border-box) { -webkit-box-sizing: $type; -moz-box-sizing: $type; box-sizing: $type; } // mixin opacity @mixin opacity ($value: 1) { $value-percentage : $value * 100; opacity: $value; filter: alpha(opacity=$value-percentage); } // mixin text-shadow @mixin text-shadow($x, $y, $blur, $color) { text-shadow: $x $y $blur $color; } // mixin user-select @mixin user-select() { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } //mixin center @mixin center(){ -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); left:50%; top:50%; } // mixin transition @mixin transition($time) { -webkit-transition: $time; -moz-transition: $time; -o-transition: $time; -ms-transition: $time; transition: $time; } //mixin clearfix @mixin clearfix() { *zoom: 1; &:before, &:after{ content: ""; display: table; line-height: 0; } &:after { clear: both; } } // function calculateContainerWidth @function calculateContainerWidth($width, $gutter){ @return $width - ($gutter * 2) } //mixin media-query @mixin media-query($media-query) { $breakpoint-found: false; @each $breakpoint in $breakpoints { $name: nth($breakpoint, 1); $rule: nth($breakpoint, 2); $container_size: nth($breakpoint, 3); @if $media-query == $name and $rule { $breakpoint-found: true; @media only screen and #{$rule} { [class*='grid-#{$name}-']{ float: left; } @if $name == "s" or $name == "m" or $name == "l"{ .container { width: unquote(calculateContainerWidth($container_size, $gutter_width)); } } $index: 1; @each $width in $widths { $width_value: nth($width, 2); .grid-#{$name}-#{$index}{ width: unquote($width_value); padding-right: $gutter_width; padding-left: $gutter_width; position: relative; min-height: 1px; } .grid-#{$name}-offset-#{$index}{ margin-left: unquote($width_value); } .grid-#{$name}-pull-#{$index}{ right: unquote($width_value); } .grid-#{$name}-push-#{$index}{ left: unquote($width_value); } $index: $index + 1; } } } } @if $breakpoint-found == false { @warn "Breakpoint '#{$media-query}'' does not exist" } } //mixin all-grid @mixin all-grid() { $index: 1; @each $width in $widths { $width_value: nth($width, 2); .grid-all-#{$index}{ width: unquote($width_value); padding-right: $gutter_width; padding-left: $gutter_width; position: relative; min-height: 1px; } .grid-all-offset-#{$index}{ margin-left: unquote($width_value); } .grid-all-pull-#{$index}{ right: unquote($width_value); } .grid-all-push-#{$index}{ left: unquote($width_value); } $index: $index + 1; } } // Background sizing @mixin background-size($size) { -webkit-background-size: unquote($size); -moz-background-size: unquote($size); -o-background-size: unquote($size); background-size: unquote($size); } // Transformations @mixin rotate($degrees) { -webkit-transform: rotate($degrees); -moz-transform: rotate($degrees); -ms-transform: rotate($degrees); -o-transform: rotate($degrees); transform: rotate($degrees); } //mixin scale @mixin scale($ratio) { -webkit-transform: scale($ratio); -moz-transform: scale($ratio); -ms-transform: scale($ratio); -o-transform: scale($ratio); transform: scale($ratio); } //mixin translate @mixin translate($x, $y) { -webkit-transform: translate($x, $y); -moz-transform: translate($x, $y); -ms-transform: translate($x, $y); -o-transform: translate($x, $y); transform: translate($x, $y); } /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid#c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} /* clearfix.scss */ .clearfix { @include clearfix(); } * { &, &:before, &:after { @include box-sizing(border-box); } } /* grid.scss */ .container{ padding-right: $gutter_width; padding-left: $gutter_width; margin-right: auto; margin-left: auto; } .container-full{ padding-right: $gutter_width; padding-left: $gutter_width; margin-right: auto; margin-left: auto; } .row { margin-left: -$gutter_width; margin-right: -$gutter_width; // margin-bottom: 20px; @include clearfix(); } [class*='grid-']{ padding-right: $gutter_width; padding-left: $gutter_width; position: relative; min-height: 1px; } [class*='grid-']:last-of-type { /*padding-right: 0px;*/ } .container::before, .container-full::before{ display: table; content: ""; } [class*='grid-']::after, .container::after, .container-full::before{ content: ""; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; clear: both; } @include media-query("xs"); @include media-query("s"); @include media-query("m"); @include media-query("l"); @include all-grid();

Output Css:

What can I do with the SCSS to CSS compiler?

You can select the SCSS file from your computer or paste the SCSS code to convert.

Convert SCSS to CSS quickly and easily.

You can download the converted css file to your computer, or copy the result to use.

The tool works well on any operating system or browser