About Css Function


#1

I want css function with parameters

For example

function tranformx(deger1,deger2){
		 -ms-transform:deger1(deger2);
		 -webkit-transform:rotate(-15deg);
		 -moz-transform:rotate(-15deg);
		 transform:rotate(-15deg);
	}

	div#div1{
		width:100px;
		height:100px;
		border-style:solid;
		border-width:1px;
		background:#F00;
		
		transformx(rotate,-15deg);
                /*My Goal: transform:rotate(-15deg)*/
	}

My intention is not to write transform commands every time

Is there such an ease of use?


#2

Hi @kadirsener35, you might have a look at Sass which allows you doing exactly that. It's basically a superset of CSS which compiles to plain CSS; you can do things like e.g.

@mixin rotate($deg) {
    -ms-transform: rotate($deg);
    -webkit-transform: rotate($deg);
    -moz-transform: rotate($deg);
    transform: rotate($deg);
}

.foo {
    @include rotate(15deg);
}

.bar {
    @include rotate(-30deg);
}

Although in that particular case, an autoprefixer might be a more immediate solution to your problem. :-)


#3

Why not just write a few transform classes eg trans15{}, trans30{} and apply them as required to any div or whatever,
eg

<div class="lefty trans30">...

or

<div class="side trans15">...

You write the first class, copy and paste it and edit the angle - not exactly difficult.
To my mind, this is just a bit simpler than having to learn Sass,
Also, you are unlikely to use a huge number of rotation angles, are you? You're not planning to use endless variations of rotations like 13, 32, 16, 28 are you?


#4

I'm not sure you still need all those prefixes for transform.
https://caniuse.com/#search=transform


#5

Well the problem with such utility classes is that if you want to change that style for a certain set of elements, you'll have to go through all your markup and see of a given element is affected, which can escalate pretty quickly. That is not to say that there are no use cases for such classes, but I'd use them with cation and only for very general layout... grid columns being a prime example.

Since Sass is a superset of CSS (at least when using the SCSS syntax), there's nothing you have to learn -- you can gradually introduce Sass-functionality just as you need it, and keep writing regular CSS otherwise. :-)


#6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.