SCSS – Use different .scss files for different viewports.

[ainsley_clark]

Morning all,

Wondering your thoughts on the speed of using different stylesheets for different sized viewports.
Doing this:

rel=”stylesheet” media=”screen and (min-device-width: 800px)” href=”800.css”

Does this dramatically improve speed? Is there a slight lag when the browser loads in different .css files?

Also Im wondering if this is possible with .scss files, for example:
@import ‘mobile’; when screen is below 700px

Is this remotely possible, or would I have to export each file as a stylesheet ?

Many thanks in advance.

[Dagny]

This is odd, I’d say if you css is incredibly big (like MBs of css) it might make sense, but you’d lose on caching. Also, what happens when the user turns their tablet / phone to landscape – you’d have to wait for the css to be downloaded???

I’d stick to the old system, like I said unless the css is very big.

[ainsley_clark]

Many thanks for your reply. Cleared things up for me.

[tomasland]

Hi there. Thank you for the information.

[Author]

Posts