/    Sign up×
Community /Pin to ProfileBookmark

Sass and Scss

Copy linkTweet thisAlerts:
Feb 25.2013

Hi, I just started reading on Sass and Scss. I am not sure about a few things.

  • 1.

    My understanding is in order to use Sass or Scss, first I need to write a .sass or .scss file,
    then use ruby to compile it into a css file, it’s not something like I would do in the html file to link to and external css file, and it not compiled in real time when the web page is loading. eg. In the <head> section, I would do this:
    <link rel=”stylesheet” type=”text/css” href=”style.css” />
    but I would not write
    <link rel=”stylesheet” type=”text/css” href=”style.[COLOR=”#FF0000″]scss[/COLOR]” /> or <link rel=”stylesheet” type=”text/css” href=”style.[COLOR=”#FF0000″]sass[/COLOR]” />
    am I right?

  • 2.

    With sass or scss does it mean that in can keep updating style.css using ruby while the web site is live?

  • 3.

    In what circumstance would I use Sass orScss instead of just plain old css?

  • 4.

    Does the server, the host must have ruby installed?

  • 5.

    The only different between sass and scss is that sass and scss file are identical except sass does not have the {} braces, right?

    • Thank you anyone for clear up my confusions. ?

    to post a comment
    CSS

    1 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @wmwongFeb 28.2013 — 
  • 1. That is correct. SASS/SCSS need to be compiled into CSS. Your HTML file uses the CSS file.

  • 2. Depending on how you've set things up, you can have Ruby recompile on each request. However, this is not advised on a production server as it eats CPU cycles. It is better to precompile your SASS/SCSS files into CSS and host only your CSS files on the production server. This will speed things up.

  • 3. SASS/SCSS is great in keeping your styles DRY (Don't Repeat Yourself). The benefits of DRY are many, but a few that stand out here are smaller files to look at which helps maintainability and ease of update since you would make a lot of things a variable, like colours or font-size. You only need to change the variables in one place. If you get more advanced, you get have mixins that can be reused, like rounded corners or drop shadows. If you want to see the full power of SASS/SCSS in action, check out the Compass framework at compass-style.org (sorry, I can't post URLs yet).

  • 4. The server does not need to have Ruby installed if you've already precompiled SASS/SCSS into CSS and are only uploading CSS to your production server.

  • 5. Correct. And no ; semicolons too. However, I would suggest using SCSS as it is ultimately closer to CSS and easier for other people to understand if they've never seen SASS/SCSS before. Also, I believe the community is leaning towards SCSS more.


    • Hope that clears some things up! ?
    ×

    Success!

    Help @MacPC spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.1,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...