mirror of
https://github.com/danog/sass-site.git
synced 2025-01-21 21:31:34 +01:00
Sass, not SASS. :)
This commit is contained in:
jina
parent
329dcb4bb8
commit
e148075b3c
@ -1,7 +1,7 @@
|
||||
Contributing to the SASS website
|
||||
Contributing to the Sass website
|
||||
================================
|
||||
|
||||
The SASS website is open source. See a bug or typo? Have an idea? Just do the
|
||||
The Sass website is open source. See a bug or typo? Have an idea? Just do the
|
||||
following:
|
||||
|
||||
* Check out the style guide for design & code standards.
|
||||
@ -31,4 +31,4 @@ middleman
|
||||
|
||||
Thanks!
|
||||
|
||||
— [Team SASS Design](http://twitter.com/teamsassdesign)
|
||||
— [Team Sass Design](http://twitter.com/teamsassdesign)
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# SASS Site
|
||||
# Sass Site
|
||||
|
||||
The SASS website is open source. See a typo? Have a UX improvement? Check out
|
||||
The Sass website is open source. See a typo? Have a UX improvement? Check out
|
||||
the [Contributing guide](https://github.com/sass/sass-site/blob/master/CONTRIBUTING.md)!
|
||||
|
||||
* [SASS website Style Guide](http://sass-lang.com/styleguide)
|
||||
* [@TeamSASSDesign](http://twitter.com/teamsassdesign)
|
||||
* [Sass website Style Guide](http://sass-lang.com/styleguide)
|
||||
* [@TeamSassDesign](http://twitter.com/teamsassdesign)
|
||||
|
||||
@ -7,21 +7,21 @@ tutorials:
|
||||
url: "http://www.lynda.com/CSS-tutorials/CSS-LESS-SASS/107921-2.html"
|
||||
|
||||
books:
|
||||
- name: "SASS in the Real World: book 1 of 4"
|
||||
- name: "Sass in the Real World: book 1 of 4"
|
||||
url: "http://anotheruiguy.gitbooks.io/sassintherealworld_book-i/"
|
||||
- name: "SASS in the Real World: book 2 of 4"
|
||||
- name: "Sass in the Real World: book 2 of 4"
|
||||
url: "http://anotheruiguy.gitbooks.io/sass-in-the-real-world-book-2-of-4/"
|
||||
- name: "SASS for Web Designers (Nov 2013)"
|
||||
- name: "Sass for Web Designers (Nov 2013)"
|
||||
url: "http://www.abookapart.com/products/sass-for-web-designers"
|
||||
- name: "SASS and Compass in Action (Aug 2013)"
|
||||
- name: "Sass and Compass in Action (Aug 2013)"
|
||||
url: "http://manning.com/netherland/"
|
||||
- name: "SASS and Compass for Designers (April 2013)"
|
||||
- name: "Sass and Compass for Designers (April 2013)"
|
||||
url: "http://www.packtpub.com/sass-and-compass-for-designers/book"
|
||||
- name: "Pragmatic Guide to SASS (Dec 2011)"
|
||||
- name: "Pragmatic Guide to Sass (Dec 2011)"
|
||||
url: "http://pragprog.com/book/pg_sass/pragmatic-guide-to-sass"
|
||||
|
||||
blogs:
|
||||
- name: "The SASS Way"
|
||||
- name: "The Sass Way"
|
||||
url: "http://thesassway.com/"
|
||||
- name: "CSS-Tricks"
|
||||
url: "http://css-tricks.com/search-results/?q=sass"
|
||||
@ -35,18 +35,18 @@ blogs:
|
||||
url: "http://viget.com/inspire/search/YTo2OntzOjg6ImtleXdvcmRzIjtzOjQ6InNhc3MiO3M6MTE6InNlYXJjaF9tb2RlIjtzOjM6ImFsbCI7czoxMToicmVzdWx0X3BhZ2UiO3M6MTQ6Imluc3BpcmUvc2VhcmNoIjtzOjEwOiJjb2xsZWN0aW9uIjthOjE6e2k6MDtzOjE6IjEiO31zOjEwOiJsb29zZV9lbmRzIjtiOjE7czo4OiJjYXRlZ29yeSI7czozOiIxMjUiO30"
|
||||
- name: "Unmatched Style"
|
||||
url: "http://www.google.com/cse?cx=partner-pub-1988806651014029%3A4kuybaak597&ie=ISO-8859-1&q=sass#gsc.tab=0&gsc.q=sass&gsc.page=1"
|
||||
- name: "SASS Bites"
|
||||
- name: "Sass Bites"
|
||||
url: "http://www.youtube.com/sassbites"
|
||||
- name: "SASS News Weekly"
|
||||
- name: "Sass News Weekly"
|
||||
url: "http://www.sassnews.com"
|
||||
|
||||
projects:
|
||||
- name: "libSASS"
|
||||
- name: "libSass"
|
||||
url: "/libsass"
|
||||
description: "a CSS (and SASS!) authoring framework"
|
||||
description: "a CSS (and Sass!) authoring framework"
|
||||
- name: "Compass"
|
||||
url: "http://compass-style.org/"
|
||||
description: "a CSS (and SASS!) authoring framework"
|
||||
description: "a CSS (and Sass!) authoring framework"
|
||||
- name: "Susy"
|
||||
url: "http://susy.oddbird.net/"
|
||||
description: "a responsive grid layout built for Compass"
|
||||
@ -58,10 +58,10 @@ projects:
|
||||
description: "a mixin-based grid layout system"
|
||||
- name: "Sache"
|
||||
url: "http://www.sache.in/"
|
||||
description: "a place to find SASS and Compass extensions"
|
||||
- name: "SASSMeister"
|
||||
description: "a place to find Sass and Compass extensions"
|
||||
- name: "SassMeister"
|
||||
url: "http://sassmeister.com/"
|
||||
description: "a tool for trying SASS in the browser"
|
||||
description: "a tool for trying Sass in the browser"
|
||||
- name: "Zurb Foundation"
|
||||
url: "http://foundation.zurb.com/"
|
||||
description: "a responsive front-end framework"
|
||||
@ -70,66 +70,66 @@ projects:
|
||||
description: "a starting framework with some basic styles for a project"
|
||||
- name: "Bootstrap"
|
||||
url: "https://github.com/twbs/bootstrap-sass"
|
||||
description: "the ubiquitous framework… this time written in SASS!"
|
||||
description: "the ubiquitous framework… this time written in Sass!"
|
||||
- name: "Gravity"
|
||||
url: "https://github.com/owainlewis/gravity"
|
||||
description: "a framework for making HTML5 websites with SASS"
|
||||
description: "a framework for making HTML5 websites with Sass"
|
||||
- name: "Inuit.css"
|
||||
url: "http://inuitcss.com/"
|
||||
description: "a powerful, scalable, SASS-based, BEM, OOCSS framework"
|
||||
description: "a powerful, scalable, Sass-based, BEM, OOCSS framework"
|
||||
- name: "Flexible Grid System"
|
||||
url: "http://flexible.gs/"
|
||||
description: "power of limitless"
|
||||
- name: "SASSDoc"
|
||||
- name: "SassDoc"
|
||||
url: "http://sassdoc.com/"
|
||||
description: "A documentation tool for SASS"
|
||||
description: "A documentation tool for Sass"
|
||||
|
||||
articles:
|
||||
- name: "SASS vs. LESS"
|
||||
- name: "Sass vs. LESS"
|
||||
url: "http://css-tricks.com/sass-vs-less/"
|
||||
description: "by Chris Coyier, from CSS Tricks, May 2012"
|
||||
- name: "Redesigning with SASS"
|
||||
- name: "Redesigning with Sass"
|
||||
url: "http://css-tricks.com/redesigning-with-sass/"
|
||||
description: "by David Walsh, from CSS Tricks, October 2012"
|
||||
- name: "Using Bower with SASS & Compass"
|
||||
- name: "Using Bower with Sass & Compass"
|
||||
url: "http://anthonyshort.me/using-bower-with-sass-and-compass/"
|
||||
description: "by Anthony Short, October 2012"
|
||||
- name: "Preprocess THIS!"
|
||||
url: "http://cognition.happycog.com/article/preprocess-this"
|
||||
description: "by Allison Wagner, from Cognition, September 2012"
|
||||
- name: "A Newb’s Guide to Syntactically Awesome Stylesheets (SASS) – part 1"
|
||||
- name: "A Newb’s Guide to Syntactically Awesome Stylesheets (Sass) – part 1"
|
||||
url: "http://unmatchedstyle.com/news/a-newbs-guide-to-syntactically-awesome-stylesheets-sass-part-1.php"
|
||||
description: "by Dale Sande, from Unmatched Style, September 2012"
|
||||
- name: "SASS Sleuth: Debugging SASS in Webkit Browsers"
|
||||
- name: "Sass Sleuth: Debugging Sass in Webkit Browsers"
|
||||
url: "http://www.mobify.com/dev/sass-sleuth-debugging-sass-in-webkit-browsers/"
|
||||
description: "by Roman, from the Mobify blog, August 2012"
|
||||
- name: "Stop the Pain of Vanilla CSS and Get Relief by Adding Toppings with SASS"
|
||||
- name: "Stop the Pain of Vanilla CSS and Get Relief by Adding Toppings with Sass"
|
||||
url: "http://www.zurb.com/article/1031/stop-the-pain-of-vanilla-css-and-get-reli"
|
||||
description: "by Chris, from the Zurb blog, July 2012"
|
||||
- name: "Building a Nested Responsive Grid with SASS & Compass"
|
||||
- name: "Building a Nested Responsive Grid with Sass & Compass"
|
||||
url: "http://viget.com/inspire/building-a-nested-responsive-grid-with-sass-compass"
|
||||
description: "by Trevor Davis, from Viget, May 2012"
|
||||
- name: "Nested Selectors: The Inception Rule"
|
||||
url: "http://thesassway.com/beginner/the-inception-rule"
|
||||
description: "by Mario 'Kuroir' Ricalde, from The SASS Way, November 2011"
|
||||
- name: "Improve your Responsive Design Workflow with SASS"
|
||||
description: "by Mario 'Kuroir' Ricalde, from The Sass Way, November 2011"
|
||||
- name: "Improve your Responsive Design Workflow with Sass"
|
||||
url: "http://www.creativebloq.com/netmag/improve-your-responsive-design-workflow-sass-10116699"
|
||||
description: "by Ryan Taylor, from .net, October 2011"
|
||||
- name: "Getting Started with SASS and Compass"
|
||||
- name: "Getting Started with Sass and Compass"
|
||||
url: "http://thesassway.com/beginner/getting-started-with-sass-and-compass"
|
||||
description: "by Adam Stacoviak, from The SASS Way, June 2011"
|
||||
- name: "Getting SASSy with CSS"
|
||||
description: "by Adam Stacoviak, from The Sass Way, June 2011"
|
||||
- name: "Getting Sassy with CSS"
|
||||
url: "http://www.sencha.com/blog/getting-sassy-with-css/"
|
||||
description: "by David Kaneda, from the Sencha blog, June 2010"
|
||||
- name: "Using Compass and SASS for your Next CSS Project"
|
||||
- name: "Using Compass and Sass for your Next CSS Project"
|
||||
url: "http://net.tutsplus.com/tutorials/html-css-techniques/using-compass-and-sass-for-css-in-your-next-project/"
|
||||
description: "by Alex Coomans, from Net Tuts, August 2009"
|
||||
- name: "My Media Query Mixin"
|
||||
url: "http://alwaystwisted.com/post.php?s=2013-04-01-my-media-query-mixin"
|
||||
description: "by Stuart Robson, April 2013"
|
||||
- name: "Structuring My SASS 101"
|
||||
- name: "Structuring My Sass 101"
|
||||
url: "http://alwaystwisted.com/post.php?s=2013-01-07-structuring-my-sass-101-part-1"
|
||||
description: "by Stuart Robson, January 2013"
|
||||
- name: "SASS doesn't create bad code. Bad coders do."
|
||||
- name: "Sass doesn't create bad code. Bad coders do."
|
||||
url: "http://www.thesassway.com/articles/sass-doesnt-create-bad-code-bad-coders-do"
|
||||
description: "by Roy Tomeij, from The SASS Way, February 2012"
|
||||
description: "by Roy Tomeij, from The Sass Way, February 2012"
|
||||
|
||||
@ -24,7 +24,7 @@ contributors:
|
||||
twitter: malrase
|
||||
|
||||
thanks:
|
||||
- name: All the people at SASSConf that came to help with DNS and server-related issues.
|
||||
- name: All the people at SassConf that came to help with DNS and server-related issues.
|
||||
- name: To everyone who has contributed through pull requests.
|
||||
|
||||
markup:
|
||||
@ -34,7 +34,7 @@ markup:
|
||||
|
||||
style:
|
||||
- name: CSS3
|
||||
- name: SASS
|
||||
- name: Sass
|
||||
- name: Compass
|
||||
- name: Susy
|
||||
- name: Breakpoint
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
resources:
|
||||
- name: "Lightning fast SASS compiling with libsass, Node-sass and Grunt-sass"
|
||||
- name: "Lightning fast Sass compiling with libsass, Node-sass and Grunt-sass"
|
||||
url: "http://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/"
|
||||
description: "by Ben Frain, August 2013"
|
||||
- name: "Node, Express and libSASS"
|
||||
- name: "Node, Express and libSass"
|
||||
url: "https://www.gitbook.io/book/anotheruiguy/nodeexpreslibsass_from-scratch"
|
||||
description: "Node, Express and libSASS: a project from scratch workshop"
|
||||
description: "Node, Express and libSass: a project from scratch workshop"
|
||||
|
||||
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ require "pathname"
|
||||
|
||||
module SassHelpers
|
||||
def page_title
|
||||
title = "SASS: "
|
||||
title = "Sass: "
|
||||
if data.page.title
|
||||
title << data.page.title
|
||||
else
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
%h1 About SASS
|
||||
%h1 About Sass
|
||||
|
||||
%p
|
||||
SASS was originally developed as a feature of the Haml markup language. Since then, SASS has outgrown its original home as part of Haml and is now a thriving project, much more popular than its original host project.
|
||||
Sass was originally developed as a feature of the Haml markup language. Since then, Sass has outgrown its original home as part of Haml and is now a thriving project, much more popular than its original host project.
|
||||
|
||||
%h2 SASS Language
|
||||
%h2 Sass Language
|
||||
%p
|
||||
It was originally conceived of by
|
||||
= link_to "Hampton Catlin", "http://www.hamptoncatlin.com"
|
||||
in 2006, however he only remained an active Core Team member through version 2009 and is no longer actively developing on SASS.
|
||||
in 2006, however he only remained an active Core Team member through version 2009 and is no longer actively developing on Sass.
|
||||
= link_to "Natalie Weizenbaum", "http://nex-3.com/"
|
||||
is the primary developer and designer of SASS and has been involved in the project since the second commit.
|
||||
is the primary developer and designer of Sass and has been involved in the project since the second commit.
|
||||
In 2008,
|
||||
= link_to "Chris Eppstein", "http://chriseppstein.github.io/"
|
||||
joined the SASS Core Team and is also the creator of Compass. Since joining, he and Natalie have designed SASS together have created most of the modern features of the language.
|
||||
joined the Sass Core Team and is also the creator of Compass. Since joining, he and Natalie have designed Sass together have created most of the modern features of the language.
|
||||
|
||||
%h2 SASS Website
|
||||
%h2 Sass Website
|
||||
|
||||
%p
|
||||
The SASS website design was brought to you by the SASS Design Team, headed up by
|
||||
The Sass website design was brought to you by the Sass Design Team, headed up by
|
||||
= link_to "Jina Bolton", "http://sushiandrobots.com/"
|
||||
\.
|
||||
|
||||
@ -5,15 +5,15 @@ title: "Community Guidelines"
|
||||
|
||||
|
||||
%p.introduction
|
||||
SASS is more than a technology; SASS is driven by the community of
|
||||
Sass is more than a technology; Sass is driven by the community of
|
||||
individuals that power its development and use every day. As a community, we
|
||||
want to embrace the very differences that have made our collaboration so
|
||||
powerful, and work together to provide the best environment for learning,
|
||||
growing, and sharing of ideas. It is imperative that we keep SASS a fun,
|
||||
growing, and sharing of ideas. It is imperative that we keep Sass a fun,
|
||||
welcoming, challenging, and fair place to play.
|
||||
|
||||
:markdown
|
||||
As such, the SASS Community Guidelines states our ideals as a community.
|
||||
As such, the Sass Community Guidelines states our ideals as a community.
|
||||
It's meant to be a guide on how we work together and conduct ourselves, not
|
||||
a specific rulebook. It is a way to communicate our existing values to the
|
||||
entire community, and share our values with the ‘verse.
|
||||
@ -33,7 +33,7 @@ title: "Community Guidelines"
|
||||
limited to, their gender identity and expression, sexual orientation,
|
||||
preferred relationship model, disability, physical appearance, body size,
|
||||
age, race, or religious affiliation. We take pride in the the richness of
|
||||
experiences that have come to help develop SASS, and want to continue
|
||||
experiences that have come to help develop Sass, and want to continue
|
||||
growing our community. In short, __everyone is welcome, except those who
|
||||
are unwelcoming__.
|
||||
|
||||
@ -108,11 +108,11 @@ title: "Community Guidelines"
|
||||
have made modifications for our specific needs as a community.
|
||||
|
||||
%p
|
||||
The SASS Community Guidelines are licensed under the
|
||||
The Sass Community Guidelines are licensed under the
|
||||
= succeed "." do
|
||||
= link_to "Creative Commons Attribution-Share Alike 3.0 license", "https://creativecommons.org/licenses/by-sa/3.0/us/"
|
||||
You may re-use it for your own project, and modify it as you wish, just
|
||||
please allow others to use your modifications and give credit to SASS,
|
||||
please allow others to use your modifications and give credit to Sass,
|
||||
= succeed "," do
|
||||
= link_to "Ubuntu", "http://www.ubuntu.com/about/about-ubuntu/conduct"
|
||||
and
|
||||
@ -122,7 +122,7 @@ title: "Community Guidelines"
|
||||
%h3 Adherence to these Community Guidelines
|
||||
|
||||
%p
|
||||
We ask that all in-person and virtual gatherings of the SASS Community
|
||||
We ask that all in-person and virtual gatherings of the Sass Community
|
||||
adhere to this code of conduct and take appropriate steps to create a safe
|
||||
and accessible space for all attendees. This should include the publication of a Code of
|
||||
Conduct that includes clear anti-harassment procedures. Please consult
|
||||
@ -152,8 +152,8 @@ title: "Community Guidelines"
|
||||
</script>
|
||||
|
||||
%p
|
||||
We understand and acknowledge that the "SASS Community" is a loosely
|
||||
defined group of people who identify as SASS enthusiasts. We have no power
|
||||
We understand and acknowledge that the "Sass Community" is a loosely
|
||||
defined group of people who identify as Sass enthusiasts. We have no power
|
||||
to actively remove someone from the community. Ultimately, we can only use
|
||||
our voice to publicly declare that we do not agree with or endorse people
|
||||
or organizations who don't act in the spirit of these guidelines.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: "#teamSASS"
|
||||
title: "#teamSass"
|
||||
---
|
||||
|
||||
- content_for :introduction do
|
||||
SASS has an awesome community of designers and developers who love to spread
|
||||
Sass has an awesome community of designers and developers who love to spread
|
||||
the word and help people out. Here we’ve collected some resources.
|
||||
Happy Styling!
|
||||
|
||||
@ -14,25 +14,25 @@ title: "#teamSASS"
|
||||
:markdown
|
||||
Still __getting started__? There are some great [tutorials](#Tutorials)
|
||||
out there to get you on your feet. Want to __learn more__? There's some
|
||||
great [SASS blogs](#Blogs) (including
|
||||
great [Sass blogs](#Blogs) (including
|
||||
[a few particular articles](#Articles) we recommend reading), and even a
|
||||
few [books about SASS](#Books) to help you learn some new tips and
|
||||
few [books about Sass](#Books) to help you learn some new tips and
|
||||
tricks.
|
||||
|
||||
%li
|
||||
:markdown
|
||||
The SASS community is amazing. There are a number of
|
||||
[frameworks](#Frameworks) that make using SASS simple. Want try SASS in
|
||||
The Sass community is amazing. There are a number of
|
||||
[frameworks](#Frameworks) that make using Sass simple. Want try Sass in
|
||||
Node, Python, or another framework? Check out the
|
||||
[libSASS resources](/libsass).
|
||||
[libSass resources](/libsass).
|
||||
|
||||
Thinking of __contributing__ to SASS itself? We rely on everyone to
|
||||
keep SASS as stable as it is. Feel free to
|
||||
[submit a patch via pull request](#Contribute) to the SASS project.
|
||||
Thinking of __contributing__ to Sass itself? We rely on everyone to
|
||||
keep Sass as stable as it is. Feel free to
|
||||
[submit a patch via pull request](#Contribute) to the Sass project.
|
||||
|
||||
%li
|
||||
:markdown
|
||||
__Everyone is welcome in the SASS community, except those who are
|
||||
__Everyone is welcome in the Sass community, except those who are
|
||||
unwelcoming__. Please read and follow our
|
||||
[community guidelines](/community-guidelines).
|
||||
|
||||
@ -40,7 +40,7 @@ title: "#teamSASS"
|
||||
%hr/
|
||||
|
||||
.content-primary
|
||||
%h2#Articles SASS Articles on the Web
|
||||
%h2#Articles Sass Articles on the Web
|
||||
%ul.articles
|
||||
- for article in data.community.articles
|
||||
%li
|
||||
@ -48,7 +48,7 @@ title: "#teamSASS"
|
||||
%p= article.description
|
||||
|
||||
%h2#Contribute Contribute
|
||||
%p SASS is an open source project and we encourage you to contribute. You can contribute with bug reports and feature requests or if you have code to contribute we will love you forever.
|
||||
%p Sass is an open source project and we encourage you to contribute. You can contribute with bug reports and feature requests or if you have code to contribute we will love you forever.
|
||||
|
||||
%p When adding bug reports, feature requests, or code there are a couple of primary branches we use.
|
||||
|
||||
@ -58,7 +58,7 @@ title: "#teamSASS"
|
||||
The stable branch is where we do development on the released version.
|
||||
The majority of bug fixes should go here.
|
||||
If you're just reporting a bug <a href="https://github.com/sass/sass/issues">add an issue</a> and
|
||||
note the version of SASS where you experienced the issue in your comment.
|
||||
note the version of Sass where you experienced the issue in your comment.
|
||||
If you have some code to contribute, fork the stable branch and send us a pull request.
|
||||
We'll review your patch and either accept or decline with comments.
|
||||
All bug fixes must be thoroughly tested and the tests must pass
|
||||
@ -67,7 +67,7 @@ title: "#teamSASS"
|
||||
%dl
|
||||
%dt= link_to "Master", "https://github.com/sass/sass/tree/master"
|
||||
%dd
|
||||
The master branch is where we keep track of the next version of SASS.
|
||||
The master branch is where we keep track of the next version of Sass.
|
||||
New feature requests should be made on the <a href="https://github.com/sass/sass/issues">issue tracker</a>
|
||||
and discussed with the <a href="http://github.com/nex3">core</a> <a href="http://github.com/chriseppstein">team</a>
|
||||
before implementation begins to avoid wasted effort.
|
||||
@ -95,12 +95,12 @@ title: "#teamSASS"
|
||||
- for tutorial in data.community.tutorials
|
||||
%li= link_to tutorial.name, tutorial.url
|
||||
|
||||
%h3#Blogs SASS Blogs
|
||||
%h3#Blogs Sass Blogs
|
||||
%ul
|
||||
- for blog in data.community.blogs
|
||||
%li= link_to blog.name, blog.url
|
||||
|
||||
%h3#Books SASS Books
|
||||
%h3#Books Sass Books
|
||||
%ul
|
||||
- for book in data.community.books
|
||||
%li= link_to book.name, book.url
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: SASS Basics
|
||||
title: Sass Basics
|
||||
---
|
||||
|
||||
%p.introduction
|
||||
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.
|
||||
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.
|
||||
= link_to "Go here", "/install"
|
||||
if you want to learn how to get everything setup.
|
||||
|
||||
@ -25,9 +25,9 @@ title: SASS Basics
|
||||
:markdown
|
||||
## Preprocessing
|
||||
|
||||
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. SASS lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.
|
||||
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.
|
||||
|
||||
Once you start tinkering with SASS, it will take your preprocessed SASS file and save it out as a normal CSS file that you can use in your web site.
|
||||
Once you start tinkering with Sass, it will take your preprocessed Sass file and save it out as a normal CSS file that you can use in your web site.
|
||||
|
||||
* * *
|
||||
|
||||
@ -35,22 +35,22 @@ title: SASS Basics
|
||||
:markdown
|
||||
## Variables
|
||||
|
||||
Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. SASS uses the <code>$</code> symbol to make something a variable. Here's an example:
|
||||
Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the <code>$</code> symbol to make something a variable. Here's an example:
|
||||
|
||||
%ul
|
||||
%li= link_to "SCSS", "#topic-2-SCSS"
|
||||
%li= link_to "SASS", "#topic-2-SASS"
|
||||
%li= link_to "Sass", "#topic-2-Sass"
|
||||
|
||||
#topic-2-SCSS
|
||||
%h3 SCSS Syntax
|
||||
~ partial "code-snippets/homepage-variables-scss"
|
||||
|
||||
#topic-2-SASS
|
||||
%h3 SASS Syntax
|
||||
#topic-2-Sass
|
||||
%h3 Sass Syntax
|
||||
~ partial "code-snippets/homepage-variables-sass"
|
||||
|
||||
:markdown
|
||||
When the SASS is processed, it takes the variables we define for the <code>$font-stack</code> and <code>$primary-color</code> and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.
|
||||
When the Sass is processed, it takes the variables we define for the <code>$font-stack</code> and <code>$primary-color</code> and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.
|
||||
|
||||
~ partial "code-snippets/homepage-variables-css"
|
||||
|
||||
@ -62,21 +62,21 @@ title: SASS Basics
|
||||
|
||||
When writing HTML you've probably noticed that it has a clear nested and visual hierarchy. CSS, on the other hand, doesn't.
|
||||
|
||||
SASS will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in
|
||||
Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in
|
||||
over-qualified CSS that could prove hard to maintain and is generally considered bad practice.
|
||||
|
||||
With that in mind, here's an example of some typical styles for a site's navigation:
|
||||
|
||||
%ul
|
||||
%li= link_to "SCSS", "#topic-3-SCSS"
|
||||
%li= link_to "SASS", "#topic-3-SASS"
|
||||
%li= link_to "Sass", "#topic-3-Sass"
|
||||
|
||||
#topic-3-SCSS
|
||||
%h3 SCSS Syntax
|
||||
~ partial "code-snippets/homepage-nesting-scss"
|
||||
|
||||
#topic-3-SASS
|
||||
%h3 SASS Syntax
|
||||
#topic-3-Sass
|
||||
%h3 Sass Syntax
|
||||
~ partial "code-snippets/homepage-nesting-sass"
|
||||
|
||||
:markdown
|
||||
@ -90,7 +90,7 @@ title: SASS Basics
|
||||
:markdown
|
||||
## Partials
|
||||
|
||||
You can create partial SASS files that contain little snippets of CSS that you can include in other SASS files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a SASS file named with a leading underscore. You might name it something like <code>_partial.scss</code>. The underscore lets SASS know that the file is only a partial file and that it should not be generated into a CSS file. SASS partials are used with the <code>@import</code> directive.
|
||||
You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like <code>_partial.scss</code>. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the <code>@import</code> directive.
|
||||
|
||||
***
|
||||
|
||||
@ -98,27 +98,27 @@ title: SASS Basics
|
||||
:markdown
|
||||
## Import
|
||||
|
||||
CSS has an import option that lets you split your CSS into smaller, more maintainable portions. The only drawback is that each time you use <code>@import</code> in CSS it creates another HTTP request. SASS builds on top of the current CSS <code>@import</code> but instead of requiring an HTTP request, SASS will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.
|
||||
CSS has an import option that lets you split your CSS into smaller, more maintainable portions. The only drawback is that each time you use <code>@import</code> in CSS it creates another HTTP request. Sass builds on top of the current CSS <code>@import</code> but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.
|
||||
|
||||
Let's say you have a couple of SASS files, <code>\_reset.scss</code> and <code>base.scss</code>. We want to import <code>\_reset.scss</code> into <code>base.scss</code>.
|
||||
Let's say you have a couple of Sass files, <code>\_reset.scss</code> and <code>base.scss</code>. We want to import <code>\_reset.scss</code> into <code>base.scss</code>.
|
||||
|
||||
%ul
|
||||
%li= link_to "SCSS", "#topic-5-SCSS"
|
||||
%li= link_to "SASS", "#topic-5-SASS"
|
||||
%li= link_to "Sass", "#topic-5-Sass"
|
||||
|
||||
#topic-5-SCSS
|
||||
%h3 SCSS Syntax
|
||||
~ partial "code-snippets/homepage-import-1-scss"
|
||||
~ partial "code-snippets/homepage-import-2-scss"
|
||||
|
||||
#topic-5-SASS
|
||||
%h3 SASS Syntax
|
||||
#topic-5-Sass
|
||||
%h3 Sass Syntax
|
||||
~ partial "code-snippets/homepage-import-1-sass"
|
||||
~ partial "code-snippets/homepage-import-2-sass"
|
||||
|
||||
:markdown
|
||||
|
||||
Notice we're using <code>@import 'reset';</code> in the <code>base.scss</code> file. When you import a file you don't need to include the file extension <code>.scss</code>. SASS is smart and will figure it out for you. When you generate the CSS you'll get:
|
||||
Notice we're using <code>@import 'reset';</code> in the <code>base.scss</code> file. When you import a file you don't need to include the file extension <code>.scss</code>. Sass is smart and will figure it out for you. When you generate the CSS you'll get:
|
||||
|
||||
~ partial "code-snippets/homepage-import-css"
|
||||
|
||||
@ -132,14 +132,14 @@ title: SASS Basics
|
||||
|
||||
%ul
|
||||
%li= link_to "SCSS", "#topic-6-SCSS"
|
||||
%li= link_to "SASS", "#topic-6-SASS"
|
||||
%li= link_to "Sass", "#topic-6-Sass"
|
||||
|
||||
#topic-6-SCSS
|
||||
%h3 SCSS Syntax
|
||||
~ partial "code-snippets/homepage-mixins-scss"
|
||||
|
||||
#topic-6-SASS
|
||||
%h3 SASS Syntax
|
||||
#topic-6-Sass
|
||||
%h3 Sass Syntax
|
||||
~ partial "code-snippets/homepage-mixins-sass"
|
||||
|
||||
:markdown
|
||||
@ -153,18 +153,18 @@ title: SASS Basics
|
||||
:markdown
|
||||
## Extend/Inheritance
|
||||
|
||||
This is one of the most useful features of SASS. Using <code>@extend</code> lets you share a set of CSS properties from one selector to another. It helps keep your SASS very DRY. In our example we're going to create a simple series of messaging for errors, warnings and successes.
|
||||
This is one of the most useful features of Sass. Using <code>@extend</code> lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. In our example we're going to create a simple series of messaging for errors, warnings and successes.
|
||||
|
||||
%ul
|
||||
%li= link_to "SCSS", "#topic-7-SCSS"
|
||||
%li= link_to "SASS", "#topic-7-SASS"
|
||||
%li= link_to "Sass", "#topic-7-Sass"
|
||||
|
||||
#topic-7-SCSS
|
||||
%h3 SCSS Syntax
|
||||
~ partial "code-snippets/homepage-extend-scss"
|
||||
|
||||
#topic-7-SASS
|
||||
%h3 SASS Syntax
|
||||
#topic-7-Sass
|
||||
%h3 Sass Syntax
|
||||
~ partial "code-snippets/homepage-extend-sass"
|
||||
|
||||
:markdown
|
||||
@ -178,21 +178,21 @@ title: SASS Basics
|
||||
:markdown
|
||||
## Operators
|
||||
|
||||
Doing math in your CSS is very helpful. SASS has a handful of standard math operators like `+`, `-`, `*`, `/`, and `%`. In our example we're going to do some simple math to calculate widths for an `aside` & `article`.
|
||||
Doing math in your CSS is very helpful. Sass has a handful of standard math operators like `+`, `-`, `*`, `/`, and `%`. In our example we're going to do some simple math to calculate widths for an `aside` & `article`.
|
||||
|
||||
%ul
|
||||
%li= link_to "SCSS", "#topic-8-SCSS"
|
||||
%li= link_to "SASS", "#topic-8-SASS"
|
||||
%li= link_to "Sass", "#topic-8-Sass"
|
||||
|
||||
#topic-8-SCSS
|
||||
%h3 SCSS Syntax
|
||||
~ partial "code-snippets/homepage-operators-scss"
|
||||
|
||||
#topic-8-SASS
|
||||
%h3 SASS Syntax
|
||||
#topic-8-Sass
|
||||
%h3 Sass Syntax
|
||||
~ partial "code-snippets/homepage-operators-sass"
|
||||
|
||||
:markdown
|
||||
We've created a very simple fluid grid, based on 960px. Operations in SASS let us do something like take pixel values and convert them to percentages without much hassle. The generated CSS will look like:
|
||||
We've created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle. The generated CSS will look like:
|
||||
|
||||
~ partial "code-snippets/homepage-operators-css"
|
||||
|
||||
@ -7,7 +7,7 @@ h1: CSS with superpowers
|
||||
.hero-lockup
|
||||
%p.hero-image= image_tag "illustrations/glasses.svg", height: "160", alt: "Glasses"
|
||||
%p.introduction
|
||||
SASS is the most mature, stable, and powerful professional grade CSS
|
||||
Sass is the most mature, stable, and powerful professional grade CSS
|
||||
extension language in the world.
|
||||
|
||||
- content_for :section_bottom do
|
||||
@ -15,35 +15,35 @@ h1: CSS with superpowers
|
||||
%li
|
||||
%h3 CSS Compatible
|
||||
%p
|
||||
SASS is completely compatible with all versions of CSS. We take this
|
||||
Sass is completely compatible with all versions of CSS. We take this
|
||||
compatibility seriously, so that you can seamlessly use any available
|
||||
CSS libraries.
|
||||
%li
|
||||
%h3 Feature Rich
|
||||
%p
|
||||
SASS boasts more features and abilities than any other CSS extension
|
||||
language out there. The SASS Core Team has worked endlessly to not
|
||||
Sass boasts more features and abilities than any other CSS extension
|
||||
language out there. The Sass Core Team has worked endlessly to not
|
||||
only keep up, but stay ahead.
|
||||
%li
|
||||
%h3 Mature
|
||||
%p
|
||||
SASS has been actively supported for
|
||||
Sass has been actively supported for
|
||||
= time_ago_in_words DateTime.parse("Tue Nov 28 19:43:58 2006 +0000")
|
||||
by its loving Core Team.
|
||||
%li
|
||||
%h3 Industry Approved
|
||||
%p
|
||||
Over and over again, the industry is choosing SASS as the premier CSS
|
||||
Over and over again, the industry is choosing Sass as the premier CSS
|
||||
extension language.
|
||||
%li
|
||||
%h3 Large Community
|
||||
%p
|
||||
SASS is actively supported and developed by a consortium of several
|
||||
Sass is actively supported and developed by a consortium of several
|
||||
tech companies and hundreds of developers.
|
||||
%li
|
||||
%h3 Frameworks
|
||||
%p
|
||||
There are endless number of frameworks built with SASS.
|
||||
There are endless number of frameworks built with Sass.
|
||||
= succeed "," do
|
||||
= link_to "Compass", "http://compass-style.org/"
|
||||
= succeed "," do
|
||||
@ -56,6 +56,6 @@ h1: CSS with superpowers
|
||||
.get-started
|
||||
%h3 Getting Started Is Easy
|
||||
%ol
|
||||
%li= link_to "Install SASS", "install"
|
||||
%li= link_to "Learn SASS", "guide"
|
||||
%li= link_to "Install Sass", "install"
|
||||
%li= link_to "Learn Sass", "guide"
|
||||
%li= link_to "Get Involved", "community"
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
---
|
||||
title: Install SASS
|
||||
title: Install Sass
|
||||
---
|
||||
|
||||
%h2 There are a couple of ways to start using SASS:
|
||||
%h2 There are a couple of ways to start using Sass:
|
||||
%ol.list-columns
|
||||
%li.gui-application
|
||||
%h3 Applications
|
||||
%p= image_tag "illustrations/mouse.svg", class: "header-image", height: "160", alt: "Mouse"
|
||||
%p
|
||||
There are a good many applications that will get you up and running
|
||||
with SASS in a few minutes for Mac, Windows, and Linux. You can download
|
||||
with Sass in a few minutes for Mac, Windows, and Linux. You can download
|
||||
most of the applications for free but a few of them are paid apps
|
||||
<small>(and totally worth it)</small>.
|
||||
|
||||
@ -71,7 +71,7 @@ title: Install SASS
|
||||
%dl#install-ruby-windows
|
||||
%dt Windows
|
||||
%dd
|
||||
Before you start using SASS you will need to install Ruby. The fastest
|
||||
Before you start using Sass you will need to install Ruby. The fastest
|
||||
way to get Ruby on your Windows computer is to use
|
||||
<a href="http://rubyinstaller.org">Ruby Installer</a>. It's a
|
||||
single-click installer that will get everything set up for you super
|
||||
@ -84,15 +84,15 @@ title: Install SASS
|
||||
%dl#install-ruby-mac
|
||||
%dt Mac
|
||||
%dd
|
||||
If you prefer the command line over an application then getting SASS
|
||||
set up is a fairly quick process. SASS has a Ruby dependency but if
|
||||
If you prefer the command line over an application then getting Sass
|
||||
set up is a fairly quick process. Sass has a Ruby dependency but if
|
||||
you're using a Mac, congratulations, Ruby comes pre-installed.
|
||||
|
||||
%dl
|
||||
%dt Install SASS
|
||||
%dt Install Sass
|
||||
%dd
|
||||
%p
|
||||
Here's the quickest way we've found to start using SASS by using
|
||||
Here's the quickest way we've found to start using Sass by using
|
||||
the command line:
|
||||
|
||||
%ol
|
||||
@ -104,36 +104,36 @@ title: Install SASS
|
||||
|
||||
%li
|
||||
%p
|
||||
<strong>Install SASS.</strong> Ruby uses Gems to manage its
|
||||
various packages of code like SASS. In your open terminal
|
||||
<strong>Install Sass.</strong> Ruby uses Gems to manage its
|
||||
various packages of code like Sass. In your open terminal
|
||||
window type:
|
||||
%pre
|
||||
:preserve
|
||||
gem install sass
|
||||
%p
|
||||
This will install SASS and any dependencies for you. It's pretty
|
||||
magical. If you get an error message then it's likely you will need to use the <code>sudo</code> command to install the SASS gem. It would look like:
|
||||
This will install Sass and any dependencies for you. It's pretty
|
||||
magical. If you get an error message then it's likely you will need to use the <code>sudo</code> command to install the Sass gem. It would look like:
|
||||
%pre
|
||||
:preserve
|
||||
sudo gem install sass
|
||||
|
||||
%li
|
||||
%p
|
||||
<strong>Double-check.</strong> You should now have SASS
|
||||
<strong>Double-check.</strong> You should now have Sass
|
||||
installed, but it never hurts to double-check. In your
|
||||
terminal application you can type:
|
||||
%pre
|
||||
:preserve
|
||||
sass -v
|
||||
- if data.respond_to?(:version)
|
||||
%p It should return <code>SASS #{data.version.number} (#{data.version.name})</code>. Congratulations! You've successfully installed SASS.
|
||||
%p It should return <code>Sass #{data.version.number} (#{data.version.name})</code>. Congratulations! You've successfully installed Sass.
|
||||
- else
|
||||
%p It should return <code>SASS ???</code>. Congratulations! You've successfully installed SASS.
|
||||
%p It should return <code>Sass ???</code>. Congratulations! You've successfully installed Sass.
|
||||
|
||||
%li
|
||||
%p
|
||||
<strong>Go and play.</strong> If you're brand new to SASS
|
||||
<strong>Go and play.</strong> If you're brand new to Sass
|
||||
we've set up some resources to help you learn pretty darn
|
||||
quick.
|
||||
|
||||
%p= link_to "Learn More About SASS", "/guide", :class => "button primary"
|
||||
%p= link_to "Learn More About Sass", "/guide", :class => "button primary"
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
%header.banner(role="banner")
|
||||
.container
|
||||
%h1.site-brand= link_to (image_tag "logos/logo-april-fools.png", height: "48", alt: "SASS"), "/"
|
||||
%h1.site-brand= link_to (image_tag "logos/logo.svg", height: "48", alt: "Sass"), "/"
|
||||
|
||||
%nav.navigation.collapse(role="navigation")
|
||||
:markdown
|
||||
* [Install](/install)
|
||||
* [Learn SASS](/guide)
|
||||
* [Learn Sass](/guide)
|
||||
* [Blog](http://blog.sass-lang.com/)
|
||||
* [Documentation](/documentation/file.SASS_REFERENCE.html)
|
||||
* [Get Involved](/community)
|
||||
* [libSASS](/libsass)
|
||||
* [libSass](/libsass)
|
||||
|
||||
.banner-toggle
|
||||
%button(type="button" data-toggle="collapse" data-target=".navigation")
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
%ul
|
||||
%li.contentinfo-legal
|
||||
:markdown
|
||||
SASS © 2006–2015 [Hampton Catlin](http://www.hamptoncatlin.com/),
|
||||
Sass © 2006–2015 [Hampton Catlin](http://www.hamptoncatlin.com/),
|
||||
[Natalie Weizenbaum](http://nex-3.com/),
|
||||
[Chris Eppstein](http://chriseppstein.github.io/),
|
||||
and numerous contributors.
|
||||
@ -14,12 +14,12 @@
|
||||
|
||||
%li.contentinfo-tools
|
||||
%ul
|
||||
%li= link_to "SASS Repo", "https://github.com/sass/sass"
|
||||
%li= link_to "Sass Repo", "https://github.com/sass/sass"
|
||||
%li= link_to "Website Repo", "https://github.com/sass/sass-site"
|
||||
%li= link_to "Style Guide", "/styleguide"
|
||||
%li= link_to "Community Guidelines", "/community-guidelines"
|
||||
|
||||
%li.contentinfo-social
|
||||
%a.twitter-follow-button(href="https://twitter.com/SassCSS" data-show-count="false" data-size="large") Follow @SASSCSS
|
||||
%a.twitter-follow-button(href="https://twitter.com/SassCSS" data-show-count="false" data-size="large") Follow @SassCSS
|
||||
:javascript
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
|
||||
@ -38,6 +38,6 @@
|
||||
.alert.stickers
|
||||
.container
|
||||
%p
|
||||
%strong Camp SASS is coming to Atlanta on April 4th.
|
||||
%strong Camp Sass is coming to Atlanta on April 4th.
|
||||
= succeed "." do
|
||||
= link_to "Grab a ticket now", "http://campsass.com"
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
---
|
||||
title: libSASS
|
||||
title: libSass
|
||||
---
|
||||
|
||||
%p.introduction
|
||||
We want everyone to enjoy SASS, no matter what language they use. SASS was
|
||||
We want everyone to enjoy Sass, no matter what language they use. Sass was
|
||||
originally written in Ruby.
|
||||
= link_to "libSASS", "http://libsass.org/"
|
||||
is a C/C++ port of the SASS engine. The point is to be simple, faster, and
|
||||
= link_to "libSass", "http://libsass.org/"
|
||||
is a C/C++ port of the Sass engine. The point is to be simple, faster, and
|
||||
easy to integrate. Find out more about the project over at
|
||||
= succeed "." do
|
||||
= link_to "GitHub", "http://github.com/hcatlin/libsass"
|
||||
@ -14,17 +14,17 @@ title: libSASS
|
||||
:markdown
|
||||
## Wrappers
|
||||
|
||||
LibSASS is just a library. To run the code locally (i.e. to compile your stylesheets), you need an implementer, or "wrapper". There are a number of other wrappers for LibSASS. We encourage you to write your own wrapper - the whole point of Libsass is that we want to bring SASS to many other languages, not just Ruby!
|
||||
LibSass is just a library. To run the code locally (i.e. to compile your stylesheets), you need an implementer, or "wrapper". There are a number of other wrappers for LibSass. We encourage you to write your own wrapper - the whole point of Libsass is that we want to bring Sass to many other languages, not just Ruby!
|
||||
|
||||
Below are the libSASS wrappers that we're currently aware of. Sometimes there are multiple wrappers per language – in those cases, we put the most recently-updated wrapper first.
|
||||
Below are the libSass wrappers that we're currently aware of. Sometimes there are multiple wrappers per language – in those cases, we put the most recently-updated wrapper first.
|
||||
|
||||
%ul.slides
|
||||
%li#sassc
|
||||
:markdown
|
||||
### SASS C
|
||||
SASSC (get it?) is an wrapper written in C.
|
||||
### SassC
|
||||
SassC (get it?) is an wrapper written in C.
|
||||
|
||||
To run the compiler on your local machine, you need to build SASSC. To build SASSC, you must have either a local copy of the libsass source or it must be installed into your system. For development, please use the source version. You must then setup an environment variable pointing to the LibSASS folder, for example:
|
||||
To run the compiler on your local machine, you need to build SassC. To build SassC, you must have either a local copy of the libSass source or it must be installed into your system. For development, please use the source version. You must then setup an environment variable pointing to the LibSass folder, for example:
|
||||
|
||||
~ partial "code-snippets/libsass-setup"
|
||||
|
||||
@ -41,7 +41,7 @@ title: libSASS
|
||||
%li#java
|
||||
:markdown
|
||||
### Java
|
||||
There is one Java wrapper – the [libSASS Maven plugin](https://github.com/warmuuh/libsass-maven-plugin).
|
||||
There is one Java wrapper – the [libSass Maven plugin](https://github.com/warmuuh/libsass-maven-plugin).
|
||||
|
||||
%li#javascript
|
||||
:markdown
|
||||
@ -56,57 +56,57 @@ title: libSASS
|
||||
%li#net
|
||||
:markdown
|
||||
### .NET
|
||||
[libsass-net](https://github.com/darrenkopp/libsass-net) is updated regularly, and is probably the best bet. There's also [NSASS](https://github.com/TBAPI-0KA/NSass), although it hasn't been updated in a while.
|
||||
[libsass-net](https://github.com/darrenkopp/libsass-net) is updated regularly, and is probably the best bet. There's also [NSass](https://github.com/TBAPI-0KA/NSass), although it hasn't been updated in a while.
|
||||
|
||||
%li#node
|
||||
:markdown
|
||||
### Node
|
||||
The [node-sass](https://github.com/sass/node-sass) project has proven to be popular, and we've taken it into the main SASS GitHub repo. Check out its package page [here](https://www.npmjs.org/package/node-sass), and [there's a dedicated twitter account](https://twitter.com/nodesass) for updates.
|
||||
The [node-sass](https://github.com/sass/node-sass) project has proven to be popular, and we've taken it into the main Sass GitHub repo. Check out its package page [here](https://www.npmjs.org/package/node-sass), and [there's a dedicated twitter account](https://twitter.com/nodesass) for updates.
|
||||
|
||||
%li#perl
|
||||
:markdown
|
||||
### Perl
|
||||
The [CSS::SASS](https://github.com/sass/perl-libsass) project is updated regularly. There's the [Text-SASS-XS](https://github.com/ysasaki/Text-Sass-XS) project, too, although it hasn't been updated in a while.
|
||||
The [CSS::Sass](https://github.com/sass/perl-libsass) project is updated regularly. There's the [Text-Sass-XS](https://github.com/ysasaki/Text-Sass-XS) project, too, although it hasn't been updated in a while.
|
||||
|
||||
%li#php
|
||||
:markdown
|
||||
### PHP
|
||||
The [SASSPHP](https://github.com/sensational/sassphp) project is an updated fork of an [older PHP version](https://github.com/jamierumbelow/sassphp).
|
||||
The [SassPHP](https://github.com/sensational/sassphp) project is an updated fork of an [older PHP version](https://github.com/jamierumbelow/sassphp).
|
||||
|
||||
%li#python
|
||||
:markdown
|
||||
### Python
|
||||
There are two python projects that are updated regularly. The [libsass-python](https://github.com/dahlia/libsass-python) project (there are more details on [its own website](http://hongminhee.org/libsass-python/)) and the [python-scss](https://github.com/pistolero/python-scss) project.
|
||||
|
||||
Two other python projects, [pylibsass](https://github.com/rsenk330/pylibsass) and [SASSPython](https://github.com/marianoguerra/SassPython), haven't been updated in a while.
|
||||
Two other python projects, [pylibsass](https://github.com/rsenk330/pylibsass) and [SassPython](https://github.com/marianoguerra/SassPython), haven't been updated in a while.
|
||||
|
||||
|
||||
%li#ruby
|
||||
:markdown
|
||||
### Ruby
|
||||
libSASS has also been ported back into ruby, for the [ruby-libsass](https://github.com/sass/ruby-libsass) project.
|
||||
libSass has also been ported back into ruby, for the [ruby-libsass](https://github.com/sass/ruby-libsass) project.
|
||||
|
||||
%li#scala
|
||||
:markdown
|
||||
### Scala
|
||||
The only scala project, [SASS-Scala](https://github.com/kkung/Sass-Scala), hasn't been updated in a couple of years.
|
||||
The only scala project, [Sass-Scala](https://github.com/kkung/Sass-Scala), hasn't been updated in a couple of years.
|
||||
|
||||
%h2 About libSASS
|
||||
%h2 About libSass
|
||||
|
||||
:markdown
|
||||
This project is the brainchild of
|
||||
[Hampton Catlin](http://twitter.com/hcatlin), the original creator of SASS,
|
||||
[Hampton Catlin](http://twitter.com/hcatlin), the original creator of Sass,
|
||||
and is sponsored by [Moovweb](http://moovweb.com/).
|
||||
[Aaron Leung](http://github.com/akhleung) from Moovweb is the primary
|
||||
developer.
|
||||
|
||||
%figure
|
||||
= image_tag "logos/libsass.png", alt: "LibSASS logo"
|
||||
= image_tag "logos/libsass.png", alt: "LibSass logo"
|
||||
|
||||
- content_for :complementary do
|
||||
%h3 Wrappers
|
||||
%ul.anchors
|
||||
%li= link_to "SASSC", "#sassc"
|
||||
%li= link_to "SassC", "#sassc"
|
||||
%li= link_to "Go", "#go"
|
||||
%li= link_to "Java", "#java"
|
||||
%li= link_to "JavaScript", "#javascript"
|
||||
|
||||
@ -19,8 +19,8 @@ title: Brand Guidelines
|
||||
|
||||
%li
|
||||
%p
|
||||
When using the SASS brand and identity in your presentations, articles,
|
||||
videos, or any other media, please be respectful. The SASS brand is
|
||||
When using the Sass brand and identity in your presentations, articles,
|
||||
videos, or any other media, please be respectful. The Sass brand is
|
||||
feminine and we love that. But our brand must never be used alongside
|
||||
sexist imagery. In fact, we
|
||||
= link_to "explicitly changed our logo", "https://github.com/sass/sass/issues/349"
|
||||
@ -54,16 +54,16 @@ title: Brand Guidelines
|
||||
.logos
|
||||
%h3 Standard
|
||||
%ul.list-columns
|
||||
%li= image_tag "styleguide/color.png", height: "80", alt: "SASS"
|
||||
%li= image_tag "styleguide/seal-color.png", height: "80", alt: "SASS"
|
||||
%li= image_tag "styleguide/color.png", height: "80", alt: "Sass"
|
||||
%li= image_tag "styleguide/seal-color.png", height: "80", alt: "Sass"
|
||||
|
||||
%h3 White
|
||||
%ul.list-tiled.swatch-color-background-shade
|
||||
%li= image_tag "styleguide/white.png", height: "80", alt: "SASS"
|
||||
%li= image_tag "styleguide/seal-color-reversed.png", height: "80", alt: "SASS"
|
||||
%li= image_tag "styleguide/seal-black-reversed.png", height: "80", alt: "SASS"
|
||||
%li= image_tag "styleguide/white.png", height: "80", alt: "Sass"
|
||||
%li= image_tag "styleguide/seal-color-reversed.png", height: "80", alt: "Sass"
|
||||
%li= image_tag "styleguide/seal-black-reversed.png", height: "80", alt: "Sass"
|
||||
|
||||
%h3 Black
|
||||
%ul.list-columns
|
||||
%li= image_tag "styleguide/black.png", height: "80", alt: "SASS"
|
||||
%li= image_tag "styleguide/seal-black.png", height: "80", alt: "SASS"
|
||||
%li= image_tag "styleguide/black.png", height: "80", alt: "Sass"
|
||||
%li= image_tag "styleguide/seal-black.png", height: "80", alt: "Sass"
|
||||
|
||||
@ -25,7 +25,7 @@ title: Code Style Guide
|
||||
(`<br />`)
|
||||
|
||||
## Style
|
||||
This website uses SASS (duh) in the newer SCSS syntax. We also use the
|
||||
This website uses Sass (duh) in the newer SCSS syntax. We also use the
|
||||
following extensions:
|
||||
|
||||
- [Compass](http://compass-style.org/)
|
||||
|
||||
@ -4,12 +4,12 @@ title: Style Guide
|
||||
|
||||
- content_for (:introduction) do
|
||||
Contributing to this website? Awesome! Use this style guide, developed by
|
||||
Team SASS Design. If you add new design, please document it here.
|
||||
Team Sass Design. If you add new design, please document it here.
|
||||
|
||||
%h2 Site Objectives
|
||||
|
||||
%ol.list-feature
|
||||
%li Show why SASS is the best CSS Preprocessor,
and why you should use it.
|
||||
%li Show why Sass is the best CSS Preprocessor,
and why you should use it.
|
||||
%li
|
||||
Be a resource for those who are already using SASS,
|
||||
Be a resource for those who are already using Sass,
|
||||
at whatever level.
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
---
|
||||
title: Team SASS Design
|
||||
title: Team Sass Design
|
||||
---
|
||||
|
||||
%p.introduction
|
||||
%strong Team SASS Design
|
||||
is a design task force who redesigned the brand and website for SASS. You
|
||||
%strong Team Sass Design
|
||||
is a design task force who redesigned the brand and website for Sass. You
|
||||
can follow us on Twitter for site and design announcements:
|
||||
|
||||
%a.twitter-follow-button(href="https://twitter.com/TeamSassDesign" data-show-count="false" data-size="large") Follow @TeamSASSDesign
|
||||
%a.twitter-follow-button(href="https://twitter.com/TeamSassDesign" data-show-count="false" data-size="large") Follow @TeamSassDesign
|
||||
:javascript
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
|
||||
%dl
|
||||
%dt Team SASS Design:
|
||||
%dt Team Sass Design:
|
||||
%dd
|
||||
%ul
|
||||
%li
|
||||
@ -31,5 +31,5 @@ title: Team SASS Design
|
||||
|
||||
%p
|
||||
Additionally, many people attending
|
||||
<a href="http://sassconf.com">SASSConf 2013</a> jumped in and helped get the
|
||||
<a href="http://sassconf.com">SassConf 2013</a> jumped in and helped get the
|
||||
site deployed. Many thanks for that.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user