PDA

View Full Version : Can we define pure CSS classes in SASS?



Sunny9491
12 Dec 2014, 10:20 AM
Can we define pure CSS classes in SASS?

if so please explain how it is different from CSS and will it help or will there be any use when i upgrade the app?

Gary Schlosberg
15 Dec 2014, 9:50 AM
Have you seen the Styling Your Application section of the theming guide?
http://docs.sencha.com/extjs/4.2.1/#!/guide/theming

Sunny9491
15 Dec 2014, 10:49 AM
Yeah i have gone through the sencha theming docs.....
Below is my Button.scss file where i am facing problem.


/* 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 for eg.

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

I could see all the sass in the above file is compiled but the css class (above' .x-btn.EXCEL') 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.