एक एसएएस/स्कैस फ़ंक्शन लिखना जो एक स्ट्रिंग

Question

देता है मैं एसएसएस में दो कस्टम उपयोगिता कार्यों का उपयोग कर सीएसएस से संबंधित गणना अनुकूलित करने की कोशिश कर रहा हूं।

ईएमएस के लिए एक:

@function _em($wanted, $inherited) { 
    @return ($wanted/$inherited) + 'em'; 
} 

... और एक अन्य प्रतिशत के लिए:

@function _pc($wanted, $parent) { 
    @return (($wanted/$parent) * 100) + '%'; 
} 

... फिर उन्हें बुला इनलाइन:

body { 
    margin: _pc(40,1024); 
    font-size: _em(20,16); 
    line-height: _em(26,20); 
} 

न तो इनमें से लौट रहे हैं अपेक्षित Nem या N% स्ट्रिंग, हालांकि। (मुझे लगता है कि यह मेरे स्ट्रिंग संयोजन है - अर्थात गणना के अंत पर इकाई कथात्मक चिपकाने -। लेकिन मुझे यकीन नहीं कर रहा हूँ)

किसी को भी मैं गलत क्या कर रहा पर किसी भी प्रकाश डाला सकता है?

Answer 1

दरअसल, आपकी समस्या मिश्रण का नाम है। मैंने अभी यह खुद को खोजा है, लेकिन स्पष्ट रूप से आप एक अंडरस्कोर के साथ एक मिश्रण शुरू नहीं कर सकते हैं।

यह काम करता है: http://jsfiddle.net/B94p3/

@function -em($wanted, $inherited) { 
    @return ($wanted/$inherited) + 'em'; 
} 

@function -pc($wanted, $parent) { 
    @return (($wanted/$parent) * 100) + '%'; 
} 

p { 
    font-size: -em(40,16); 
} 

Answer 2

इसी तरह, मैं px से rem को इकाई परिवर्तित करने के लिए इस समारोह में लिखा था।

आप तदनुसार संशोधित कर सकते हैं।

$is-pixel: true; 
$base-pixel: 16; 

@function unit($value) { 
    @if $is-pixel == true { 
    $value: #{$value}px; 
    } @else { 
    $value: #{$value/$base-pixel}rem; 
    } 
    @return $value; 
} 

अब, एक, निम्नलिखित

.my-class { 
    width: unit(60); 
    height: unit(50); 
}