@@ Line 1: / Line 1: @@
-{{menu}}
-* [[Sass cheatcheet]] - older
-== Basics ==
-* [http://sass-lang.com Sass]
-** [http://sass-lang.com/tutorial.html#features Tutorial]
-** [http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html Reference]
-** [http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html Functions]
-** [http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html Changelog]
-* https://github.com/nex3/sass/issues
-** http://chriseppstein.github.com/blog/2012/08/23/sass-3-2-is-released/
-=== Articles ===
-* [http://net.tutsplus.com/tutorials/html-css-techniques/using-compass-and-sass-for-css-in-your-next-project/ Sass and Compass overview] - Aug 31st, 2009
-* [http://sonspring.com/journal/sass-for-designers Sass For Designers] - Aug 28th, 2011
-* [http://blog.railslove.com/2012/03/28/smacss-and-sass-the-future-of-stylesheets/ SMACSS and SASS - The future of stylesheets] - May 2012
-* [http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/ OOCSS + Sass = The best way to CSS]
-* CSS-Tricks: [http://css-tricks.com/sass-style-guide/ Sass Style Guide]
-* [http://www.scribd.com/fullscreen/86154376?access_key=key-2n0lia9a9ic2fx2jmvxv Using Sass &amp;amp; Compass in Drupal Theming] - scribd, slide 40 on for techy
-* [http://blog.kaelig.fr/post/51078221503/apple-is-using-sass-and-theyre-doing-it-wrong Apple Is Using Sass, And They’re Doing It Wrong]
-=== Video ===
-* [http://www.youtube.com/watch?v=tdGHjtVHP68 SASS - The Next Wave in Styling and Theming]
-* [http://www.youtube.com/watch?v=MFwId6xSh2o The Future of Sass by Hampton Catlin] - Sass 3.2, libsass, SassC - May 3, 2012
-== Setup==
-=== Ruby ===
-* http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html
-Init;
- gem install sass
- mv style.css style.scss
- sass --watch style.scss:style.css
- sass --watch input.sass:output.css
- sass --watch input-dir:output-dir
- sass --watch .:../css
-=== Sasson config.rb ===
- prefered_syntax = :scss
- http_path = '/'
- css_dir = 'styles'
- sass_dir = 'styles'
- images_dir = 'images'
- javascripts_dir = 'scripts'
- relative_assets = true
- line_comments = true
- #output_style = :compressed
- output_style = :expanded
-=== PHP ===
-* [http://www.phpsass.com/ PHPSass] - richtheeek fork of PHamlP for Drupal
-** https://github.com/richthegeek/phpsass
-** compass; https://github.com/richthegeek/phpsass/issues/4
-old?: Don't forget to add to $PATH (i.e. /var/lib/gems/1.8/bin)
-* [http://code.google.com/p/phamlp/ PHamlP] - older
-* sassphp
-=== node.js ===
-* https://github.com/bmavity/scss-js
-* https://github.com/visionmedia/sass.js
-=== libsass ===
-* https://github.com/hcatlin/libsass - sassc
-=== Source Maps ===
-* http://fonicmonkey.net/2013/03/25/native-sass-scss-source-map-support-in-chrome-and-rails/
-=== Sprockets ===
-* https://github.com/heygrady/compass-sprockets
-== Features ==
-=== Variables ===
-* [http://sachagreif.com/sass-color-variables/ SASS & Color Variables] - Jul 20th, 2012
-Variables:
- $blue: #3bbfce;
- $margin: 16px;
- .content-navigation {
-   border-color: $blue;
-   color:
-     darken($blue, 9%);
- }
- .border {
-   padding: $margin / 2;
-   margin: $margin / 2;
-   border-color: $blue;
- }
- _partial.sass
-   partial files with a leading underscore,
-   for inclusion in the compiled source
-Functional Variable Names;
- // first we set descriptive variables:
- $darkgrey: #333333;
- $blue: #001eff;
- // then we set functional variables:
- $text_color: $darkgrey;
- $link_color: $lightblue;
- $border_color: $lightblue;
- .myClass{
-   color: $text_color;
-   border-color: $border_color;
- }
- a{
-   color: $link_color;
- }
-* [https://gist.github.com/3335300 This gist demonstrates how global and local variables work with mixin content blocks in Sass.]
-==== Colours ====
-* [http://sassme.arc90.com/ SassMe] - Visualize SASS color functions in real-time without compiling.
-** https://github.com/arc90/sass-color-picker
-=== Nesting ===
- table.hl {
-   margin: 2em 0;
-   td.ln {
-     text-align: right;
-   }
- }
- li {
-   font: {
-     family: serif;
-     weight: bold;
-     size: 1.2em;
-   }
- }
-=== Mixins ===
- @mixin table-base {
-   th {
-     text-align: center;
-     font-weight: bold;
-   }
-   td, th {padding: 2px}
- }
- @mixin left($dist) {
-   float: left;
-   margin-left: $dist;
- }
- #data {
-   @include left(10px);
-   @include table-base;
- }
-* [https://github.com/madr/css3-sass-mixins css3-sass-mixins] - vendorprefixes / filters
-* Gist: [https://gist.github.com/3951201 Sass vendor helper mixins]
-* [https://github.com/heygrady/scss-blend-modes SCSS Blend Modes] - CSS doesn't natively support color blending the way that Photoshop does. This library attempts to fake that by allowing you to blend a foreground color with a background color in order to approximate color blending. This was originally intended for use with the Compass Photoshop Drop Shadow Plugin but it proved impractical to integrate.
-* [http://chriseppstein.github.com/sass-recipes/ sass-recipes] - examples that you can use or modify to suit your needs.
-** CSS Arrows
-** Hover to View
-** Multi-Line Button
-** Progress Bar
-** Search Input
-** File Field Mask
-* [https://github.com/perezd/CSS3-Ribbons CSS3 Ribbons Extension for Compass] - Just like the Github Ribbons.
-* [https://github.com/adamstac/zocial Zocial] is a CSS3 social buttons set and vector icons with @font-face as a Sass mixin and usable as a Compass extension.
-* [http://sassymothereffingtextshadow.com/ Sassy Mother Effing Text Shadow] is a Sass mixin that calculates convoluted curvy shadows for css3 text-shadow. It can also be used for box-shadow if you're into that kind of thing.
-** https://github.com/canarymason/sassytextshadow
-** https://rubygems.org/gems/sassy-text-shadow
-* Gist: [https://gist.github.com/957284 Useful scss mixins (rounded corners, gradients, text-field, button)]
-* [http://cssdeck.com/labs/bqjumsoc/0 Full Browser Width Bars using SCSS] - my conversion from a css-tricks method
-* [https://gist.github.com/2934012#file_bars.scss] - full browser width bars, requires rem mixin
-** http://cssdeck.com/labs/e2xkplul
-* http://alexwolfe.github.io/Buttons/
-=== Selector Inheritance ===
- .error {
-   border: 1px #f00;
-   background: #fdd;
- }
- .error.intrusion {
-   font-size: 1.3em;
-   font-weight: bold;
- }
- .badError {
-   @extend .error;
-   border-width: 3px;
- }
-=== Placeholder Selector ===
-* http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholders
- %clearfix {
-   overflow: none;
-   *zoom: 1;
- }
- aside, footer {
-   @extend %clearfix;
- }
- #grid-container {
-   @extend %clearfix;
- }
-Produces:
- aside, footer, #grid-container {
-   overflow: none;
-   *zoom: 1;
- }
-===Control Directives===
-===Mixin Directives===
-===etc===
-== Extensions ==
-* [https://github.com/chriseppstein/sass-globbing Sass Globbing] Plugin
-=== Bourbon ===
-* [http://thoughtbot.com/bourbon/ Bourbon] - A simple and lightweight mixin/function library for Sass.
-** https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/_bourbon.scss
-** https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_border-image.scss
-* http://thechangelog.com/post/7343704173/bourbon-a-set-of-vanilla-sass-mixins-that-use-scss
-=== Compass ===
-==== Setup ====
-* [http://compass-style.org/install/ Instal] - Handy dropdown menu config.rb generator.
- gem install compass
- compass version
-* [http://compass-style.org/help/ Getting started]
-==== Basics ====
-* [http://compass-style.org/help/tutorials/ Compass tutorials]
-* [http://compass-style.org/reference/compass/ Compass reference]
-* [http://compass-style.org/reference/compass/css3/ CSS3]
-==== Gradients ====
-The linear-gradient and radial-gradient mixins have been deprecated. Instead use the background-image mixin and pass it a gradient function. The deprecation warning will print out the correct call for you to use.
-* [http://compass-style.org/reference/compass/css3/images/ Images]
-** Use for [http://compass-style.org/examples/compass/css3/gradient/ gradients]
- @import "compass/css3/images"
-==== Transitions ====
-* http://compass-style.org/reference/compass/css3/transition/
-** http://compass-style.org/examples/compass/css3/transition/
- @include transition(color 0.2s ease-in);
- @include transition(text-shadow 0.2s ease-in);
-==== Other ====
-* [http://compass-style.org/reference/compass/helpers/ Helpers]
-* [http://compass-style.org/reference/compass/layout/ Layout]
-** [http://compass-style.org/reference/compass/layout/grid_background/ grids]
-** [http://compass-style.org/reference/compass/layout/sticky_footer/ sticky footer]
-** [http://compass-style.org/reference/compass/layout/stretching/ stretching]
-* [http://compass-style.org/reference/compass/reset/utilities/ Reset utilities]
-* [http://compass-style.org/reference/compass/typography/ Typography] links
-** [http://compass-style.org/reference/compass/typography/lists/ lists]
-** [http://compass-style.org/reference/compass/typography/text/ text]
-** [http://compass-style.org/reference/compass/typography/vertical_rhythm/ vertical rhythm]
-* [http://compass-style.org/frameworks/ Adding Frameworks to Compass]
-==== Guides ====
-* [http://compass-style.org/help/tutorials/best_practices/ Compass Best Practices]
-* [http://jc-designs.net/blog/2010/10/sass-scss-and-compass-cheat-sheet/ Sass (SCSS) and Compass Cheat Sheet]
-* [http://stackoverflow.com/questions/5486879/how-does-compass-watch-work-how-is-it-used-with-rails stackoverflow: How does 'compass watch' work/how is it used with rails]
-* http://www.youtube.com/playlist?list=PL45DD77A4CCA76ED3
-==== Susy ====
-* [http://susy.oddbird.net/ Susy] - Responsive grids for Compass.
-** http://susy.oddbird.net/demos/grid-types/
-"You can build grids of all kinds with Susy. Define you grid using any unit of measurement (ems, pixels, percentages, inches, etc.) and then determine how and when you want that grid responding to the viewport. Susy converts all internal grid-widths into percentages, so that once you have a grid it is able to respond and flex in any way you choose. How the grid responds depends on the outer container."
-See [[Grid/rhythm#Susy]]
-==== Vertical rhythm ====
-* [https://github.com/chriseppstein/compass/pull/896 Add rem output with pixel fallbacks and other improvements to vertical rhythm partial]
-==== Other ====
-* [https://github.com/yckart/compass-kube Kube - SCSS & Compass] - ruby project template
-=== Units ===
-* https://github.com/ry5n/rem
-=== Vertical rhythm ===
-If you don't reset browser margin and padding defaults, you're gonna have a bad time (re jigging margin/padding normalisations), imho. To choose a method that manages this best.
-* http://compass-style.org/reference/compass/typography/vertical_rhythm/ - px based
-* https://github.com/OliverJAsh/vertical-rhythm - em based
-=== vertical-rhythmic ===
-* https://github.com/pyrsmk/vertical-rhythmic - em based
-** https://github.com/pyrsmk/vertical-rhythmic/blob/master/_vertical-rhythmic.scss
-==== Usage ====
-em and 1.5em are the defaults (16px being browser em default. line-height is normally 1.4em)
- $base-font-size: '''1em''';
- $base-line-height: '''1.5em''';
- @import "vertical-rhythmic";
- @include $font-size()
-   number $font-size   : font size, in ems
-   integer $lines      : number of whitespace lines for the line-height
-   Keeps base line proportions by default
-first basic method; default-font-size: 0.9em and line-height: 1.4em h1 the space of two 1.4em lines
-  @include $font-size(1.5)
-second basic;
-  font-size:1.5em;
-  line-height:rhythm(auto,1.5em);
- @include [https://github.com/pyrsmk/vertical-rhythmic/blob/master/_vertical-rhythmic.scss#L78 margin]()
-    integer $lines          : number of whitespace lines (default: '''1''')
-    number $font-size       : actual font-size, in ems, to calculate with (default: '''1em''')
-    integer $border-width   : width of additionnal borders around the box
-    Useful to substract borders from the whitespace to not break the rhythm
- @include margin-top
-   integer $lines          : number of whitespace lines (default: '''1''')
-   number $font-size       : actual font-size, in ems, to calculate with (default: '''1em''')
-   integer $border-width   : width of additionnal borders around the box
-   Useful to substract borders from the whitespace to not break the rhythm
- @include margin-bottom
-   etc.
- @include padding
- @include padding-top
- @include padding-bottom
- @include border
- @include border-top
- @include border-bottom
- @include outline
- h1 {
-    @include font-size(1.5em);
- }
- // 2nd method
- // rhythm() can be used directly
-=== Other ===
-* https://gist.github.com/2026666
-== Responsive ==
-* [https://github.com/canarymason/breakpoint Breakpoint] makes writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the breakpoint mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself, to handling cross-browser compatibility issues, so you can focus on what's important: making sure your website looks its best.
-* [http://nicolasgallagher.com/mobile-first-css-sass-and-ie/ "Mobile first" CSS and getting Sass to help with legacy IE] - Nov 29, 2011
-* [http://anthonyshort.me/2012/03/media-queries-with-sass Media Queries with Sass 3.2] - Mar 13, 2012
-* [http://www.html5rocks.com/en/mobile/responsivedesign/ Creating a Mobile-First Responsive Web Design] - April 16, 2012
-* https://github.com/nex3/sass/issues/408#issuecomment-6086901
-** [http://jakearchibald.github.com/sass-ie/ IE-friendly mobile-first CSS with Sass 3.2] - Problem is, Internet Explorer prior to 9 ignores anything within media query blocks, leaving those browsers with mobile styles. Not all of us can get away with that, but thankfully, as Chris Eppstein points out, Sass 3.2 (not yet released) can generate a separate stylesheet with everything it needs to create a "desktop" look. - May 2012
-== Drupal ==
-* [http://drupal.org/node/1374178 Using SASS with Drupal], December 18, 2011
-* http://www.systemseed.com/blog/using-compass-and-sass-generate-skinr-styles
-* http://drupal.org/project/compass
-* sasson
-* sassy
-== Tools ==
-* http://dev.man-online.org/man1/sass-convert/
-* [http://css2sass.heroku.com/ css2sass]
-* http://toki-woki.net/p/least/
-* http://css3.bradshawenterprises.com/blog/why-sass/
-* http://tatiyants.com/getting-dry-with-sass/
-* http://sassmeister.com/

Difference between revisions of "Sass"

Latest revision as of 22:04, 31 August 2013

Navigation menu

Search