Welcome to WebmasterWorld Guest from 23.21.38.201

Forum Moderators: not2easy

Using Sass or Less

going from local development to live server

   
5:15 pm on Jan 8, 2014 (gmt 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)

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



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)



@Fotiman, thank you for clarifying that for me!
6:58 pm on Jan 8, 2014 (gmt 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)

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



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)

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



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)



@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)



@Fotiman

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

WebmasterWorld Senior Member 10+ Year Member



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)

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




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)

WebmasterWorld Senior Member 5+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



@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)

WebmasterWorld Senior Member 5+ Year Member



@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)



@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)

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



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)

WebmasterWorld Senior Member 10+ Year Member



@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)

WebmasterWorld Senior Member 10+ Year Member



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

WebmasterWorld Senior Member 5+ Year Member



@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.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month