Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

ziddy
ziddy
3,463 Points
Posted by ziddy
ziddy
3,463 Points

Why we need Sass?

Hi, Why we need to learn Sass and when we are going to use it? Is normal CSS not enough?

4 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Here is an example of how handy Sass can be in saving time, this is some Sass from my site and the CSS it produced.

As you can see it saved me a lot of coding.

header {
    background-color: $primary-color;
        p {
            background-image: none;
            @include rem-fallback(padding, 1, 0, 1, 1);
            text-align: left;
            @include rem-fallback(font-size, .7);
            color: #fff;
            text-shadow: $text-shadow-dark;
            @media only screen and (min-width: $media * 4) {
                @include rem-fallback(font-size, .9);
                text-shadow: $text-shadow-dark;
                @include rem-fallback(padding, 2, 0, 2, 12);
                @media only screen and (min-width: $media * 6) {
                    @include rem-fallback(font-size, 1.2);
                    text-shadow: $text-shadow-dark;
                    @include rem-fallback(padding, 5, 0, 4, 2);
                    background-image: url("../img/browser.svg");
                    background-repeat: no-repeat;
                    span {
                        @include rem-fallback(font-size, .9);
                        color: #0810fa;
                            @media only screen and (min-width: $media * 4) {
                            @include rem-fallback(font-size, 1.5);
                            color: #0810fa;
                            @media only screen and (min-width: $media * 6) {
                            @include rem-fallback(font-size, 2.25);
                            color: #0810fa;
                        }
                    }
                }   
            }
        }
    }
}

And the CSS.

header {
  background-color: #4d87e2; }
  header p {
    background-image: none;
    padding: 16px 0px 16px 16px;
    padding: 1rem 0rem 1rem 1rem;
    text-align: left;
    font-size: 11.2px;
    font-size: 0.7rem;
    color: #fff;
    text-shadow: 2px 2px 2px #46525f; }
    @media only screen and (min-width: 40rem) {
      header p {
        font-size: 14.4px;
        font-size: 0.9rem;
        text-shadow: 2px 2px 2px #46525f;
        padding: 32px 0px 32px 192px;
        padding: 2rem 0rem 2rem 12rem; } }
      @media only screen and (min-width: 40rem) and (min-width: 60rem) {
        header p {
          font-size: 19.2px;
          font-size: 1.2rem;
          text-shadow: 2px 2px 2px #46525f;
          padding: 80px 0px 64px 32px;
          padding: 5rem 0rem 4rem 2rem;
          background-image: url(../img/browser.svg);
          background-repeat: no-repeat; }
          header p span {
            font-size: 14.4px;
            font-size: 0.9rem;
            color: #0810fa; } }
          @media only screen and (min-width: 40rem) and (min-width: 60rem) and (min-width: 40rem) {
            header p span {
              font-size: 24px;
              font-size: 1.5rem;
              color: #0810fa; } }
            @media only screen and (min-width: 40rem) and (min-width: 60rem) and (min-width: 40rem) and (min-width: 60rem) {
              header p span {
                font-size: 36px;
                font-size: 2.25rem;
                color: #0810fa; } }
ziddy
ziddy
3,463 Points
ziddy
ziddy
3,463 Points

you seems very proficient with your code. Is it possible to use normal CSS in web app website?

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Ziddy,

When using Sass all your code must first be transformed to CSS in order for browsers to read, so yes everything i wrote in Sass can be done in CSS, the code you see at the bottom of my post is the Sass after it has be transformed into CSS.

Ive just started using Sass as a more convenient way of writing code. I would say you must learn CSS anyway before dipping your toes into Sass.

SO in answer to your question, yes everything can be done in CSS, Sass just speeds thing up.

Neville Barrett
Neville Barrett
6,141 Points
Neville Barrett
Neville Barrett
6,141 Points

Hi Ziddy,

Great question. Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). Sass extends CSS by providing several mechanisms available in more traditional programming languages, particularly object-oriented languages, but that are not available to CSS3 itself. SassScript is the scripting language itself. Sass consists of two syntaxes.

  1. The original syntax, called "the indented syntax." It uses indentation to separate code blocks and newline characters to separate rules.
  2. The newer syntax, "SCSS", uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate lines within a block.

The indented syntax and SCSS files are traditionally given the extensions .sass and .scss respectively. CSS3 consists of a series of selectors and pseudo-selectors that group rules that apply to them. When SassScript is interpreted, it creates blocks of CSS rules for various selectors as defined by the Sass file. The Sass interpreter translates SassScript into CSS.

You can find more information on Sass below:

http://en.wikipedia.org/wiki/Sass_(stylesheet_language)

http://sass-lang.com/

I hope this is helpful.

Thanks

ziddy
ziddy
3,463 Points
ziddy
ziddy
3,463 Points

Thank you for answering my question