{"id":11553,"date":"2022-02-03T10:00:00","date_gmt":"2022-02-03T01:00:00","guid":{"rendered":"https:\/\/www.gigas-jp.com\/appnews\/?p=11553"},"modified":"2022-02-02T18:24:07","modified_gmt":"2022-02-02T09:24:07","slug":"benefits-of-scss","status":"publish","type":"post","link":"https:\/\/www.gigas-jp.com\/appnews\/archives\/11553","title":{"rendered":"Benefits of SCSS"},"content":{"rendered":"\n

SCSS (Sassy CSS) is the superset, it’s the more advanced version of CSS. We can add additional functionalities to CSS such as variables, nesting , loops, indentations and more by using SCSS. All these additional functionalities can make writing CSS much easier and faster as compared to writing the traditional CSS.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Nesting<\/strong><\/p>\n\n\n\n

Nesting has many benefits:<\/p>\n\n\n\n

\n

  • Nesting prevents the need to write the same selector over and over. SASS allows us to use a nested syntax, which is code contained within another piece of code that performs a wider function. In SASS, nesting allows a cleaner way of targeting elements. In other words,\u00a0we can nest HTML elements by using\u00a0CSS selectors<\/a>.<\/li><\/p>\n\n\n\n

    <\/p>\n\n\n\n

  • Nesting is a more natural syntax and is easier and faster to read and understand.<\/li><\/p>\n\n\n\n

    <\/p>\n\n\n\n

  • Nested styles are more<\/li> <\/p>\n<\/div><\/div>\n\n\n\n
    \n

    Loops<\/strong><\/p>\n\n\n\n

    We can set up loops when SCSS is used. <\/p>\n<\/div><\/div>\n\n\n\n

    <\/p>\n\n\n\n

    Variables<\/strong><\/p>\n\n\n\n

     SCSS offers variables in order to declare re-used properties in one place. Using traditional CSS, we would need to repeat the same code over and over, but with SASS we can store these values as variables.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    <\/p>\n\n\n\n

    Mathematical functions<\/strong><\/p>\n\n\n\n

    In SASS, we can also use mathematical operations like +, -, *, \/, or %. This allows us to influence size specifications, for example.<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    Indentations<\/strong><\/p>\n\n\n\n

    The original SASS works with indentations and line breaks to structure the code. We don\u2019t need parentheses to display nesting or semicolons to mark line ends.<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    <\/p>\n\n\n\n

    By Tsuki<\/p>\n

    \n
    <\/g:plusone><\/div>\n
    \"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"<\/a>