Welcome to WebmasterWorld Guest from 54.167.46.29

Forum Moderators: not2easy

Message Too Old, No Replies

Using Sass or Less

going from local development to live server

     
5:15 pm on Jan 8, 2014 (gmt 0)

Junior Member

joined:June 6, 2012
posts: 104
votes: 0


I'm thinking about using the Bones theme for WordPress in a new project. The Bones theme uses Sass or Less as the pre processor.

I know you must have ruby and sass installed the live server where the site will reside. Once ruby and sass are on the server is there anything else that you need to do to compile the less or sass files?
6:51 pm on Jan 8, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4966
votes: 10


You actually DON'T need ruby and Sass installed on the server where the site will reside. Your local development environment can use Ruby/Sass and then the output (CSS files) can be pushed to your server. You may want to look into something like Compass, which includes Sass but provides a bunch of useful mixins.
6:56 pm on Jan 8, 2014 (gmt 0)

Junior Member

joined:June 6, 2012
posts: 104
votes: 0


@Fotiman, thank you for clarifying that for me!
6:58 pm on Jan 8, 2014 (gmt 0)

Junior Member

joined:June 6, 2012
posts: 104
votes: 0


So with Compass I don't even need to bother with installing ruby on my development machine?
7:08 pm on Jan 8, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4966
votes: 10


Compass is still a Ruby gem, so you'd still need it installed. However, you could try something like Scout [mhs.github.io], which runs Sass and Compass in a self-contained Ruby environment so you'll never have to worry about your Ruby setup.
10:52 pm on Jan 8, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


If you have to use that just grab the css off of a test installation and deploy the css on the production environment.

But the good thing about css: you do not need it at all.
It's even against the philosophy of CSS to have it as it'll create less efficient CSS than what you'd do if you'd use CSS properly. [Seriously!]

The main thing to know is that you can use specificity and order in CSS to group what you need together.
The most common argument I've seen is vaing variables to avoid repeatign colors in every class. Well, let's say you have a company color #123456 that you need on a bunch of classes, elements etc.

Nothing stops you from adding it just a few times in just one location of your CSS
h1, h2, h3, h4, h5 ,h6, .tltle, a {
color: #123456;
}
.box, .title, .footer {
border-color: #123456'
}
And then set the specific border withs you need on the different element s where you need them

Just remember that you do not need to define all of the properties you want on any element in one go, you can select an element a whole bunch of times as needed.
1:08 am on Jan 9, 2014 (gmt 0)

Junior Member

joined:June 6, 2012
posts: 104
votes: 0


@Fotiman

I installed Ruby, Sass and Compass and I have my WordPress install ready to go with the Bones theme. Do I need to point compass to watch the sass folder for changes? So when my styles.scss file is saved it is automatically compiled?
1:51 am on Jan 9, 2014 (gmt 0)

Junior Member

joined:June 6, 2012
posts: 104
votes: 0


@Fotiman

Ignore the last question, I downloaded Livereload and installed the extension into Chrome.
11:20 am on Jan 9, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 13, 2003
posts: 1240
votes: 0


It's even against the philosophy of CSS to have it as it'll create less efficient CSS than what you'd do if you'd use CSS properly. [Seriously!]


Any tool in the wrong hands will produce poor results.
4:07 pm on Jan 9, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4966
votes: 10



It's even against the philosophy of CSS to have it as it'll create less efficient CSS than what you'd do if you'd use CSS properly.

I somewhat disagree. Yes, it *can* produce less efficient CSS, but it depends on how you use it.
4:24 am on Jan 10, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 0


Every code generator I've seen has always failed in some way at some point and falls by the way side. These, too, will fail.
10:23 am on Jan 10, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 13, 2003
posts: 1240
votes: 0


@drhowarddrfine yes. If you dont know what you're doing.

I use SASS all day every day and generate highly efficient, modular, scalable CSS that is simple to maintain.

Its a tool. Use it correctly, and it will reward you.
1:41 pm on Jan 10, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 0


@benihana Every code generator I've seen has always failed in some way at some point and falls by the way side. These, too, will fail.
8:50 pm on Jan 10, 2014 (gmt 0)

Junior Member

joined:June 6, 2012
posts: 104
votes: 0


@Fontiman, I have Livereload installed with the browser extension in chrome but it doesn't seem to be compiling. I've made a couple of adjustments to link colors and livereload is displaying messages that the files were updated, complied and refreshed but I'm just not seeing the changes in the css.

Any idea what the issue may be?
9:32 pm on Jan 10, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4966
votes: 10


I've not used Livereload, so I don't think I can be much help. Sorry.
3:33 pm on Jan 15, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 13, 2003
posts: 1240
votes: 0


@drhowardfine

I respectfully disagree. Sass compiles code as I want it.

I think if you KNEW WHAT YOU WERE DOING WITH IT you may not have such a patronising tone.

your entire argument is based on other code generators you have used. I have categorically stated that it works extremely well for me, unless you have something tangible to add, please leave it to people who know what they are talking about.

I remember now why I stopped coming here.

[edited by: benihana at 3:35 pm (utc) on Jan 15, 2014]

3:33 pm on Jan 15, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 13, 2003
posts: 1240
votes: 0


-
3:15 pm on Jan 16, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 0


@benihana It may compile code as you want it but that doesn't mean it's the best solution. Automatic code generators for HLL to HLL never trump human coding.