{"id":2716,"date":"2017-12-07T12:59:22","date_gmt":"2017-12-07T07:29:22","guid":{"rendered":"https:\/\/cns72.com\/vytcdc.com.sg\/?p=2716"},"modified":"2019-11-20T12:15:03","modified_gmt":"2019-11-20T06:45:03","slug":"what-is-sass","status":"publish","type":"post","link":"https:\/\/cns72.com\/vytcdc.com.sg\/what-is-sass\/","title":{"rendered":"What is Sass?"},"content":{"rendered":"<p>You\u2019ve probably heard a lot about <a href=\"http:\/\/sass-lang.com\/\">Sass<\/a> (Syntactically Awesome Stylesheets), but you might still be a little hazy on what it actually is. Basically, Sass is one of a class of tools called CSS preprocessors. Other popular examples include Less and Stylus. Preprocessors help us code more efficiently by adding special features into normal CSS, such as variables, nested rules, mixins, and more.<\/p>\n<h2>Why use it?<\/h2>\n<p>Have you ever had to use <em>Find-and-Replace<\/em> to make edits to colors or fonts in your stylesheet? Have you had to copy blocks of code over to multiple other elements in order for them to have the same custom styles? Do your stylesheets get a little repetitive or hairy sometimes? These are all common predicaments that bother every serious developer. Our cardinal rule, after all, is to keep our code DRY.<\/p>\n<p>Sass helps us do just that.<\/p>\n<p>Sure, a few repeated lines of CSS may not seem like that big of a deal for our small projects in class, but when you\u2019re in charge of managing thousands of code in the real world, whether for a small startup or a big corporation, things can get pretty messy if you\u2019re careless. CSS preprocessors like Sass help us alleviate that risk, and are thus a common requirement in many of today\u2019s job postings.<\/p>\n<h3>Sass vs. SCSS<\/h3>\n<p>There are actually two kinds of syntax out there for Sass. Check &#8217;em out:<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-2717\" src=\"https:\/\/cns72.com\/vytcdc.com.sg\/wp-content\/uploads\/2017\/12\/sass-vs-scss.png\" alt=\"\" width=\"798\" height=\"300\" \/><\/p>\n<p>As you can see, <code class=\"prettyprint prettyprinted\"><span class=\"pun\">.<\/span><span class=\"pln\">sass<\/span><\/code> syntax removes semicolons and curly brackets, and is arguably easier to type. On the other hand, many find the newer <code class=\"prettyprint prettyprinted\"><span class=\"pun\">.<\/span><span class=\"pln\">scss<\/span><\/code> syntax easier to read. In addition, SCSS is fully compliant with CSS, meaning you can rename your <code class=\"prettyprint prettyprinted\"><span class=\"pun\">.<\/span><span class=\"pln\">css<\/span><\/code> file to <code class=\"prettyprint prettyprinted\"><span class=\"pun\">.<\/span><span class=\"pln\">scss<\/span><\/code> and all your old code will still work. SCSS acts and looks more like your usual CSS, afterall, except with more tricks up its sleeve. If you&#8217;re interested in reading more, check out this <a href=\"http:\/\/thesassway.com\/editorial\/sass-vs-scss-which-syntax-is-better\">in-depth comparison<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You\u2019ve probably heard a lot about Sass (Syntactically Awesome Stylesheets), but you might still be a little hazy on what it actually is. Basically, Sass is one of a class of tools called CSS preprocessors. Other popular examples include Less and Stylus. Preprocessors help us code more efficiently by adding special features into normal CSS, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2718,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[45],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.0.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is Sass? - TCDC<\/title>\n<link rel=\"canonical\" href=\"https:\/\/cns72.com\/vytcdc.com.sg\/what-is-sass\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is Sass? - TCDC\" \/>\n<meta property=\"og:description\" content=\"You\u2019ve probably heard a lot about Sass (Syntactically Awesome Stylesheets), but you might still be a little hazy on what it actually is. Basically, Sass is one of a class of tools called CSS preprocessors. Other popular examples include Less and Stylus. Preprocessors help us code more efficiently by adding special features into normal CSS, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cns72.com\/vytcdc.com.sg\/what-is-sass\/\" \/>\n<meta property=\"og:site_name\" content=\"TCDC\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vytcdc\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-07T07:29:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-20T06:45:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cns72.com\/vytcdc.com.sg\/wp-content\/uploads\/2017\/12\/sass-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vytcdc\" \/>\n<meta name=\"twitter:site\" content=\"@vytcdc\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"2 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/#website\",\"url\":\"https:\/\/cns72.com\/vytcdc.com.sg\/\",\"name\":\"TCDC\",\"description\":\"Career Development Courses\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/cns72.com\/vytcdc.com.sg\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/what-is-sass\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/cns72.com\/vytcdc.com.sg\/wp-content\/uploads\/2017\/12\/sass-logo.jpg\",\"width\":900,\"height\":400},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/what-is-sass\/#webpage\",\"url\":\"https:\/\/cns72.com\/vytcdc.com.sg\/what-is-sass\/\",\"name\":\"What is Sass? - TCDC\",\"isPartOf\":{\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/what-is-sass\/#primaryimage\"},\"datePublished\":\"2017-12-07T07:29:22+00:00\",\"dateModified\":\"2019-11-20T06:45:03+00:00\",\"author\":{\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/#\/schema\/person\/c57e5f7b91685a93f23a57aaafd38e82\"},\"breadcrumb\":{\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/what-is-sass\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cns72.com\/vytcdc.com.sg\/what-is-sass\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/what-is-sass\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/\",\"url\":\"https:\/\/cns72.com\/vytcdc.com.sg\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/what-is-sass\/\",\"url\":\"https:\/\/cns72.com\/vytcdc.com.sg\/what-is-sass\/\",\"name\":\"What is Sass?\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/#\/schema\/person\/c57e5f7b91685a93f23a57aaafd38e82\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f8f959f70994a4401c8704d6b2143474?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/posts\/2716"}],"collection":[{"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/comments?post=2716"}],"version-history":[{"count":0,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/posts\/2716\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/media\/2718"}],"wp:attachment":[{"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/media?parent=2716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/categories?post=2716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/tags?post=2716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}