@@ Line 1: / Line 1: @@
-{{techy}}
-== Basics ==
-* [[Sass cheatcheet]]
-* [http://sass-lang.com/tutorial.html#features Sass features tutorial]
-* [http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html Sass reference]
-* [http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html Sass functions]
- _partial.sass
-   partial files with a leading underscore,
-   for inclusion in the compiled source
-=== About ===
-* http://chriseppstein.github.com/
-** http://chriseppstein.github.com/blog/2012/08/23/sass-3-2-is-released/
-* YouTube: [http://www.youtube.com/watch?v=tdGHjtVHP68 SASS - The Next Wave in Styling and Theming]
-* [http://www.youtube.com/watch?v=MFwId6xSh2o - Sass 3.2, libsass, SassC
-* [http://net.tutsplus.com/tutorials/html-css-techniques/using-compass-and-sass-for-css-in-your-next-project/ Sass and Compass overview]
-* [http://blog.railslove.com/2012/03/28/smacss-and-sass-the-future-of-stylesheets/ SMACSS and SASS - The future of stylesheets] - May 2012
-* [http://sonspring.com/journal/sass-for-designers Sass For Designers] - Aug 28th, 2011
-* [http://www.scribd.com/fullscreen/86154376?access_key=key-2n0lia9a9ic2fx2jmvxv Using Sass &amp;amp; Compass in Drupal Theming] - scribd, slide 40 on for techy
-=== Video ===
-== Getting Sass/SCSS with: ==
-=== Ruby ===
-Official Sass.
-* 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
-== Other ==
-* https://github.com/chriseppstein/sass-globbing
-=== 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
-=== node.js ===
-* https://github.com/bmavity/scss-js
-* https://github.com/visionmedia/sass.js
-== Variables ==
-* [http://sachagreif.com/sass-color-variables/ SASS & Color Variables] - Jul 20th, 2012
-** 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;
- }
-== Mixins ==
-* [https://github.com/madr/css3-sass-mixins css3-sass-mixins] - vendorprefixes / filters
-* https://github.com/heygrady/scss-blend-modes
-* [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-Ribbon
-* https://github.com/adamstac/zocial - css3 service buttons
-* http://sassymothereffingtextshadow.com/
-** https://rubygems.org/gems/sassy-text-shadow
-* https://gist.github.com/957284
-== Mixins and functions ==
-=== 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"
-==== 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/
-==== 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."
-==== Vertical rhythm ====
-* https://github.com/chriseppstein/compass/pull/896
-==== Other ====
-* [https://github.com/yckart/compass-kube Kube - SCSS & Compass] - ruby project template
-== Vertical rhythm ==
-If you don't reset browser margin and padding defaults, you're gonna have a bad time.
-* 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://anthonyshort.me/2012/03/media-queries-with-sass
-* https://github.com/nex3/sass/issues/408#issuecomment-6086901
-** http://jakearchibald.github.com/sass-ie/ - 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.
-* [http://nicolasgallagher.com/mobile-first-css-sass-and-ie/ "Mobile first" CSS and getting Sass to help with legacy IE] - Nov 29, 2011
-== 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://css2sass.heroku.com/ css2sass]
-* http://toki-woki.net/p/least/
-* http://css3.bradshawenterprises.com/blog/why-sass/
-* http://tatiyants.com/getting-dry-with-sass/

Difference between revisions of "Sass"

Latest revision as of 22:04, 31 August 2013

Navigation menu

Search