Jamesy.me.uk

One of the things I've been meaning to do for a while is learn to use SASS. The problem being that I've never had an opportunity, usually I am developing new features for Lovefresh and the primary focus then is getting them working. The CSS files have been built up since before I began majorly working on them, and despite there being converters built into the Gem, the idea of redoing all that CSS never appealed to me. 

My mother has asked me to do her a site for her new cake business plans. Finally having a fresh slate, I gave it a go. My god! It's like the coding mental revolution that was HAML. Nesting code to avoid the mindless repetition, using Mixins to produce decent CSS3 without copying and pasting webkit, moz and sometimes o is just damn awesome. Here are some examples:

@mixin border-radius ($radii) {
                  	-webkit-border-radius: $radii;
                  	-moz-border-radius: $radii;
                  	-ms-border-radius: $radii;
                  	-o-border-radius: $radii;
                  	border-radius: $radii;
                  }
                  
                  @mixin box-shadow($x, $y, $s: 0, $c: rgba(255,255,255,0.35)) {
                  	-webkit-box-shadow: $x $y $s $c;
                  	-moz-box-shadow: $x $y $s $c;
                  	-ms-box-shadow: $x $y $s $c;
                  	-o-box-shadow: $x $y $s $c;
                  	box-shadow: $x $y $s $c;
                  }

I'll get round to converting everything else eventually. As well as uploading all my Scotland photos and writing that up. Time is going a million miles an hour, predictably when heading towards exam results day...

Anyway, here's what nesting and parent selectors look like:

#actions {
                  	width:320px;
                  	margin-left:14px;
                  	float:left;
                  	a {
                  		width:320px;
                  		overflow:hidden;
                  		text-indent:999px;
                  		margin-bottom:15px;
                  	}
                  	#order-now {
                  		background-position:-320px 0;
                  		&:hover {
                  			background-position:-320px -50px;
                  		}
                  		&:active {
                  			background-position:-320px -100px;
                  		}
                  	}
                  	#contact {
                  		background-position:0 0;
                  		&:hover {
                  			background-position:0 -50px;
                  		}
                  		&:active {
                  			background-position:0 -100px;
                  		}
                  	}
                  }

	before_filter :require_login, :except => [:home, :index, :show, :archives, :tags, :rss]
                  	before_filter :monthly_archive
                  	before_filter :sidebar, :except => [:new, :edit]
                  	
                  	def index
                  		@posts = Post.paginate(:all, :page => params[:page], :per_page => 10)
                  	end
                  	
                  	def show
                  		@post = Post.find(params[:id])
                  		@comments = @post.comments.paginate(:page => params[:page], :per_page => 5000, :order => 'created_at ASC')
                  		@comment = @post.comments.build
                  	end

 before_filter :require_login, :except => [:home, :index, :show, :archives, :tags, :rss]
                   before_filter :monthly_archive
                   before_filter :sidebar, :except => [:new, :edit]
                   
                   def index
                    @posts = Post.paginate(:all, :page => params[:page], :per_page => 10)
                   end
                   
                   def show
                    @post = Post.find(params[:id])
                    @comments = @post.comments.paginate(:page => params[:page], :per_page => 5000, :order => 'created_at ASC')
                    @comment = @post.comments.build
                   end

 addPane : function() {
                    this.addForm({
                     '' : {type : 'title', txt : 'Insert Code'},
                     'code' : {type : 'content', 'value' : '', style : {width: '340px', height : '200px'}}
                    });
                   },

Stupid mistake:

 	var nicSyntaxButton = nicEditorAdvancedButton.extend({
                  			width : '350px',
                  		
                  			addPane : function() {
                  				this.addForm({
                  					'' : {type : 'title', txt : 'Insert Code'},
                  					'code' : {type : 'content', 'value' : '', style : {width: '340px', height : '200px'}}
                  				});
                  			},
                  		
                  			submit : function(e) {
                  				var code = this.ne.selectedInstance.getContent() + "
"+this.inputs['code'].value.replace('	', ' ')+"
";
                  				this.ne.selectedInstance.setContent(code);
                  				this.removePane();
                  			}
                  		});