Как применять тот или иной стиль в SCSS в зависимости от значения переменной, которое должно присваиваться при клике на кнопку

Подскажите пожалуйста как я могу прописать некоторую логику в SCSS. У меня есть кнопка, при нажатии на которую мой главный div контейнер либо растягивается, либо сужается со всем своим содержимым. У меня есть некоторое представление как это можно сделать, но в голове всё равно каша. Допустим можно завести переменную и дать ей булево значение, а потом создать функцию, которая будет принимать эту переменную и с помощью отрицания менять её значения.

Затем, уже в файле, где прописываются стили для этого контейнера проверять, если переменная true, то тогда вставляем стили в контейнер, которые его сужают, а если false то стили для расширения. Соответственно эта самая функция должна срабатывать по нажатию на кнопку. Есть ли способ отловить событие клика по кнопке в SCSS или без вмешательства js ни как? Хотелось бы реализовать это без js. И если всё-таки это возможно, хотелось бы узнать в правильном ли направлении я думаю.