css2scss

Settings
Your CSS
Info

This converter takes (valid) CSS and generates compass (scss) code, SASS or cleaned css for it. Just put the contents of your CSS into the field and hit the button.

If you encounter any problems, just contact me via Twitter or mail.

Last changes: (2016-11-02)

  • removed a bug that generated @extends from within @media-queries
  • fixed an error url-variables generated regardless of the setting
  • fixed an error where ampersands were inserted after a >

Changelog

Features
  • show example

    Placeholder-selectors
    Comma-separated selectors will be merged into an @extend-element, depending on the number of attributes.

    //before
    .a .b, .c .d {
    	color:#333;
    	font-size:1.4em;
    }
    			
    //after
    %extend_0 {
    	color:#333;
    	font-size:1.4em;
    }
    .a .b, .c .d {
    	@extend %extend_0;
    }
    			
  • show example

    Variables
    The following values can be replaced by variables: colors, font-families, data-uris, urls

    //before
    .a {
    	color:red;
    	background:#abcdef;
    	font-family:Arial, Helvetica, sans-serif;
    }
    			
    //after
    
    //colors
    $color_0: red;
    $color_1: #abcdef;
    
    //fonts
    $font_0: Arial;
    $font_1: Helvetica;
    $font_2: sans-serif;
    
    .a {
    	color: $color_0;
    	background: $color_1;
    	font-family: $font_0, $font_1, $font_2;
    }
    			
  • show example

    Changeable colors
    If you want to unify all your colors to the same format, you can do it right here - just choose the format you like.

    //before
    .a {
    	color: red;
    	background: #abcdef;
    	box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    }
    			
    //after
    //colors
    $color_0: #f00;
    $color_1: #abcdef;
    
    //notice, that this color had an alpha value (-> transparency) before
    //there is a setting to prevent these values from getting overwritten
    $color_2: #000;
    
    .a {
    	color: $color_0;
    	background: $color_1;
    	box-shadow: 0 0 4px $color_2;
    }
    			

© 2013 - 2017 @pontoffeltier