{"id":46494,"date":"2019-09-23T03:01:17","date_gmt":"2019-09-22T17:01:17","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=46494"},"modified":"2019-10-02T07:47:44","modified_gmt":"2019-10-01T21:47:44","slug":"sass-css-stylesheet-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/sass-css-stylesheet-primer-tutorial\/","title":{"rendered":"Sass CSS Stylesheet Primer Tutorial"},"content":{"rendered":"<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","protected":false},"excerpt":{"rendered":"<p>When compartmentalizing web design work, and you&#8217;ve already done a compartmentalization to &#8230; backend &#8211; (ie. &#8220;the data&#8221;, &#8220;the configuration&#8221;) &#8230; and &#8230; frontend &#8211; (ie. &#8220;the look&#8221;, &#8220;the functionality&#8221;) &#8230; a very natural, and intuitive way to divvy up &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/sass-css-stylesheet-primer-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,37],"tags":[3092,234,275,281,2457,602,2532,3093,2621,1991,3091,1209,1211,1212,1319,1721,1719,1407],"class_list":["post-46494","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-automate","tag-command-line","tag-cross-browser","tag-css","tag-editing","tag-import","tag-include","tag-mixin","tag-nesting","tag-responsive-design","tag-sass","tag-style","tag-stylesheet","tag-styling","tag-tutorial","tag-variable","tag-watch","tag-web-design"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46494"}],"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=46494"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46494\/revisions"}],"predecessor-version":[{"id":46499,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46494\/revisions\/46499"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=46494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=46494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=46494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}