Can i use css like as javascript?

Question

Friends, can i use css as a nested functions and how to get the current css properties of element like as follow

.button1:active 
{
  #button2
  {
    width:width+20px;
  }
}

You can but with LESS, SASS or other similar tools. Go to jsbin.com open the CSS tab, click the arrow next the CSS tab and play around — Roko C. Buljan
– Roko C. Buljan, Commented Jan 23, 2014 at 7:51
There are no functions in CSS. You should describe the desired effect, not some invented syntax that definitely isn’t CSS. And it would be illogical to “get the current css properties of element” when setting the property on the element. — Jukka K. Korpela
– Jukka K. Korpela, Commented Jan 23, 2014 at 8:25

Ashley Medway · Accepted Answer · 2014-01-23 10:22:02Z

2

Not with standard CSS.

You can do.

.button1:active #button2 {
    width:20px;
}

However you can in LESS, SASS or SCSS.

With LESS you could do.

@elementWidth: 20px;

.button1:active {
    #button2 {
        width: @elementWidth + 20px; //Resulting width would be 40px
    }
}

answered Jan 23, 2014 at 7:51

Ashley Medway

7,3197 gold badges54 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

width:width+20px; is invalid CSS declaration.

@Pavlo sorry copy and paste issue :)

I believe it's not the same thing author is asking: apparently he wanted to increase width by 20px, not set it to 20px.

codingrose · Accepted Answer · 2014-01-23 08:26:39Z

1

You can write like:

.button1:active #button2{
    width:20px;
}

Use CSS pre-processors LESS or SASS to achieve this.

answered Jan 23, 2014 at 7:52

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

Not sure why it was downvoted because it makes more sense than the other answer with invalid CSS. I'll upvote.

@BeatAlex merely a copy and paste issue.