Skip to main content

Home/ CSS Evangelist/ Group items tagged sass

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

An introduction to LESS, and comparison to Sass | Smashing Coding - 0 views

coding.smashingmagazine.com/...to-less-and-comparison-to-sass

less sass css comparison webdesign css3 preprocessor

shared by Vernon Fowler on 25 Feb 14 - No Cached
  • The only difference in variables between LESS and Sass is that, while LESS uses @, Sass uses $. There are some scope differences as well, which I’ll get to shortly.
  • With Sass, you declare @mixin prior to the style to identify it as a mixin. Later, you declare @include to call it.
  • Parametric Mixins Like having functions in your CSS (*swoon*), these can be immensely useful for those seemingly redundant tasks of modern-day CSS.
  • ...8 more annotations...
  • .border-radius( @radius: 3px ) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }
  • The syntax in Sass is very similar to that of LESS. Just use the $ for variables, and call the mixins with the @mixin and @include method mentioned earlier.
  • Selector Inheritance Here’s something not provided in LESS. With this ability, you can append a selector to a previously established selector without the need to add it in a comma-separated format. .menu { border: 1px solid #ddd; } .footer { @extend .menu; } /* will render like so: */ .menu, .footer { border: 1px solid #ddd; }
  • With LESS, you can nest ids, classes and elements as you go.
  • You can also refer in element styles to their pseudo-elements by using the &, which in this case functions similar to this in JavaScript.
  • Sass is a lot more versatile with numbers than LESS. It has built into it conversion tables to combine comparable units.
  • Sass seems to have a lot more color options — not that I would need them all. Lighten and darken are the only ones that I see myself using often.
  • Conditionals and Control This is rather nifty, and another thing not provided by LESS. With Sass, you have the ability to use if { } else { } conditional statements, as well as for { } loops. It supports and, or and not, as well as the <, >, <=, >= and == operators.
Vernon Fowler

Scout - Compass and Sass without all the hassle - 0 views

mhs.github.io/scout-app

sass compass css scout Compiler webdesign

shared by Vernon Fowler on 19 Jan 14 - No Cached
  • Vernon Fowler on 19 Jan 14
     
    "Since Sass and Compass are Ruby gems, they require that you have a working knowledge of Ruby and the command line. Not all designers will know how or want to use command line tools, and that's where Scout steps in. Scout runs Sass and Compass in a self-contained Ruby environment, letting you effortlessly manage all of your Sass projects with a handful of clicks. You'll never have to worry about your Ruby setup or deal with technical issues. Scout does all of the heavy lifting, giving you more time to do what you love."
Gary Edwards

Introducing LESS: a Better CSS « Usability Post - 0 views

www.usabilitypost.com/...introducing-less-a-better-css

compass-sass less css css-compiler

shared by Gary Edwards on 18 Jun 09 - Cached
  • Gary Edwards on 18 Jun 09
     
    Some bright folks also feel the same pain and went ahead and built meta-languages and compilers that take their own version of CSS and compile it to standard CSS code. Their own CSS meta-language is thus able to have new features, like variables, mixins, operations and so on. The most notable of these right now is SASS (part of HAML). I've tried SASS and really liked it, but one thing really bothered me. I didn't like how all the syntax was different to CSS. Sure, it's not CSS anymore, it's SASS, but do we really need to change the syntax of the stuff already present in CSS - why not just expand it? I've asked a friend of mine who is much more competent at programming than me about how long it would take to code a CSS compiler that retained the original CSS syntax but added a bunch of new features. He liked the idea and so we've put together our own version of CSS together with a compiler we call LESS, which stands for Leaner CSS.
Vernon Fowler

Battle of the LESS Mixin Libraries: LESS Elements vs. LESS Hat vs. Bootstrap | Design S... - 0 views

designshack.net/...ments-vs-less-hat-vs-bootstrap

css less sass css3 libraries mixins elements webdesign tools

shared by Vernon Fowler on 29 Apr 13 - No Cached
  • Vernon Fowler on 29 Apr 13
     
    LESS is a friendly, easily-approachable CSS preprocessor. Though ultimately, Sass and Stylus are more powerful and robust, LESS has a certain charm that keeps it as a forerunner in the battle of the preprocessors. If you're a Sass fan, then you can take advantage of Compass, an incredible framework that makes coding with complex CSS3 properties a breeze. But what about LESS users? Where's their Compass? Today we'll look at three awesome mixin libraries that will help fill that void.
Vernon Fowler

Sass Style Guide | CSS-Tricks - 0 views

css-tricks.com/sass-style-guide

sass scss styleguide css webdesign DIG252

shared by Vernon Fowler on 18 Jun 14 - No Cached
  • List @extend(s) First
  • List "Regular" Styles Next
  • List @include(s) Next
  • ...9 more annotations...
  • All Vendor Prefixes Use @mixins
  • Global and Section-Specific Sass Files Are just Table of Contents In other words, no styles directly in them. Force yourself to keep all styles organized into component parts.
  • If you find yourself using a number other than 0 or 100% over and over, it likely deserves a variable.
  • List Vendor/Global Dependancies First, Then Author Dependancies, Then Patterns, Then Parts
  • In Deployment, Compile Compressed
  • Comments get stripped when compiling to compressed code, so there is no cost.
  • Partials are named _partial.scss
  • Variablize All Colors Except perhaps white and black.
  • In your global stylesheet, @import a _shame.scss file last.
Vernon Fowler

Teresa Rosche Ott: Use LESS, Do More: Getting Started with a CSS Preprocessor | WordPre... - 0 views

wordpress.tv/...tarted-with-a-css-preprocessor

css less sass WordPress.tv wordpress tools webdesign

shared by Vernon Fowler on 29 Apr 13 - No Cached
  • Vernon Fowler on 29 Apr 13
     
    LESS & SASS are awesome technologies that allow you to write CSS extremely fast with a ton of awesome features. A perfect intro for anyone who wants to get started writing CSS faster, better, and stronger.
Vernon Fowler

phildionne/golden-bootstrap · GitHub - 0 views

github.com/...golden-bootstrap

typography CSS less sass bootstrap

shared by Vernon Fowler on 21 Mar 14 - No Cached
  • Vernon Fowler on 21 Mar 14
     
    Golden Bootstrap is a tiny add-on for Bootstrap giving you the divine power of using golden ratio sized columns. Available both for Less and Sass CSS preprocessors.
Vernon Fowler

Compass Home | Compass Documentation - 4 views

compass-style.org

css framework sass compass webdesign tools css3 sprites typography

shared by Vernon Fowler on 17 Oct 09 - Cached
  • yc c on 17 Oct 09
     
    Compass is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain. With compass, you write your stylesheets in Sass instead of CSS. Using the power of Sass Mixins and the Compass community, you can apply battle-tested styles from frameworks like Blueprint to your stylesheets instead of your markup.
Vernon Fowler

Ten Reasons You Should Be Using a CSS Preprocessor | Urban Insight Blog - 0 views

blog.urbaninsight.com/...ould-be-using-css-preprocessor

css preprocessor sass webdesign web design workflow tools less

shared by Vernon Fowler on 10 Oct 12 - No Cached
  • 10 reasons you should consider using a CSS preprocessor
  • you can start using things like variables, mixins, and functions. It will allow you to start reusing properties and patterns over and over, after defining them just once
  • nothing is repeated
  • ...2 more annotations...
  • Both Less and Sass support nested definitions.
  • if you can write CSS, you already know how to write valid .less
Vernon Fowler

Working With LESS and the Chrome DevTools - 2 views

dev.tutsplus.com/...the-chrome-devtools--net-36636

css webdesign tools browser less debug

shared by Vernon Fowler on 28 Jan 14 - No Cached
  • While holding Command (Control on Windows), click any property, value or selector to jump to the line of code in the corresponding LESS source file within the Sources panel.
  • Vernon Fowler on 28 Jan 14
     
    This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here. | Difficulty: Beginner; Length: Quick; Tags: Tools & Tips, Tutorials, Web Dev
Vernon Fowler

Choosing great variable names - 0 views

thesassway.com/...variable-naming

variable namespace name sass scss css webdesign DIG252

shared by Vernon Fowler on 19 Jun 14 - No Cached
  • try to choose semantic names for your variables
  • describe its function or purpose
  • // Better $brand-color: red; $accent-color: yellow;
  • ...3 more annotations...
  • postfix color names with -color:
  • add a prefix like header- or footer- for specific sections: // Header $header-height: 100px; $header-background-color: $color-brand; // Footer $footer-height: 200px; $footer-background-color: #aaa;
  • I like to keep all my variables in a single file, called _config.scss, that I include in my primary stylesheet using the @import directive.
anonymous

Compass: A Real Stylesheet Framework on Vimeo - 5 views

vimeo.com/4335944

css framework compass sass scss stylesheet compiler

shared by anonymous on 12 Apr 10 - Cached
  • anonymous on 12 Apr 10
     
    Tout ce qui a toujours manqué à CSS ! C'est un peu long mais ça vaut le détour !
1 - 20 of 21 Next ›
Showing 20▼ items per page