3

Okay, so this could be a really simple thing that I've done (one of those days) but I cannot for the life of me figure this one out.

Long story short, In my main.scss:

.test{
    width: calc(100% - 50px);
}

In my auto-complied main.css (viewed in code editor and even online file manager):

.test{
    width: calc(100% - 50px);
}

Yet, in the browser it isn't displaying correct and on inspection, it has somewhere been converted to:

.extra-test{
    width: calc(50%);
}

Any ideas on what could be causing this?

(Using latest version of Chrome)

Adam
  • 61
  • 6
  • It almost sounds like you've got a messed up mixin somewhere. If you can, try to view the source of your generated CSS file and see what was generated? – Frits Aug 01 '17 at 13:59
  • Are you using any CSS compilers like LESS? In LESS, you will need to use `~"calc(100% - 50px)"` to keep it literal and skip LESS's compiling it into a calculation. – Niet the Dark Absol Aug 01 '17 at 13:59
  • Are you sure you are looking at the correct file? Chrome will not just magically convert the contents of your CSS files. – Marko Gresak Aug 01 '17 at 13:59
  • @NiettheDarkAbsol Just using SCSS, and I've check the file it compiles which is correct, as stated in my question. – Adam Aug 01 '17 at 14:04
  • @MarkoGrešak I'm 99% sure I am, there are no other files with the same name/code in it on the server. And changes I am pushing to that file are present. – Adam Aug 01 '17 at 14:05
  • @Adam, just out of interest sake, where on your site is this element? I'm quite curious to see what it's doing... – Frits Aug 01 '17 at 14:11
  • Chrome 59 - No repo https://jsfiddle.net/0rkxvkxe/ – I haz kode Aug 01 '17 at 14:15

1 Answers1

3

Okay so I've done some more digging and the CMS we are using (Concrete5) is creating a cached version of the file (that I think is compiled using LESS) and serving that instead of the original version of the file.

So I will close this question as this seems to be an issue with the CMS. Thanks for your assistance and sorry for wasting your time!

EDIT: Have resolved this now. For any future Google-eers, the issue was that in Concrete5, I had kept the line <?php echo $html->css($view->getStylesheet('main.css'))?> at the top of my custom theme's header-top.php file. I'm not 100% sure what that line does but changing it to <link rel="stylesheet" type="text/css" href="<?php echo $view->getThemePath()?>/css/main.css"> resolved the problem and served the correct file, rather than a cached file that I assume was LESS-compiled.

Adam
  • 61
  • 6
  • I second that, glad we were able to get you on the right track. I would, however, suggest learning how to use SCSS/LESS because it's incredibly useful. The only thing to be careful of is knowing how to selectively prevent it (like the `~"calc(100% - 50px)"` example I gave earlier) – Niet the Dark Absol Aug 01 '17 at 15:12