How to combine 2 SASS functions as they do almost the same thing just using a different calculation?


Tags: css,sass

Problem :

I was wondering if someonce could advise me on how I could combine the SASS functions below, basically they do the same thing but one is used specifically for IE so having 2 is a waste. I've tried adding if..else statements with an additional parameter like if ( $property == 'ie' ) but with no success.

Functions:

// To use width, margin, padding...
@function percentageWidth( $elementWidth, $containerWidth ){
  @return $elementWidth/$containerWidth * 100%;
}

// To use *width ie6/7 workarounds
@function iePercentageWidth( $elementWidth, $containerWidth ){
  @return $elementWidth/$containerWidth - 0.5/$containerWidth * 100%;
}

Current CSS:

width: percentageWidth( 214,945 );
*width: iePercentageWidth( 214,945 );

I would also like to use this function on things like:

margin: percentageWidth( 23,945 );


Solution :

Here's a general mixin you can use to create a pair of properties:

@mixin ieprop($name, $elementWidth, $containerWidth) {
   #{$name}: percentageWidth($elementWidth, $containerWidth);
   *#{$name}: iePercentageWidth($elementWidth, $containerWidth);
}

You pass the property name as the first parameter, like so:

.cls {
  @include ieprop('width', 214, 945);
  @include ieprop('margin', 23, 945);
}

    CSS Howto..

    How to create an HTML CSS Page with Header, Footer and Content

    How to do drop-down box like “More action” in gmail

    How to use Less variables in CSS

    How to detect if html contains block level elements using jQuery?

    How to get color property from CSS with jQuery?

    How to set border around Twitter Bootstrap Icon?

    Track cursor hover position and show hide menu similar to OSX dock / Windows start bar

    How to create dynamic table 4 columns per row using GridView?

    How to set MenuItem to corrent width in asp.net

    How to fix when someone edits css output of an existing sass file

    How to make input and select to be same width in css

    How to place a Show/Hide toggle button next to a header (not under the header)?

    How to style xml file? from xml to html using xslt and style that html using css [closed]

    How to align images and urls within div trees in CSS?

    How to spread elements evenly (horizonatly)?

    How to remove top border for one element in a list

    How to highlight the menu item in menu

    Color of links not always showing correctly

    how to put css in selected row in angular js?

    How to give multiple arguments to find element by css selector

    How to hide overflow characters of a div when resizing [duplicate]

    How to add multiple CSS elements to a div using jQuery?

    How can I place a checkbox within a button? [closed]

    How to force a TD to be a certain height with CSS?

    How to detect DOM element position to use different CSS style via CSS selection

    DOM How to add two divs (with jQuery inside them) next to each other?

    How can I display two images horizontally?

    Awkward gap between menu items. How to fix?

    How to select a .list-cell, in javaFX CSS

    How to call CSS from JavaScript