danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2025-01-21 21:31:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Wrapped Haml files at 80 characters (#179)

Browse Source 
Since the CI system yells about this when you modify them going forward
This commit is contained in:
Nick Schonning 2016-09-17 06:11:34 -04:00 committed by ₍˄･·̫･˄₎
parent 0505090dc9
commit 7c13129e75
5 changed files with 164 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
source/about.html.haml
View File

@ -1,22 +1,29 @@
%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
%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
%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/"
\.

3
source/community.html.haml
View File

@ -69,7 +69,8 @@ title: "#teamSass"
version of Sass. Bug fixes for released functionality, documentation
improvements, and and general infrastructure stuff should all go on
stable. The [master branch][master] is where we work on the next version
of Sass. Once you've followed the steps below, new features should be submitted to master.
of Sass. Once you've followed the steps below, new features should be
submitted to master.
[master]: https://github.com/sass/sass/tree/master
[planned]: https://github.com/sass/sass/labels/Planned

103
source/guide.html.haml
View File

@ -25,11 +25,21 @@ 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 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 as a normal CSS file that you can use in your
web site.
The most direct way to make this happen is in your terminal. Once Sass is installed, you can run `sass input.scss output.css` from your terminal. You can watch either individual files or entire directories. In addition, you can watch folders or directories with the `--watch` flag. An example of running Sass while watching an entire directory is the following:
The most direct way to make this happen is in your terminal. Once Sass is
installed, you can run `sass input.scss output.css` from your terminal.
You can watch either individual files or entire directories. In addition,
you can watch folders or directories with the `--watch` flag. An example
of running Sass while watching an entire directory is the following:
~ partial "code-snippets/homepage-sass-watch"
@ -39,7 +49,10 @@ 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"
@ -54,7 +67,11 @@ title: Sass Basics
~ 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&nbsp;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&nbsp;site.
~ partial "code-snippets/homepage-variables-css"
@ -64,12 +81,16 @@ title: Sass Basics
:markdown
## Nesting
When writing HTML you've probably noticed that it has a clear nested and visual hierarchy. CSS, on the other hand, doesn't.
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
over-qualified CSS that could prove hard to maintain and is generally considered bad practice.
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&nbsp;navigation:
With that in mind, here's an example of some typical styles for a
site's&nbsp;navigation:
%ul
%li= link_to "SCSS", "#topic-3-SCSS"
@ -84,7 +105,10 @@ title: Sass Basics
~ partial "code-snippets/homepage-nesting-sass"
:markdown
You'll notice that the <code>ul</code>, <code>li</code>, and <code>a</code> selectors are nested inside the <code>nav</code> selector. This is a great way to organize your CSS and make it more readable. When you generate the CSS you'll get something like&nbsp;this:
You'll notice that the <code>ul</code>, <code>li</code>, and
<code>a</code> selectors are nested inside the <code>nav</code> selector.
This is a great way to organize your CSS and make it more readable. When
you generate the CSS you'll get something like&nbsp;this:
~ partial "code-snippets/homepage-nesting-css"
@ -94,7 +118,13 @@ 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.
***
@ -102,9 +132,17 @@ 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"
@ -122,7 +160,10 @@ title: Sass Basics
: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&nbsp;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&nbsp;get:
~ partial "code-snippets/homepage-import-css"
@ -132,7 +173,11 @@ title: Sass Basics
:markdown
## Mixins
Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here's an example for <code>border-radius</code>.
Some things in CSS are a bit tedious to write, especially with CSS3 and
the many vendor prefixes that exist. A mixin lets you make groups of CSS
declarations that you want to reuse throughout your site. You can even
pass in values to make your mixin more flexible. A good use of a mixin is
for vendor prefixes. Here's an example for <code>border-radius</code>.
%ul
%li= link_to "SCSS", "#topic-6-SCSS"
@ -147,7 +192,12 @@ title: Sass Basics
~ partial "code-snippets/homepage-mixins-sass"
:markdown
To create a mixin you use the <code>@mixin</code> directive and give it a name. We've named our mixin <code>border-radius</code>. We're also using the variable <code>$radius</code> inside the parentheses so we can pass in a radius of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with <code>@include</code> followed by the name of the mixin. When your CSS is generated it'll look like this:
To create a mixin you use the <code>@mixin</code> directive and give it a
name. We've named our mixin <code>border-radius</code>. We're also using
the variable <code>$radius</code> inside the parentheses so we can pass in
a radius of whatever we want. After you create your mixin, you can then
use it as a CSS declaration starting with <code>@include</code> followed
by the name of the mixin. When your CSS is generated it'll look like this:
~ partial "code-snippets/homepage-mixins-css"
@ -157,7 +207,11 @@ 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"
@ -172,7 +226,11 @@ title: Sass Basics
~ partial "code-snippets/homepage-extend-sass"
:markdown
What the above code does is allow you to take the CSS properties in <code>.message</code> and apply them to <code>.success</code>, <code>.error</code>, & <code>.warning</code>. The magic happens with the generated CSS, and this helps you avoid having to write multiple class names on HTML elements. This is what it looks&nbsp;like:
What the above code does is allow you to take the CSS properties in
<code>.message</code> and apply them to <code>.success</code>,
<code>.error</code>, & <code>.warning</code>. The magic happens with the
generated CSS, and this helps you avoid having to write multiple class
names on HTML elements. This is what it looks&nbsp;like:
~ partial "code-snippets/homepage-extend-css"
@ -182,7 +240,10 @@ 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"
@ -197,6 +258,8 @@ title: Sass Basics
~ 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"

14
source/install.html.haml
View File

@ -64,7 +64,8 @@ title: Install Sass
%dt Linux
%dd
If you're using a distribution of Linux, you'll need to install Ruby
first. You can install Ruby through the apt package manager, rbenv, or rvm.
first. You can install Ruby through the apt package manager, rbenv, or
rvm.
%pre
:preserve
sudo gem install sass --no-user-install
@ -113,7 +114,9 @@ title: Install Sass
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:
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
@ -127,9 +130,12 @@ title: Install Sass
: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

74
source/libsass.html.haml
View File

@ -14,39 +14,57 @@ 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](https://github.com/sass/sassc) (get it?) is an wrapper written in C.
[SassC](https://github.com/sass/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"
%p
The executable will be in the bin folder. To run it, simply try something like:
The executable will be in the bin folder. To run it, simply try something
like:
~ partial "code-snippets/libsass-execute"
%li#go
:markdown
### Go
[Wellington](https://github.com/wellington/wellington) is an extension to LibSass that adds spriting and is available on brew:
[Wellington](https://github.com/wellington/wellington) is an extension to
LibSass that adds spriting and is available on brew:
`brew install wellington`
There are also three other LibSass wrappers in go: [gosass](https://github.com/moovweb/gosass), [go-sass](https://github.com/SamWhited/go-sass) and [go_sass](https://github.com/suapapa/go_sass) which have not been updated in a while.
There are also three other LibSass wrappers in go:
[gosass](https://github.com/moovweb/gosass),
[go-sass](https://github.com/SamWhited/go-sass) and
[go_sass](https://github.com/suapapa/go_sass) which have not been updated
in a while.
%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
@ -59,45 +77,67 @@ title: LibSass
%li#lua
:markdown
### Lua
The lua wrapper is found at [lua-sass](https://github.com/craigbarnes/lua-sass).
The lua wrapper is found at
[lua-sass](https://github.com/craigbarnes/lua-sass).
%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.
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 [sassc-ruby](https://github.com/sass/sassc-ruby) project.
LibSass has also been ported back into ruby, for the
[sassc-ruby](https://github.com/sass/sassc-ruby) 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