Using SASS View
XD, PSD, AI and INDD layers to SASS with clean and clear code becomes simple. Translate your XD, PSD, AI and INDD layers to SASS with advanced support for text, images and shapes.
Example Image Element
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | /* Export Kit - SASS Mixins ---------------------------- Required Once ---------------------------- */ @mixin area($x,$y,$width,$height){ top:$y; left:$x; width:$width; height:$height; } /*----------mixins------------*/ $button_copy:( top:240px, left:446px, width:310px, height:166px ); #button_copy { @include area(map-get($button_copy,"left"),map-get($button_copy,"top"),map-get($button_copy,"width"),map-get($button_copy,"height")); background:url(../skins/ek125_303_layer_effects/button_copy.png); } |
Example Text Element
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | /* Export Kit - SASS Mixins ---------------------------- Required Once ---------------------------- */ @mixin area($x,$y,$width,$height){ top:$y; left:$x; width:$width; height:$height; } /*----------mixins------------*/ $text:( top:501px, left:132px, width:227px, height:90px, fontColor:#FFFFFF, fontFamily:"Arial, 'Helvetica Neue', Helvetica, sans-serif", fontSize:68px, fontWeight:bold, textAlign:left ); #text { @include area(map-get($text,"left"),map-get($text,"top"),map-get($text,"width"),map-get($text,"height")); font-family:map-get($text,"fontFamily"); font-size:map-get($text,"fontSize"); font-weight:map-get($text,"fontWeight"); text-align:map-get($text,"textAlign"); color:map-get($text,"fontColor"); } |
Example Shape Element
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | /* Export Kit - SASS Mixins ---------------------------- Required Once ---------------------------- */ @mixin area($x,$y,$width,$height){ top:$y; left:$x; width:$width; height:$height; } @mixin radius($radius:5px){ $radius:unquote($radius); border-radius:$radius; -moz-border-radius:$radius; -ms-border-radius:$radius; -o-border-radius:$radius; -webkit-border-radius:$radius; } /*----------mixins------------*/ $button_bg:( top:663px, left:819px, width:315px, height:160px, radius:"30px", color:#CE3636 ); #button_bg { @include area(map-get($button_bg,"left"),map-get($button_bg,"top"),map-get($button_bg,"width"),map-get($button_bg,"height")); @include radius(map-get($button_bg,"radius")); background:map-get($button_bg,"color"); } |
Pro Features
Customize the SASS View to include additional information with the XD, PSD, AI and INDD layer such as effects, advanced text rendering and more.
Example Layer Effects
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | /* Export Kit - SASS Mixins ---------------------------- Required Once ---------------------------- */ @mixin area($x,$y,$width,$height){ top:$y; left:$x; width:$width; height:$height; } @mixin radius($radius:5px){ $radius:unquote($radius); border-radius:$radius; -moz-border-radius:$radius; -ms-border-radius:$radius; -o-border-radius:$radius; -webkit-border-radius:$radius; } @mixin inset-box-shadow($xs:10px,$ys:10px,$blur:5px,$spread:0,$color:#000){ box-shadow:inset $xs $ys $blur $spread $color; -moz-box-shadow:inset $xs $ys $blur $spread $color; -webkit-box-shadow:inset $xs $ys $blur $spread $color; } /*----------mixins------------*/ $button_bg:( top:663px, left:819px, width:315px, height:160px, radius:"30px", color:#CE3636 ); #button_bg { @include area(map-get($button_bg,"left"),map-get($button_bg,"top"),map-get($button_bg,"width"),map-get($button_bg,"height")); @include radius(map-get($button_bg,"radius")); @include inset-box-shadow(0px ,15px ,10px ,0px ,rgba(0,0,0,0.75)); background:map-get($button_bg,"color"); } |
Example Inline Content
1 2 3 4 5 6 7 | #button_bg { @include area(819px,663px,315px,160px); @include radius("30px"); @include inset-box-shadow(0px ,15px ,10px ,0px ,rgba(0,0,0,0.75)); background:#CE3636; } |
Help Us Improve
We aim to keep our content relevant with useful information, examples, samples and links. Tell us what you think!
