Read and process <style type="text/scss"> elements #2

varemenos · 2015-05-06T06:59:31Z

No description provided.

rodneyrehm · 2015-05-06T08:45:41Z

Do you expect each <style> to be handled individually? I mean, do you expect the following to work?

<style type="text/scss">
  $gustav: 1px;
</style>
<style type="text/scss">
  .hello { width: $gustav; }
</style>

If that should work, how do <link> factor in?

varemenos · 2015-05-06T08:56:07Z

Good question, Imho they shouldn't be handled individually.

We could just turn add them in the filesystem with the order they appear, preprocess them and finally add the result above the first <style type="text/scss"> element

bassjobsen · 2015-05-06T09:22:44Z

I wrote some demo which reads <link rel="stylesheet/scss" type="text/css" href="test.scss"> and compiles.

With test.scss:

$color: red;
h1 {
color: $color;
}

demo.html:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Sass Example</title>
    <link rel="stylesheet/scss" type="text/css" href="test.scss">
    <script src="//cdnjs.cloudflare.com/ajax/libs/sass.js/0.6.3/sass.min.js"></script>
    <script>


    function read(url) {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function(){
            if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
            //basename = url.replace(/^.*\/|\.[^.]*$/g, '');
            basename = url.substring(url.lastIndexOf('/')+1);
            scssCode = xmlhttp.responseText;
            console.log(scssCode);
            Sass.writeFile(basename, scssCode);
            compile('@import "' + basename + '"; ');
        }

    }
    xmlhttp.open("GET",url,true);
    xmlhttp.send();    
    }    

    function registerStylesheets() {

                var links = document.getElementsByTagName('link');
                sheets = [];

                for (var i = 0; i < links.length; i++) {



                    if (links[i].rel === 'stylesheet/scss') {
                        sheets.push(links[i].href);
                    }
                }
                return sheets;
    };

    var sheets =  registerStylesheets();

    for (var i = 0; i < sheets.length; i++) { 
    read(sheets[i]);
    } 

    function compile(scss) {
    console.log(scss);    
    console.log(Sass.compile(scss));
    }

    </script>   
    </head> 
    <body>
    <div id="error"></div>
    <div id="csscode"></div>
    </body>
    </html>

The above output to the console:

"pre-main prep time: 40 ms" sass.min.js:55:137
The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. demo.html
not well-formed test.scss:1:1
"$color: red;
h1 {
color: $color;
}
" demo.html:19:8
"@import "test.scss"; " demo.html:52:0
"h1 {
color: red; }
"

This demo uses sass.js 0.6.3 cause other versions do not work for me (see: medialize/sass.js#29). Also notice that is only works for one file now. Reading more files should take the asynchronism of the XMLHttpRequest into account. Less.js can be used as an example. The source code of Less can already read the files via the XMLHttpRequest. See also http://stackoverflow.com/questions/9798122/how-to-show-the-compiled-css-from-a-less-file-in-the-browser/25325750, http://stackoverflow.com/questions/3582671/how-to-open-a-local-disk-file-with-javascript and so on.

bassjobsen · 2015-05-06T09:25:17Z

Good question, Imho think they shouldn't be handled individually.

<link rel="stylesheet/scss" type="text/css" href="test.scss"> requires a XMLHttpRequest whilst inline code does not.

174n · 2019-02-12T17:59:34Z

Here is more modern looking code featuring es6 and async await

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sass Example</title>
  <link rel="stylesheet/scss" type="text/css" href="style.scss">
  <script src="//cdnjs.cloudflare.com/ajax/libs/sass.js/0.6.3/sass.min.js"></script>

  <script>
    (async () => {
      const compiled = (await Promise.all(
        [...document.querySelectorAll("link")]
          .filter(l => l.rel === 'stylesheet/scss')
          .map(async l => {
            url = l.href;
            const code = await (await fetch(url)).text();
            const basename = url.substring(url.lastIndexOf("/")+1);
            Sass.writeFile(basename, code);
            return Sass.compile(`@import "${basename}"; `);
          })
      )).join("\n");
      document.head.innerHTML += `<style>${compiled}</style>`;
      console.log(compiled);
    })();
  </script>
</head>
<body>
  
</body>
</html>

damiancipolat · 2019-07-25T04:52:28Z

I have another version of the @Rundik code but in this case I only unite all the files in one and then compile it. In this way I open the possibility of using variables in the sass code

(async () => {
  
  let buffer='';
  
  const fullCode = (await Promise.all([...document.querySelectorAll("link")]
    .filter(l => l.rel === 'stylesheet/scss')
    .map(async l=>{
      url = l.href;
      return await (await fetch(url)).text();
  }))).join("\n");

  const basename = 'tmp.scss';
  Sass.writeFile(basename, fullCode);
  const compiled = await Sass.compile(`@import "${basename}"; `);

  document.head.innerHTML += `<style>${compiled}</style>`;

})();

You can make something like this:

<link rel="stylesheet/scss" type="text/css" href="./styles/variables.scss"></link>-
<link rel="stylesheet/scss" type="text/css" href="./styles/style.scss"></link>
<link rel="stylesheet/scss" type="text/css" href="./styles/header.scss"></link>
<link rel="stylesheet/scss" type="text/css" href="./styles/footer.scss"></link>

In Variables.scss:
$color-red: yellow;

And in style.scss
.title-red{ color:$color-red; }

bassjobsen mentioned this issue May 6, 2015

download and process <link … type="text/scss"> #1

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Read and process <style type="text/scss"> elements #2

Read and process <style type="text/scss"> elements #2

varemenos commented May 6, 2015

rodneyrehm commented May 6, 2015

varemenos commented May 6, 2015

bassjobsen commented May 6, 2015

bassjobsen commented May 6, 2015

174n commented Feb 12, 2019

damiancipolat commented Jul 25, 2019 •

edited

Read and process <style type="text/scss"> elements #2

Read and process <style type="text/scss"> elements #2

Comments

varemenos commented May 6, 2015

rodneyrehm commented May 6, 2015

varemenos commented May 6, 2015

bassjobsen commented May 6, 2015

bassjobsen commented May 6, 2015

174n commented Feb 12, 2019

damiancipolat commented Jul 25, 2019 • edited

damiancipolat commented Jul 25, 2019 •

edited