PDA

View Full Version : How to move all the CSS files to SASS?



Sunny9491
2 Dec 2014, 12:48 PM
I am trying to move all the CSS files to SASS. for example i have defined many classes for button background image in the CSS file. now i want to get rid of those CSS files and wanna add the same class to SASS file so that the old class is still usable. where can i include the button background images?

for example;
My CSS file contains

.x-btn { .delete { background-image: url('images/new/del.png'); } .save { background-image: url('images/new/sav.png');
}}how can i get rid of this CSS code and put it in SCSS? i tried putting it in sass\src\button\Button.scss

but i was not successful in doing so. please help me.

lumberjack
4 Dec 2014, 12:59 PM
Can you please post the contents of your /sass/src/button/Button.scss file? Did your application build successfully after creating/updating the aforementioned file?

Thanks,

Brian

Sunny9491
12 Dec 2014, 10:18 AM
/* Button.scss */
@include extjs-button-ui (
$ui: 'toolbutton-small',
$border-radius: $button-small-border-radius,
$border-width: $button-small-border-width,


$border-color: rgba(255,255,255,1),
$border-color-over: rgba(255,255,255,1),
$border-color-focus: rgba(255,255,255,1),
$border-color-pressed: rgba(255,255,255,1),
$border-color-disabled: rgba(255,255,255,1),


$padding: $button-small-padding,
$text-padding: $button-small-text-padding,


$background-color: rgba(255,255,255,1),
$background-color-over: rgba(255,255,255,1),
$background-color-focus: rgba(255,255,255,1),
$background-color-pressed: rgba(255,255,255,1),
$background-color-disabled: rgba(255,255,255,1),


$background-gradient: grid-header,
$background-gradient-over: grid-header,
$background-gradient-focus: grid-header,
$background-gradient-pressed: grid-header,
$background-gradient-disabled: grid-header,


$color: $button-default-color,
$color-over: $button-default-color-over,
$color-focus: $button-default-color-focus,
$color-pressed: $button-default-color-pressed,
$color-disabled: $button-default-color-disabled,


$font-size: $button-small-font-size,
$font-size-over: $button-small-font-size-over,
$font-size-focus: $button-small-font-size-focus,
$font-size-pressed: $button-small-font-size-pressed,
$font-size-disabled: $button-small-font-size-disabled,


$font-weight: $button-small-font-weight,
$font-weight-over: $button-small-font-weight-over,
$font-weight-focus: $button-small-font-weight-focus,
$font-weight-pressed: $button-small-font-weight-pressed,
$font-weight-disabled: $button-small-font-weight-disabled,


$font-family: $button-small-font-family,
$font-family-over: $button-small-font-family-over,
$font-family-focus: $button-small-font-family-focus,
$font-family-pressed: $button-small-font-family-pressed,
$font-family-disabled: $button-small-font-family-disabled,


$icon-size: 22px,
$glyph-color: $button-default-glyph-color,
$glyph-opacity: $button-default-glyph-opacity,
$arrow-width: $button-small-arrow-width,
$arrow-height: $button-small-arrow-height,
$split-width: $button-small-split-width,
$split-height: $button-small-split-height,
$opacity-disabled: $button-opacity-disabled,
$inner-opacity-disabled: $button-inner-opacity-disabled
);


.x-btn .EXCEL {
background-image : url('images/datagrid/Excel.png');
}



ABOVE IS THE FILE BUTOON.SCSS. I WONDER IF I CAN DIRECTLY WRITE CSS CLASS IN SASS FILE DIRECTLY for eg.

.x-btn .EXCEL {
background-image : url('images/datagrid/Excel.png');
}

I could all the sass in the above file is compiled but the css class which i gave directly isn't working. Please let me know the way to write CSS classes directly in SASS.

if answer is YES, how exactly is it different from maintaining CSS in a exclusive file rather than writing it in SASS? will it help me when upgrading the app?

i just wonder writing CSS in SASS is same as writing CSS in a CSS file.

clear explanation is appreciated.

lumberjack
15 Dec 2014, 11:32 AM
My test app is using a custom theme called TestTheme. I've put the following CSS into the /packages/TestTheme/sass/src/button/Button.scss file:



// css
.x-btn.excel {
background-image: url(images/excel.png);
}

I've placed a file called excel.png in my application's resources/images directory. This renders any button with the cls config set to "excel" with my image as the background.



// javascript
tbar: [{
text: 'Button',
cls: 'excel',
handler: 'onClickButton'
}]

Regards,
Brian