mirror of
https://github.com/danog/sass-site.git
synced 2024-11-26 20:14:53 +01:00
Merge pull request #13 from Aptary/master
Fix typos in install and guide haml
This commit is contained in:
commit
99505e403a
@ -50,7 +50,7 @@ title: Sass Basics
|
||||
:markdown
|
||||
## Nesting
|
||||
|
||||
When you write HTML you've probably noticed that it has a fairly clear nested, visual hierarchy. CSS, on the other hand, isn't. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Here's an example of some typical styles for a sites navigation:
|
||||
When you write HTML you've probably noticed that it has a fairly clear nested, visual hierarchy. CSS, on the other hand, isn't. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Here's an example of some typical styles for a site's navigation:
|
||||
|
||||
~ partial "code-snippets/homepage-nesting-scss"
|
||||
|
||||
@ -65,7 +65,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 & 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 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 be generated into a CSS file. Sass partials are used with the <code>@import</code> directive.
|
||||
|
||||
***
|
||||
|
||||
@ -73,7 +73,7 @@ title: Sass Basics
|
||||
:markdown
|
||||
## Import
|
||||
|
||||
CSS has an import option that lets you split your CSS in to 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 your 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>.
|
||||
|
||||
@ -97,7 +97,7 @@ title: Sass Basics
|
||||
~ partial "code-snippets/homepage-mixins-scss"
|
||||
|
||||
:markdown
|
||||
To create a mixin you use the <code>@mixin</code> directive and giving it a name. We've named our mixin <code>border-radius</code>. We're also using the variable <code>$radius</code> inside the parenthesis 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"
|
||||
|
||||
|
@ -67,7 +67,7 @@ layout: layout_1_column
|
||||
|
||||
%dd
|
||||
Along with Ruby the installer will also install a Ruby command line
|
||||
application that you will let you use the Ruby libraries.
|
||||
application that will let you use the Ruby libraries.
|
||||
Open --application name--.
|
||||
|
||||
%dl#install-ruby-mac
|
||||
@ -91,7 +91,7 @@ layout: layout_1_column
|
||||
|
||||
%li
|
||||
%p
|
||||
<strong>Install Sass.</strong> Ruby uses Gems to manage it's
|
||||
<strong>Install Sass.</strong> Ruby uses Gems to manage its
|
||||
various packages of code like Sass. In your open terminal
|
||||
window type:
|
||||
%pre
|
||||
|
Loading…
Reference in New Issue
Block a user