librelist archives

Re: [nesta] Re: Sass or SCSS

From:

Wynn Netherland

Date:

2011-03-18 @ 15:36

The Sass syntax is here to stay. I prefer it, but choose which one suits you
better. You can even mix and match partials of each, just not in the same
file.

---
Wynn Netherland
web: http://wynn.fm
twitter / skype / facebook: pengwynn
linkedin: http://linkedin.com/in/netherland

On Fri, Mar 18, 2011 at 7:22 AM, Hersh Bhasin <hersh_b@yahoo.com> wrote:

> I am writing my custom sylesheets & cannot decide between Sass or SCSS.
> Nesta's sylesheets are all Sass but I understand SCSS is the newer way.
> Will Sass be deprecated for SCSS? Any suggestions on which style to use?
> Thanks
> Hersh
>
>
>

 
>>I wonder if you might have got the wrong end of the stick with this code
 
ha..ha.. looks like I did; but luckily my hack just substituted "book" for
"sheet" and the code continued to work as before, as that was only a 
naming change; however, since I did modify the word that was required to 
be modified (i.e. sass to scss) my hack worked.
 
>> you could convert everything to SCSS
I did...I converted everything to scss &  happy to report that everything 
works as expected now
Thanks for the explanation.

Hersh
--- On Mon, 3/21/11, Graham Ashton <graham@effectif.com> wrote:


From: Graham Ashton <graham@effectif.com>
Subject: Re: [nesta] Re: Sass or SCSS
To: nesta@librelist.com
Date: Monday, March 21, 2011, 1:02 PM


On 18 Mar 2011, at 19:55, Hersh Bhasin wrote:

> get '/css/:book.css' do
>     content_type 'text/css', :charset => 'utf-8'
>     cache scss(params[:book].to_sym)
> end

I wonder if you might have got the wrong end of the stick with this code. 
In the first line, ':book' is a Ruby symbol. Sinatra uses that to ensure 
that the params hash has a key in it called :book, and it sets the value 
for that hash key to the name of the CSS file that was requested.

So if you request /css/book.css, params[:book] will be set to 'book'. If 
you request /css/master.css then params[:book] will be set to 'master', 
and :master will get passed to the scss() method.

There was a sentence in the docs (that I'm just re-jigging quickly, but 
this sentence will remain) that said this: "If you’d rather use the SCSS 
format for Sass, you can also change the stylesheet route so that it calls
the scss method instead of sass."

It meant that all you needed to do was modify one character in the route 
that handles CSS files:

    get '/css/:sheet.css' do
      content_type 'text/css', :charset => 'utf-8'
      cache scss(params[:sheet].to_sym)
    end

> However when I add this bit of code, though Nesta finds book.scss, it 
now does not find master.sass. The error in terminal says that Nesta is 
expecting to find master.scss (instead of master.sass.)

If you want to serve book.css from a .scss file and keep master.sass 
working as before, your best bet is a route like this (instead of any of 
the above):

    get '/css/book.css' do
      content_type 'text/css', :charset => 'utf-8'
      cache scss(:book)
    end

Alternatively, you could convert everything to SCSS with the sass-convert program.

Cheers,
Graham

However when I add this bit of code, though Nesta finds book.scss, it now 
does not find master.sass. The error in terminal says that Nesta is 
expecting to find master.scss (instead of master.sass.) So, it appears 
that you cannot mix and match saas and scss. Is that right? (or is it just
something crazy on my install?)

--- On Fri, 3/18/11, Hersh Bhasin <hersh_b@yahoo.com> wrote:


From: Hersh Bhasin <hersh_b@yahoo.com>
Subject: Re: [nesta] Re: Sass or SCSS
To: nesta@librelist.com
Date: Friday, March 18, 2011, 2:04 PM






I agree with Charles: this important bit of information should have its 
own h1 heading. I would never have seen it until you pointed out-- and I 
was stuck on this very point.  I think a concrete example, spelling out 
the procedure would be useful. Something like:

if your stylesheet is called book.scss, add this code in the app.config of
your template :


     get '/css/:book.css' do
            content_type 'text/css', :charset => 'utf-8'
            cache scss(params[:book].to_sym)
      end

thanks all for your insight in the sass vs scss
--- On Fri, 3/18/11, Charles Roper <reachme@charlesroper.co.uk> wrote:


From: Charles Roper <reachme@charlesroper.co.uk>
Subject: Re: [nesta] Re: Sass or SCSS
To: nesta@librelist.com
Date: Friday, March 18, 2011, 1:15 PM


On 18 March 2011 16:50, Graham Ashton <graham@effectif.com> wrote:
> How did you find the docs on switching to SCSS? I only wrote that bit a 
couple of days ago.

I hadn't got that far to be honest. I'm still poking around. But yeah,
I can see that moving the instructions you mention to their own page
would be useful. They'd be quite hard to find down where they are now.
Also for people who haven't read about routes yet, you might want to
link to a section on that. Or spell out exactly what needs to be done
to enable SCSS instead of Sass.

Cheers,
Charles

On 18 Mar 2011, at 19:55, Hersh Bhasin wrote:

> get '/css/:book.css' do
>     content_type 'text/css', :charset => 'utf-8'
>     cache scss(params[:book].to_sym)
> end

