{"id":46517,"date":"2019-09-26T03:01:44","date_gmt":"2019-09-25T17:01:44","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=46517"},"modified":"2019-09-25T20:10:31","modified_gmt":"2019-09-25T10:10:31","slug":"sass-css-stylesheet-supervisor-execution-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/sass-css-stylesheet-supervisor-execution-tutorial\/","title":{"rendered":"Sass CSS Stylesheet Supervisor Execution Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/sass_watchdog.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Sass CSS Stylesheet Supervisor Execution Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/sass_start.jpg\" title=\"Sass CSS Stylesheet Supervisor Execution Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Sass CSS Stylesheet Supervisor Execution Tutorial<\/p><\/div>\n<p>Of course we&#8217;d like to quickly get to the &#8220;watchdog&#8221; aspects of yesterday&#8217;s <a title='Sass CSS Stylesheet Supervisor Watchdog Tutorial' href='#scsssswt'>Sass CSS Stylesheet Supervisor Watchdog Tutorial<\/a>, but we need to tie down the &#8220;supervisor&#8221; parts, in progress today, where they are submitted as background tasks that run until killed (sorry for the harsh words, but &#8216;kill&#8217; is the terminology in a lot of operating systems to stop a process or task).  That progress makes us believe that, yes, we will be able to create a &#8220;Sass Watch Supervisor and Watchdog&#8221; not needing crontab and just having the one PHP source code file.  And yes, we think we&#8217;ll definitely take advantage of all\/most of PHP&#8217;s &#8230;<\/p>\n<ul>\n<li>surfing the net<\/li>\n<li>command line<\/li>\n<li>curl<\/li>\n<\/ul>\n<p> &#8230; modes of use, either using all three, or at least the first two above.  Part of that design, in our mind, is that an initial &#8220;surfing the net&#8221; execution run, where filesets are filled in with that table, form the basis for self-adjustment of the PHP code settings.  That important first real run sets up arrangements necessary, that any subsequent incarnations of executions will have enough information to do what crontab arrangements could have been harnessed to do.  Please note, though, that Windows has Task Scheduler that can achieve crontab background processing too.<\/p>\n<p>And so to today&#8217;s work, progress is in large part based on the PHP <a target=_blank title='PHP function startBackgroundProcess' href='https:\/\/stackoverflow.com\/questions\/45953\/php-execute-a-background-process'>function startBackgroundProcess<\/a> presented there, thanks.  It concerns the central tenet of the &#8220;Sass Watch Supervisor and Watchdog&#8221; concept, that of being able to execute &#8230;<\/p>\n<ul>\n<li>\n<code><br \/>\n<span style='text-decoration:underline;' title='... or long path to executable equivalent in the sense that the environment may not be complete here'>sass<\/span> --watch inputSassStylesheet1.scss outputStylesheet1.css >> log.file 2>> errorlog.file &<br \/>\n<\/code>\n<\/li>\n<li>for as many &#8220;mappings&#8221; (ie. as above 1 to 2, as above 1 to 3 <a target=_blank title='etcetera etcetera etcetera' href='https:\/\/www.shmoop.com\/quotes\/etcetera-etcetera-etcetera.html'>etcetera etcetera etcetera<\/a>) as the user so desires<\/li>\n<\/ul>\n<p>With today&#8217;s work, though, it is best for you to download <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=HTTP:\/\/www.rjmprogramming.com.au\/Mac\/sass_watchdog.php-GETME\" title=\"sass_watchdog.php\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/sass_watchdog.php-GETME\" title=\"sass_watchdog.php\">sass_watchdog.php<\/a> and work it into a local web server arrangement, such as a <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> one, we still offer you a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/sass_watchdog.php\" title=\"Click picture\">live run<\/a> link opportunity (but do not follow through with the &#8220;Superviser&#8221; action) for you to imagine how all this &#8220;Sass Watch Supervisor and Watchdog&#8221; could work for you, on that positive &#8220;Supervisor&#8221; side of the ledger (the &#8220;Watchdog&#8221; aspects being more the &#8220;but what if&#8221; side of the ledger).<\/p>\n<hr>\n<p id='scsssswt'>Previous relevant <a target=_blank title='Sass CSS Stylesheet Supervisor Watchdog Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/sass-css-stylesheet-supervisor-watchdog-tutorial\/'>Sass CSS Stylesheet Supervisor Watchdog Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/sass_watchdog.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Sass CSS Stylesheet Supervisor Watchdog Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/sass_watchdog.jpg\" title=\"Sass CSS Stylesheet Supervisor Watchdog Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Sass CSS Stylesheet Supervisor Watchdog Tutorial<\/p><\/div>\n<p>Adding genericity to yesterday&#8217;s <a title='Sass CSS Stylesheet Background Crontab Tutorial' href='#scsssbct'>Sass CSS Stylesheet Background Crontab Tutorial<\/a> we &#8230;<\/p>\n<ul>\n<li>choose to write the one codefile for purposes of (Sass CSS Stylesheet) Supervision (ie. filename collection) and Maintenance (watchdog duties) &#8230; and so we &#8230;<\/li>\n<li>pick PHP as that bridge between Windows and Mac &#038; Linux &#8230;<\/li>\n<li>pick PHP in case we need both a &#8220;surfing the net&#8221; and\/or &#8220;command line&#8221; requirement for the &#8220;Supervisor Watchdog&#8221;<\/li>\n<\/ul>\n<p> &#8230; and we&#8217;ve started down the &#8220;supervision road&#8221; today, and will continue onto &#8220;watchdog&#8221; (and more &#8220;supervision&#8221;) nuances into the future days.<\/p>\n<p>What is needed to start off on (Sass CSS Stylesheet) Supervision?  <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>Anyone, anyone<\/a>?  Yes, <a target=_blank title='Zhang Qian' href='https:\/\/en.wikipedia.org\/wiki\/Zhang_Qian'>Zhang Qian<\/a>, we need a &#8220;linked list&#8221; type of arrangement collecting off the user the names of &#8220;input Sass *.scss&#8221; stylesheet files and what &#8220;output *.css&#8221; stylesheet one to one conversion should happen.  We decide to use a table to hold this information, starting with that first fileset of interest, that if filled in properly &#8230;<\/p>\n<ul>\n<li>has <i>onblur<\/i> event logic that both &#8230;<\/li>\n<li>saves away that setting (within the form method=POST that can self navigate back via $_POST arguments back in) &#8230;<\/li>\n<li>as well as adding another blank table row for another potential user fileset entry &#8230; &#8220;linked list style&#8221;<\/li>\n<\/ul>\n<p> &#8230; the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/sass_watchdog.php_GETME\" title=\"sass_watchdog.php\">sass_watchdog.php<\/a> PHP code of which you can try yourself with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/sass_watchdog.php\" title=\"Click picture\">live run<\/a> link, that just collects user entries at this stage.<\/p>\n<hr>\n<p id='scsssbct'>Previous relevant <a target=_blank title='Sass CSS Stylesheet Background Crontab Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/sass-css-stylesheet-background-crontab-tutorial\/'>Sass CSS Stylesheet Background Crontab Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/sass_crontab.pdf\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Sass CSS Stylesheet Background Crontab Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/sass_crontab.jpg\" title=\"Sass CSS Stylesheet Background Crontab Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Sass CSS Stylesheet Background Crontab Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Sass CSS Stylesheet Primer Tutorial' href='#scssspt'>Sass CSS Stylesheet Primer Tutorial<\/a> showed a really promising procedural CSS stylesheet creator tool &#8230;<\/p>\n<p><code><br \/>\nsass --watch [inputSassSCSS] [outputCSS]<br \/>\n<\/code><\/p>\n<p> &#8230; in action, but the mode of that procedural application of that &#8230;<\/p>\n<ul>\n<li>sass &#8211;watch [inputSassSCSS] [outputCSS]     # in a Mac OS X (or macOS) terminal window command line &#8230; held up the further use of that window, because it is a foreground process &#8230; and so jarred with us &#8230; but today&#8217;s work, good for Linux and\/or Mac OS X (or macOS) &#8230; and which you can see in action with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/sass_crontab.pdf\" title=\"Click picture\">PDF slideshow<\/a> &#8230; allows for &#8230;<\/li>\n<li>Linux or Mac OS X (or macOS) &#8230;\n<ol>\n<li>sass &#8211;watch [inputSassSCSS] [outputCSS] &#038;   # in a Mac OS X (or macOS) terminal window command line run as a background process that remains even after logout, which is mostly all you need, except that &#8220;sass &#8211;watch&#8221; process can fallover &#8230; so &#8230;<\/li>\n<li><a target=_blank title='crontab' href='http:\/\/www.hscripts.com\/tutorials\/linux-commands\/crontab.html'>crontab<\/a> controlled Sass &#8220;watchdog&#8221; (remember <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/linux-watchdog-primer-tutorial\/' title='Linux Watchdog Primer Tutorial'>Linux Watchdog Primer Tutorial<\/a>) &#8230; that checks on whether Sass &#8220;watchdog&#8221; is running, and whether a (CSS stylesheet) file set check instance execution is running &#8230;<br \/>\n<code><br \/>\n#!\/bin\/ksh<br \/>\n# supervise_sass.ksh<br \/>\n# RJM Programming<br \/>\n# Make sure \"sass --watch base.scss build\/test.css\" is running<br \/>\nif [ -z \"`ps -ef | grep -v 'grep' | grep -c 'supervise_sass.ksh' | sed '\/10\/s\/\/21\/g' | sed '\/1\/s\/\/\/g' | sed '\/0\/s\/\/\/g'`\" ]; then<br \/>\n  while [ 0 -lt 1 ]; do<br \/>\n    if [ -z \"`ps -ef | grep -c 'build\/test.css' | sed '\/10\/s\/\/21\/g' | sed '\/1\/s\/\/\/g' | sed '\/0\/s\/\/\/g'`\" ]; then<br \/>\n      <b>\/usr\/local\/Cellar\/sass\/1.22.12\/bin\/sass<\/b> --watch \/Applications\/MAMP\/htdocs\/sass\/base.scss \/Applications\/MAMP\/htdocs\/sass\/build\/test.css &gt;&gt; \/Applications\/MAMP\/htdocs\/sass\/sass_watch.ok 2&gt;&gt; \/Applications\/MAMP\/htdocs\/sass\/sass_watch.notok &<br \/>\n    fi<br \/>\n    sleep 10<br \/>\n  done<br \/>\nfi<br \/>\nexit<br \/>\n<\/code><br \/>\n &#8230; (a Sass &#8220;watchdog&#8221;) called <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/supervise_sass.ksh_GETME\" title=\"supervise_sass.ksh\">supervise_sass.ksh<\/a> &#8230; via &#8230; crontab -l &#8230;<br \/>\n<code><br \/>\n* * * * * ksh -c \"\/Applications\/MAMP\/htdocs\/supervise_sass.ksh &gt;&gt; \/Applications\/MAMP\/htdocs\/ss.xxx 2&gt;&gt; \/Applications\/MAMP\/htdocs\/ss.notxxx\"<br \/>\n<\/code><br \/>\n &#8230; and note how what &#8220;sass&#8221; represents (in commands) needed to be written in <b>&#8220;longhand path terms&#8221;<\/b> in crontab land, because you should not assume anything about the environment associated with crontab\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; which is good now &#8220;for leave it (ie. Sass CSS Stylesheet preprocessing) to look after itself, and resurrect itself&#8221;.  But tomorrow we want more genericity regarding &#8230;<\/p>\n<ul>\n<li>more Windows friendly aspects to &#8220;watchdog&#8221; talk<\/li>\n<li>allow for multiple (CSS stylesheet) file set arrangements &#8230; but also (a more thorough &#8220;watchdog&#8221; should) &#8230;<\/li>\n<li>allow for a &#8220;complete shutdown, and not resurrect&#8221; mode of use<\/li>\n<\/ul>\n<hr>\n<p id='scssspt'>Previous relevant <a target=_blank title='Sass CSS Stylesheet Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/sass-css-stylesheet-primer-tutorial\/'>Sass CSS Stylesheet Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/sass_scss.pdf\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Sass CSS Stylesheet Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/sass_scss.jpg\" title=\"Sass CSS Stylesheet Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Sass CSS Stylesheet Primer Tutorial<\/p><\/div>\n<p>When compartmentalizing web design work, and you&#8217;ve already done a compartmentalization to &#8230;<\/p>\n<ul>\n<li>backend &#8211; (ie. &#8220;the data&#8221;, &#8220;the configuration&#8221;) &#8230; and &#8230;<\/li>\n<li>frontend &#8211; (ie. &#8220;the look&#8221;, &#8220;the functionality&#8221;)<\/li>\n<\/ul>\n<p> &#8230; a very natural, and intuitive way to divvy up some of the tasks for &#8220;frontend&#8221; above, a programmer or developer or team could work on &#8230;<\/p>\n<p><code><br \/>\nCSS styling<br \/>\n<\/code><\/p>\n<p> &#8230; both in a &#8230;<\/p>\n<ul>\n<li>project wide CSS styling sense &#8230; and into &#8230;<\/li>\n<li>nuances for exceptional webpages, perhaps<\/li>\n<\/ul>\n<p> &#8230; and it is here that we think today&#8217;s (&#8220;Hello World&#8221;-ish) trial of the <a target=_blank title='Sass Syntactically Awesome Style Sheets' href='http:\/\/sass-lang.com'>Sass<\/a> (&#8220;Syntactically Awesome Style Sheets&#8221;) command line product should be of interest for you.<\/p>\n<p>Let&#8217;s list in broad brush terms what Sass is capable of as far as CSS styling goes, and which we show you a stream of consciousness view of with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/sass_scss.pdf\" title=\"Click picture\">PDF slideshow<\/a> presentation (showing you an install on a MacBook Pro, and showing its features, and the mock up of a Sass *.scss file along with its imagined &#8220;sass &#8211;watch&#8221; manipulation to change the look of a mockup webpage) &#8230;<\/p>\n<ul>\n<li>ability to preprocess, facilitating that compartmentalization thought above, command line &#8220;sass &#8211;watch&#8221; option can have a developer working on CSS stylesheet files (separately to other developers working on HTML (or server developers on PHP), separately to other developers working on Javascript) that are not the live CSS files, one step removed via &#8220;sass&#8221; looking out for changes and automatically building the live CSS files when Sass *.scss files are saved &#8230; as well as syntax and cross-browser thoughts such as &#8230;<\/li>\n<li>ability to include snippets (&#8220;partials&#8221;) or import from other Sass *.scss stylesheet files<\/li>\n<li>ability to have Sass variables<\/li>\n<li>ability to handle Sass nesting syntax<\/li>\n<li>ability to include Sass mixins to help with those cross-browser prefix (eg. &#8220;-webkit-&#8220;, &#8220;-ms-&#8220;) directive complications<\/li>\n<li>ability to share Sass (CSS) properties from one selector to another (&#8220;extend\/inherit&#8221;)<\/li>\n<li>ability to do mathematics via Sass &#8220;operators&#8221; helping convert hard-coded dimensions in pixels (px) to percentage (%) values better for responsive design principles<\/li>\n<\/ul>\n<p>We hope you try out this wonderful software tool for yourself.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d46494' onclick='var dv=document.getElementById(\"d46494\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46494' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d46503' onclick='var dv=document.getElementById(\"d46503\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/crontab\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46503' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d46509' onclick='var dv=document.getElementById(\"d46509\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/php\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46509' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d46517' onclick='var dv=document.getElementById(\"d46517\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/execution\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46517' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Of course we&#8217;d like to quickly get to the &#8220;watchdog&#8221; aspects of yesterday&#8217;s Sass CSS Stylesheet Supervisor Watchdog Tutorial, but we need to tie down the &#8220;supervisor&#8221; parts, in progress today, where they are submitted as background tasks that run &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/sass-css-stylesheet-supervisor-execution-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,29,33,37],"tags":[3092,126,234,274,275,281,2457,2325,602,2532,677,703,707,725,2178,744,3093,2621,2120,932,1991,1075,3091,1209,1211,1212,1222,1238,1244,1319,1721,1719,1397,1407,1435],"class_list":["post-46517","post","type-post","status-publish","format-standard","hentry","category-elearning","category-operating-system","category-software","category-tutorials","tag-automate","tag-background","tag-command-line","tag-crontab","tag-cross-browser","tag-css","tag-editing","tag-execution","tag-import","tag-include","tag-korn-shell","tag-linked-list","tag-linux","tag-mac-os-x","tag-macos","tag-mamp","tag-mixin","tag-nesting","tag-path","tag-php","tag-responsive-design","tag-row","tag-sass","tag-style","tag-stylesheet","tag-styling","tag-supervisor","tag-table","tag-task-schedular","tag-tutorial","tag-variable","tag-watch","tag-watchdog","tag-web-design","tag-windows"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46517"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=46517"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46517\/revisions"}],"predecessor-version":[{"id":46519,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46517\/revisions\/46519"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=46517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=46517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=46517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}