Index

Sassy Cascading Style Sheets

both sass and scss are part of the same scriptin language that compiles into CSS they offer the same powerful features making writing CSS easier and more powerful

such as variables, nesting, partials, mixins, functions, ...

actually the difference lies in ther syntax

sass

sass stands for syntactically awesome style sheets

it's know for its indented syntax which means you don't need curly braces or semicolons

body
    .container
        width:100%
        margin-top:20px

as you can see only indentations are used to define blocks of code no semicolons and no curly braces

scss

sassy css

follows the more traditional CSS like syntax meaning you will still use curly braes and semicolons to define blocks of code.

body {
  .container {
    width:100%;
    margin-top:20px;
  }
}

it looks almost identical to regular CSS with just a few added features like nesting.

Their file extensions .sass .scss allow you to quickly identify which tax you're dealing with at a glance.

scss tends to be more widely adopted especially in larger teams and projects. This is mainly because scss closely resembles regular css making it easier for developers transitoning from standard css.

https://sass-lang.com/

http://sass.hk/about/

mac:

brew install sass/sass/sass

https://www.bilibili.com/video/BV114411Y7Ry/?spm_id_from=333.788.recommend_more_video.2&trackid=web_related_0.router-related-2206146-vhnjg.1762990127650.183&vd_source=73e7d2c4251a7c9000b22d21b70f5635