![\"1_sass-hits-the-html5-developers-toolbox\"](\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/01\/1_SASS-Hits-the-HTML5-Developers-ToolBox.jpg\")
<\/a><\/p>\nNowadays, the technologies that front-end developers entails to know right out of the door have broadened to likewise incorporate tools that streamline the work they do. CSS preprocessor is the heart of front-end developers which supercharges their productivity, to compose more concise CSS, and to keep files organized. Either it\u2019s Sass, LESS, or Stylus, a pre-processor which can help build upon some of the CSS3\u2019s best features. In this blog, we will check out Superpowers of SASS and how it paced in the html5 developer’s toolbox.<\/p>\n
What is SASS?<\/span><\/p>\n This is the very first question comes in everyone\u2019s mind. Hampton Catlin<\/a> and Nathan Weizenbaum<\/a> proposed a better way to maintain a complicated stylesheet and they developed a superpower named SASS<\/a>, which stands for Syntactically Awesome Style Sheets.<\/p>\n How to get started with SASS?<\/span><\/p>\n Initial steps of process during installation. Guys don\u2019t panic below are the steps to install.<\/p>\n To run Sass, you will need to have Ruby installed. Mac guys are lucky one’s, Ruby already comes preinstalled. Numerous different libraries, such as libSass which migrate Sass to NodeJS, without any need for Ruby.<\/p>\n Linux<\/span><\/p>\n If you’re using Linux, you need to install Ruby first. You can install Ruby through the apt package manager, rbenv, or rvm.<\/span><\/p>\n To install SASS, you need to run a command in your terminal:<\/p>\n sudo su -c “gem install sass”<\/span><\/p>\n Windows<\/span><\/p>\n If you’re using windows, before you start using Sass you will need to install Ruby. The fastest way to get Ruby on your Windows computer is to use Ruby Installer. The installer will also install a command line powershell application that will let you use the Ruby libraries.<\/p>\n Mac<\/span><\/p>\n If you’re using Mac, ruby comes pre-installed. All you need to do is to run a command in the terminal.<\/p>\n Once everything is setup we can jump to the basics now.<\/p>\n Why to opt for Pre-Processing CSS?<\/span><\/p>\n During the research on CSS preprocessor. Using special, supercharged CSS files that include factors, capacities, “mixins”, and different components. Once the development completes or in process, these files would then be compiled into regular CSS files which are compatible to all web browsers because scss files do not have compatibility in web browsers.<\/p>\n With SASS the same mystical preprocessing takes place. The terminal will take your preprocessed Sass file and convert the sass syntax into a normal CSS syntax that you can use in your website.<\/p>\n The most direct way to make this happen is in your terminal. Once Sass is installed, you can run sass input.scss output.css<\/span> from your terminal. You can watch either individual files or entire directories. In addition, you can watch folders or directories with the –watch flag.<\/span><\/p>\n An example of running Sass while watching an entire directory is the following:<\/p>\n sass –watch app\/sass:public\/stylesheets<\/span><\/p>\n Using the terminal is just a option for those who have a good hand on it but there is always a way to compile. There a many open source and paid software\/applications for compiling. But we recommend using scout. Scout is a open source application good for pre-processing very simple to use.<\/p>\n 5 Reasons to consider SASS for your development<\/span><\/p>\n Let\u2019s have a closer look at some of Sass\u2019s core advantages and how they can transform CSS.<\/p>\n 1) Beat the Clock with Variables.<\/span><\/p>\n Sass provides variables as a mechanism to store information which can be reused throughout your stylesheet. Variables helps to cut down the time on repetitive work.<\/p>\n Let’s say you\u2019re using some cool shade in your application. Later on, your client doesn\u2019t like the shade, and then you\u2019re forced to change the colour, the only thing strikes are a lot of changes in the plain CSS. Well, sass reduces all this effort with variables. All you have to do is to declare a variable. You can store things like colours, fonts, or any CSS value you think you\u2019d reuse. Sass uses the $<\/span> symbol to make something a variable.<\/p>\n Here’s an example:<\/span><\/p>\n SASS SYNTAX<\/span><\/p>\n When the Sass is processed, it takes the variables that we define for the $font-stack<\/span> and $primary-color<\/span> and outputs normal CSS with our variable values placed in the CSS.<\/p>\n CSS SYNTAX<\/span><\/p>\n 2) Make your code easier to maintain<\/span><\/p>\n It\u2019s better known that fewer codes lead to better productivity which is forever a win. Many times HTML5 Responsive web designer<\/a> know about customization tools like libraries, frameworks and API\u2019s. Meanwhile, in respect to CSS, it\u2019s no contrary and SASS win the race with its features like \u201cmixins.\u201d By creating a mixin, developers can group CSS declarations and reuse them throughout the file, without a lot of tedious coding.<\/p>\n Instead of typing the same property over and over we write a mixin once then inherit whenever required.<\/p>\n To declare, @mixin<\/span> keyword is used followed by a rule border-radius<\/span> and brackets which would have a variable for that rule $radius.<\/span><\/p>\n Here’s an example:<\/span><\/p>\n SASS SYNTAX<\/span><\/p>\n <\/p>\n When defining a class for mixin, in this case it is .box<\/span> then you need to use \u201c@include\u201d<\/span> followed by a rule \u201cborder-radius\u201d<\/span>.<\/p>\n CSS SYNTAX<\/span><\/p>\n 3) Make your CSS more organized with Nesting in SASS<\/span><\/p>\n One more interesting feature with SASS is the ability to nest elements inside each other. When writing HTML you’ve probably noticed that it has a clear nested and visual hierarchy Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. But make sure that excessively nested rules will affect in CSS that could prove hard support and is generally considered bad practice.<\/p>\n Here’s a nested example:<\/span><\/p>\n SASS SYNTAX<\/span><\/p>\n CSS SYNTAX<\/span><\/p>\n 4) Build your CSS even more modular and easier to work with<\/span><\/p>\n The use of partials permits us an incredible approach to modularize our code, with a growing website the complexity increases which heads towards bigger CSS stylesheets but with SASS it makes it more portable and easier to maintain.<\/p>\n A partial is simply a Sass file named with a leading underscore such as _partial.scss<\/span> The underscore lets Sass know that the file is only a partial file and it should not be generated into a CSS file, however partials that are imported into the main scss file are compiled into the main css file and get converted into css syntax. Sass partials are used with the @import<\/span> directive.<\/p>\n Here’s an nested example:<\/span><\/p>\n SASS SYNTAX<\/span><\/p>\n 5) @extend saves your time<\/span><\/p>\n Here the word Inheritance plays a major role. One more time-saver concept especially beneficial to developers lets them share properties between selectors.<\/p>\n Let’s make it simple in developing a website there are series of the button like login, sign up, save and edit which is of the same shape, size, rounded edges, color, and fonts. Maybe Login goes for green, place a call to yellow, make payment goes to red and so forth but all attributes go same throughout the website. All these attributes will be coded once and inherited with the @extend<\/span> keyword for its use, which saves developers time.<\/p>\n For example we’re going to create a simple series of buttons for login, sign up, save and edit<\/p>\n SASS SYNTAX<\/span><\/p>\n What the above code does is it allows you to take the css properties in .login and apply them to .signup, .save & .edit. Once the code is generated into css it then looks something like this:<\/p>\n Here’s an example:<\/span><\/p>\n CSS SYNTAX<\/span><\/p>\n 6) Do Math with SASS operators<\/span><\/p>\n Sass permits you with the standard math functions like +,-,*, \/ and &. Obviously, these functions can fuse to create complex estimations.<\/p>\n The good news is Sass has a few built-in functions to help manipulate numbers. Functions like round(),percentage() , random(), floor(), round() etc.<\/p>\n SASS SYNTAX<\/span><\/p>\n Accordingly, we can conclude with CSS preprocessors that are impressive and help us to streamline our development process. While it gives the idea that Sass is popularly known for its feature-rich extensions which can make your CSS more maintainable, theme oriented and extendable. Browse our HTML5 website developers<\/a> for your next development projects.<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" SASS, the Buzzing word is the realm of web development industry. You may scratch your head in surfing over the gigantic database of google to get a quickstart on the…<\/p>\n","protected":false},"author":1,"featured_media":5948,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"dsgo_overlay_header":false,"dsgo_overlay_header_text_color":"","dsgo_overlay_skip_top_bar":false,"_designsetgo_exclude_llms":false,"footnotes":""},"categories":[1438,1445],"tags":[1757,1906,1907,1908,1909,1910,1911,1912,1578],"class_list":["post-5947","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-graphic-designing","category-html5-developers","tag-css","tag-css-stylesheets","tag-front-end-developers","tag-graphic-designers","tag-html5-developers-in-india","tag-html5-responsive-web-designer","tag-html5-website-developers","tag-sass-developers","tag-web-development"],"_links":{"self":[{"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/posts\/5947","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/comments?post=5947"}],"version-history":[{"count":1,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/posts\/5947\/revisions"}],"predecessor-version":[{"id":5949,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/posts\/5947\/revisions\/5949"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/media\/5948"}],"wp:attachment":[{"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/media?parent=5947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/categories?post=5947"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/tags?post=5947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n
\n$font-stack:Helvetica, sans-serif;
\n$primary-color: #333;
\nbody{
\nfont: 100% $font-stack;
\ncolor: $primary-color;
\n}
\n<\/code><\/p>\n
\nbody {
\nfont: 100% Helvetica, sans-serif;
\ncolor: #333;
\n}
\n<\/code><\/p>\n
\n@mixin border-radius($radius) {
\n-webkit-border-radius: $radius;
\n-moz-border-radius: $radius;
\n-ms-border-radius: $radius;
\nborder-radius: $radius;
\n}
\n.box { @include border-radius(10px); }<\/code><\/p>\n
\n.box {
\n-webkit-border-radius: 10px;
\n-moz-border-radius: 10px;
\n-ms-border-radius: 10px;
\nborder-radius: 10px;
\n}
\n<\/code><\/p>\n
\nCSS, doesn’t.<\/p>\n
\nnav {
\nul {
\nmargin: 0;
\npadding: 0;
\nlist-style: none;
\n}
\nli { display: inline-block; }
\na {
\ndisplay: block;
\npadding: 6px 12px;
\ntext-decoration: none;
\n}
\n}
\n<\/code><\/p>\n
\nnav ul {
\nmargin: 0;
\npadding: 0;
\nlist-style: none;
\n}
\nnav li {
\ndisplay: inline-block;
\n}
\nnav a {
\ndisplay: block;
\npadding: 6px 12px;
\ntext-decoration: none;
\n}
\n<\/code><\/p>\n
\n@import 'partial-file-name'; (this @import is written inside the main scss file)
\n<\/code><\/p>\n
\n.login {
\nborder: 1px solid #ccc;
\npadding: 10px;
\ncolor: #139016;
\n}
\n.signup{
\n@extend .login;
\nborder-color: green;
\n}
\n.save{
\n@extend .login;
\nborder-color: red;
\n}
\n.edit {
\n@extend .login;
\nborder-color: yellow;
\n}
\n<\/code><\/p>\n
\n.login, .signup, .save, .edit {
\nborder: 1px solid #cccccc;
\npadding: 10px;
\ncolor: #139016;
\n}
\n.signup {
\nborder-color: green;
\n}
\n.save {
\nborder-color: red;
\n}
\n.edit {
\nborder-color: yellow;
\n}
\n<\/code><\/p>\n
\n.container { width: 100%; }
\narticle[role=\"main\"] {
\nfloat: left;
\nwidth: 600px \/ 960px * 100%;
\n}
\naside[role=\"complementary\"] {
\nfloat: right;
\nwidth: 300px \/ 960px * 100%;
\n}
\n<\/code><\/p>\n