Change amount of grid colums - where?

I want to set the columns in the grid to 24.
In the documentation is said:
$grid-columns: 12 !default;
and I set it in my page.scss to 24.
It doesn’t work.
Where can I set it to 24?

Ok, you have to set it in variables.scss, best place is at shared variables.
Do you know any way, to customize it just for one page?

I have a hard time conceiving of a 12-column grid being insufficient for a mobile device screen.

Yes, for mobile of course.
I tried to build a desktop application with Ionic and therefore 24-column grid is nice to have.