cancel
Showing results for 
Search instead for 
Did you mean: 

Questions on blank sass theme compared to m2 blank theme

Questions on blank sass theme compared to m2 blank theme

I have a few of questions on the blank sass theme.

 

1. Is there a time planned for when the blank sass theme will be added into the Magento core?  I have read that this is Magento's intention.

 

2. Does the blank sass theme use media mixins queries similar to M2's LESS ones which puts CSS in either styles-m.css & styles-l.css files? for instance...

 

//
// Common
// _____________________________________________
& when (@media-common = true) {
}
//
// Mobile
// _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
}
//
// Desktop
// _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
}

 

 

3. Is it possible to override SASS variables of this theme in a child theme, similar to how M2 enables for it's LESS variables. For instance the @text__color variable defined in lib/web/css/source/lib/variables/_typography.less

2 REPLIES

Re: Questions on blank sass theme compared to m2 blank theme

I found an answer to my 3rd question on github...

https://github.com/SnowdogApps/magento2-theme-blank-sass/issues/92

 

You need to overwrite the mixins rather than variables.

 

Seems to be a good approach, although you need to overwrite the entire file which contains the mixins rather than just LESS variables.  If this approach is added to the core, how will this effect projects where module developers & theme developers code is used, will the module dev code automatically be replaced by the theme to give consistency in styles without further customisation?

Re: Questions on blank sass theme compared to m2 blank theme

Ok, so after little investigation I found the answer to my second question.  It seems the theme doesn't follow a mobile first approach as Magento_blank & the Magento_luma theme's do with styles-m.css & styles-l.css files.  All it's CSS style rules are added to styles.css and print.css, there is not a separate stylesheet for desktop styles only, such as...

<link rel="stylesheet" type="text/css" media="screen and (min-width: 768px)" href="http://example.com/pub/static/frontend/Magento/luma/en_US/css/styles-l.css" /> 

 

Also their are multiple calls to the same media queries in styles.css.

 

Perhaps this is something which should be added if this will be added to Magento's core, as it is an important strategy for improving performance on mobile devices.