I wonder if you might have got the wrong end of the stick with this code. 
In the first line, ':book' is a Ruby symbol. Sinatra uses that to ensure 
that the params hash has a key in it called :book, and it sets the value 
for that hash key to the name of the CSS file that was requested.

So if you request /css/book.css, params[:book] will be set to 'book'. If 
you request /css/master.css then params[:book] will be set to 'master', 
and :master will get passed to the scss() method.

There was a sentence in the docs (that I'm just re-jigging quickly, but 
this sentence will remain) that said this: "If you’d rather use the SCSS 
format for Sass, you can also change the stylesheet route so that it calls
the scss method instead of sass."

It meant that all you needed to do was modify one character in the route 
that handles CSS files:

    get '/css/:sheet.css' do
      content_type 'text/css', :charset => 'utf-8'
      cache scss(params[:sheet].to_sym)
    end

> However when I add this bit of code, though Nesta finds book.scss, it 
now does not find master.sass. The error in terminal says that Nesta is 
expecting to find master.scss (instead of master.sass.)

If you want to serve book.css from a .scss file and keep master.sass 
working as before, your best bet is a route like this (instead of any of 
the above):

    get '/css/book.css' do
      content_type 'text/css', :charset => 'utf-8'
      cache scss(:book)
    end

Alternatively, you could convert everything to SCSS with the sass-convert program.

Cheers,
Graham

I agree with Charles: this important bit of information should have its 
own h1 heading. I would never have seen it until you pointed out-- and I 
was stuck on this very point.  I think a concrete example, spelling out 
the procedure would be useful. Something like:

if your stylesheet is called book.scss, add this code in the app.config of
your template :


     get '/css/:book.css' do
            content_type 'text/css', :charset => 'utf-8'
            cache scss(params[:book].to_sym)
      end

thanks all for your insight in the sass vs scss
--- On Fri, 3/18/11, Charles Roper <reachme@charlesroper.co.uk> wrote:

From: Charles Roper <reachme@charlesroper.co.uk>
Subject: Re: [nesta] Re: Sass or SCSS
To: nesta@librelist.com
Date: Friday, March 18, 2011, 1:15 PM

On 18 March 2011 16:50, Graham Ashton <graham@effectif.com> wrote:
> How did you find the docs on switching to SCSS? I only wrote that bit a 
couple of days ago.

I hadn't got that far to be honest. I'm still poking around. But yeah,
I can see that moving the instructions you mention to their own page
would be useful. They'd be quite hard to find down where they are now.
Also for people who haven't read about routes yet, you might want to
link to a section on that. Or spell out exactly what needs to be done
to enable SCSS instead of Sass.

Cheers,
Charles

On 18 Mar 2011, at 18:04, Hersh Bhasin wrote:

> I agree with Charles: this important bit of information should have its 
own h1 heading. I would never have seen it until you pointed out-- and I 
was stuck on this very point.

Nesta's docs aren't task based; I'm afraid you'll have to actually sit 
down and read them to get a good overview of how to change stuff. The 
/docs/design pages probably aren't organised as well as they could be yet 
and I want to improve that, but I haven't time to write tutorials on 
various different tasks at the moment (hence the need for reading them 
all).

I've moved the template engine stuff to its own page though, and hopefully
made this a bit easier to follow.

http://nestacms.com/docs/design/custom-designs
http://nestacms.com/docs/design/templating-engines

Yeah, like Wynn says, the classic Sass whitespace-sensitive syntax is here
to stay:

http://nex-3.com/posts/102-the-indented-sass-syntax-is-here-to-stay

I used Sass for a few projects before SCSS existed and found the
whitespace-sensitivity aggravating, while its brevity was liberating.
Ultimately I've decided on SCSS as there's a reduced mental load when
'reading' it. That is, when I'm looking at CSS in Firebug, looking at
others' CSS, looking at snippets and tutorials and articles, I find it
easier to apply SCSS than do the mental conversion to Sass. It's not a huge
mental drain, but it's there. Another plus is that you can rename a CSS file
to SCSS and it'll compile. That's pretty neat.

One other point, the SCSS bundle for Textmate is more actively maintained
that the Sass bundle. If you use Textmate or something that is compatible
with its syntax files (like Sublime Text, or Redcar), that could be
significant.

Charles

On 18 Mar 2011, at 16:47, Charles Roper wrote:

> I've decided on SCSS as there's a reduced mental load when 'reading' it.

How did you find the docs on switching to SCSS? I only wrote that bit a 
couple of days ago.

They're at the bottom of this page:

http://nestacms.com/docs/design/custom-designs

I suspect I should move them to their own page, and give them an entry in 
the menu...

On 18 March 2011 16:50, Graham Ashton <graham@effectif.com> wrote:
> How did you find the docs on switching to SCSS? I only wrote that bit a 
couple of days ago.

I hadn't got that far to be honest. I'm still poking around. But yeah,
I can see that moving the instructions you mention to their own page
would be useful. They'd be quite hard to find down where they are now.
Also for people who haven't read about routes yet, you might want to
link to a section on that. Or spell out exactly what needs to be done
to enable SCSS instead of Sass.

Cheers,
Charles