HAML + Blueprint + SASS + Wordpress(!?) - Port80 Forums. It's run by the Australian Web Industry Association. Founded in 2002, Port80 is proud of its informal meetings - no long speeches, no admission fees, no forced networking. Just an interesting talk, great discussion, a few drinks and the chance to meet others in your industry. Many of us tweet (@awia) and we're not too proud to chat on Facebook. Also, there's a LinkedIn page; well of course there is. The place where people's eyes do not glaze over Join hundreds of Australian web industry professionals discussing web and mobile technologies and the issues they raise.
Care about what you do? Join the Australian Web Industry Association. Easy SASS for wordpress using phamlp | The Accessible Design blog. Hi there, I’ve been getting quite into this SASS malarky so wanted to get it running on a new WordPress site I am developing. There are a few solutions out there using compass – eg Sass up your WordPress themes with Compass but installing this requires you to have sudo shell access to your server, install ruby and all that jazz. On most of the sites I work on the client doesn’t have that sort of access, let alone me. The steps Get phamlp and extract it to the root of your wordpress site In your themes header.php shove this lot in in : 'nested' ) ) ; $file = $_SERVER [ "DOCUMENT_ROOT" ] . Wrap in style tags – these have been omitted due to wordpress not liking them. And that will basically spit your compiled CSS – depending on your setup you may want to delete references to the default stylesheet.
Get PHAMLP to create a .css file If you want to go one step further & get phamlp to create a CSS file for you – you’ll need this handy PHP function I have written. Steps. Php - Wordpress with Haml/Sass. Sass for Wordpress. Sass - Syntactically Awesome Stylesheets. Introduction to Sass: Part 1. Introduction to Sass Today we’re going to show how Sass can simplify and speed up your styling workflow. You may also be interested in our Introduction to Haml screencast available on Screencasts.org. What is Sass? Like Haml, Sass is the brain child of Hampton Catlin and stands for Syntactically Awesome Stylesheets. And it lives up to it’s name, Sass stylesheets are awesome! CSS: Have You Ever Had To...
Have you ever had to do a find-and-replace in your stylesheet to change a hex color for a client? Have you ever had to pull out your calculator to figure out a column width in a multi-column design? Sass overcomes these issues with the introduction of variables, mixins, nestings and selector inheritance. Sass looks similar to CSS, but without the semi-colons and parentheses. #sidebar_ad display: block width: 250px height: 150px #banner_ad display: block width: 720px height: 90px Like Haml, Sass uses two-space indentations to define code nesting.
Variables This is what a variable looks like in Sass: Use Sass without Rails - makandra notes. Sass: A Designer’s Perspective | Viget Inspire. Let me start by saying that I am not a developer. Sure, I can write some pretty solid HTML and CSS, but beyond that I defer to our great team of developers. So when I first heard about Sass, the right side of my brain freaked out. While the idea of Syntactially Awesome Stylesheets sounds pretty cool, I was afraid that Sass was going to make writing CSS more like programming Ruby, PHP, or Javascript. If you've been scared away from using Sass for the same reason, I'm here to tell you that nothing could be farther from the truth. Sass actually gives us some really powerful ways of writing CSS more efficiently. If you're looking for a tutorial on getting started with Sass, this isn't it. It's important to note that Sass isn't going to be the best fit for every project by default.
Now let's get on with the details, starting with some tips and techniques that I found to be helpful. Use Variables and Mixins ... a Lot Syntactically awesome! Separate Your Stylesheets variables.scss mixins.scss. Front-end Maintainability with Sass and Style Guides | Engine Yard Ruby on Rails Blog. This way, when we need to use the color for our borders, we can just call on the color variable, `$color_border`. If we decide to change this color, we only need to change it in one place. If we need variations on this color (like for shadows and highlights), we can use that variable combined with Sass's built-in functions: We've used the "color_" prefix in these variable names to help avoid any clashes we might run into.
It also helps provide some inline context (documentation is always a good thing). The important thing here is we keep our variable and mix-in names descriptive, but we avoid using presentational names that could change one day. By using $color_text_callout instead of $color_text_blue we don't have to change all of our variable names if we change the text from blue to red. Variables and mix-ins are a great way to help improve and clean up semantic HTML (if it's done right).
To this: That's so much better, isn't it? Tagged: SASS CSS Framework Tutorial. The Demise of Plain CSS: Why Sass and Languages Like It Will Triumph. It is my opinion that these [tools like Sass] are only really of benefit to people who haven’t yet mastered writing CSS properly from the outset…Harry Roberts (CSSwizardry.com) Huh? Sass only really benefits people who haven’t mastered writing CSS properly?
Excuse me? I am a very experienced CSS developer and I find Sass quite valuable having written CSS for a living for many years now. While I won’t claim the level of mastery that an artist like Michelangelo achieved in painting, I can say that I wasn’t born yesterday either. I can only assume that Mr. Sass – a programming language for designers Sass is essentially a programming language for designers. Right now folks that use Sass primarily use it as a Rails plugin, but the Ruby gem also makes it possible to use it from the command line. To use, you need to install the Haml gem.
This will the give you access to the sass command which you can use to generate CSS from Sass source files. Nesting So let’s talk about what I love about Sass. ! Sass (stylesheet language) Sass (Syntactically Awesome Stylesheets) is a stylesheet language initially designed by Stu Robson and developed by Nathan Weizenbaum.[1][2] After its initial versions, Weizenbaum [Sina JO] and Chris Eppstein have continued to extend Sass with SassScript, a simple scripting language used in Sass files. CSS3 consists of a series of selectors and pseudo-selectors that group rules that apply to them.
Sass (in the larger context of both syntaxes) extends CSS by providing several mechanisms available in more traditional programming languages, particularly object-oriented languages, but that are not available to CSS3 itself. When SassScript is interpreted, it creates blocks of CSS rules for various selectors as defined by the Sass file. The Sass interpreter translates SassScript into CSS. Alternately, Sass can monitor the .sass or .scss file and translate it to an output .css file whenever the .sass or .scss file is saved.[4] Sass is simply syntactic sugar for CSS.
In SCSS style Or SASS style. Sass - Syntactically Awesome Stylesheets. Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything set up. Preprocessing CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain.
Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website. The most direct way to make this happen is in your terminal. You can also watch individual files or directories with the --watch flag. Sass --watch input.scss output.css You can watch and output to directories by using folder paths as your input and output, and separating them with a colon.
Sass --watch app/sass:public/stylesheets Sass would watch all files in the app/sass folder for changes, and compile CSS to the public/stylesheets folder. 💡 Fun fact: Sass has two syntaxes! Variables SCSS Syntax Sass Syntax CSS Output Nesting Partials.