summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--sass.html.markdown89
1 files changed, 47 insertions, 42 deletions
diff --git a/sass.html.markdown b/sass.html.markdown
index 9bc72478..77e82a09 100644
--- a/sass.html.markdown
+++ b/sass.html.markdown
@@ -20,16 +20,13 @@ relatively quickly. It does not provide any new styling options but rather
the tools to write your CSS more efficiently and make maintenance much
easier.
-Sass files must be compiled into CSS. You can use any number of commandline
-tools to compile Sass into CSS. Many IDEs also offer Sass compilation, as well.
-
-
```sass
-/* Like CSS, Sass uses slash-asterisk to denote comments. Slash-asterisk comments
- can span multiple lines. These comments will appear in your compiled CSS */
+/* Like CSS, Sass uses slash-asterisk to denote comments. Slash-asterisk
+ comments can span multiple lines. These comments will appear
+ in your compiled CSS */
-// Sass also supports single line comments that use double slashes. These comments will
-// not be rendered in your compiled CSS
+// Sass also supports single line comments that use double slashes. These
+// comments will not be rendered in your compiled CSS
/* ####################
## VARIABLES
@@ -52,8 +49,7 @@ h1 {
font-size: $headline-size;
}
-/* After compiling the Sass files into CSS, you'll have the following code
- in your generated CSS file */
+/* Generated CSS result */
a {
color: #0000ff;
@@ -91,7 +87,7 @@ article {
}
}
-/* The above will compile into the following CSS */
+/* Generated CSS result */
article {
font-size: 14px;
}
@@ -115,16 +111,16 @@ article img {
}
/* It is recommended to not nest too deeply as this can cause issues with
- specificity and make your CSS harder to work with and maintain. Best practices
- recommend going no more than 3 levels deep when nesting. */
+ specificity and make your CSS harder to work with and maintain. Best
+ practices recommend going no more than 3 levels deep when nesting. */
/* ###############################
## REFERENCE PARENT SELECTORS
############################### */
-/* Reference parent selectors are used when you're nesting statements and want to
- reference the parent selector from within the nested statements. You can reference
- a parent using & */
+/* Reference parent selectors are used when you're nesting statements and want
+ to reference the parent selector from within the nested statements. You can
+ reference a parent using & */
a {
text-decoration: none;
@@ -139,7 +135,7 @@ a {
}
}
-/* The above Sass will compile into the CSS below */
+/* Generated CSS result */
a {
text-decoration: none;
@@ -160,8 +156,8 @@ body.noLinks a {
#################### */
/* Mixins allow you to define reusable chunks of CSS. They can take one or more
- arguments to allow you to make reusable pieces of styling. Mixins can also
- be very helpful when dealing with vendor prefixes. */
+ arguments to allow you to make reusable pieces of styling. Mixins very
+ helpful when dealing with vendor prefixes. */
@mixin form-button($color, $size, $border-radius) {
color: $color;
@@ -175,7 +171,7 @@ body.noLinks a {
@include form-button(#0000ff, 16px, 4px);
}
-/* The above mixin will compile into the following css */
+/* Generated CSS result */
.user-form .submit {
color: #0000ff;
@@ -187,9 +183,11 @@ body.noLinks a {
## FUNCTIONS
#################### */
-/* Sass provides functions that can be used to accomplish a variety of tasks. Consider the following */
+/* Sass provides functions that can be used to accomplish a variety of
+ tasks. Consider the following */
-/* Functions can be invoked by using their name and passing in the required arguments */
+/* Functions can be invoked by using their name and passing in the
+ required arguments */
body {
width: round(10.25px);
}
@@ -198,7 +196,7 @@ body {
background-color: fade_out(#000000, 0.25)
}
-/* The above Sass will compile into the following CSS */
+/* Generated CSS result */
body {
width: 10px;
@@ -208,14 +206,15 @@ body {
background-color: rgba(0, 0, 0, 0.75);
}
-/* You may also define your own functions. Functions are very similar to mixins. When trying
- to choose between a function or a mixin, remember that functions are best for returning
- values while mixins are best for generating CSS while functions are better for logic that
- might be used throughout your Sass code. The examples in the Math Operators' section are
- ideal candidates for becoming a reusable function. */
-
-/* This function will take a target size and the parent size and calculate and return
- the percentage */
+/* You may also define your own functions. Functions are very similar to
+ mixins. When trying to choose between a function or a mixin, remember
+ that functions are best for returning values while mixins are best for
+ generating CSS while functions are better for logic that might be used
+ throughout your Sass code. The examples in the Math Operators' section
+ are ideal candidates for becoming a reusable function. */
+
+/* This function will take a target size and the parent size and calculate
+ and return the percentage */
@function calculate-percentage($target-size, $parent-size) {
@return $target-size / $parent-size * 100%;
@@ -231,7 +230,7 @@ $main-content: calculate-percentage(600px, 960px);
width: calculate-percentage(300px, 960px);
}
-/* The above Sass will compile into the following CSS */
+/* Generated CSS result */
.main-content {
width: 62.5%;
@@ -241,9 +240,9 @@ $main-content: calculate-percentage(600px, 960px);
width: 31.25%;
}
-/* ####################
+/* #####################
## EXTEND/INHERITANCE
- #################### */
+ ##################### */
/* Sass allows you to extend an existing CSS statement. This makes it
very easy to write CSS that does not violate DRY principles. Any
@@ -271,7 +270,7 @@ $main-content: calculate-percentage(600px, 960px);
background-color: #ccc;
}
-/* The above Sass will be compile into the following CSS */
+/* Generated CSS result */
.content-window,
.message-window,
@@ -306,10 +305,10 @@ $main-content: calculate-percentage(600px, 960px);
## PLACEHOLDER SELECTORS
######################### */
-/* Placeholders are useful when creating a CSS statement to extend. If you wanted to create
- a CSS statement that was exclusively used with @extend, you can do so using a placeholder.
- Placeholders begin with a '%' instead of '.' or '#'. Placeholders will not appear in the
- compiled CSS. */
+/* Placeholders are useful when creating a CSS statement to extend. If you
+ wanted to create a CSS statement that was exclusively used with @extend,
+ you can do so using a placeholder. Placeholders begin with a '%' instead
+ of '.' or '#'. Placeholders will not appear in the compiled CSS. */
%content-window {
font-size: 14px;
@@ -323,7 +322,7 @@ $main-content: calculate-percentage(600px, 960px);
background-color: #0000ff;
}
-/* The above Sass would compile to the following CSS */
+/* Generated CSS result */
.message-window {
font-size: 14px;
@@ -369,7 +368,7 @@ body {
width: $gutter;
}
-/* The above Sass would compile to the CSS below */
+/* Generated CSS result */
body {
width: 100%;
@@ -391,9 +390,15 @@ body {
## Usage
+Sass files must be compiled into CSS. You can use any number of commandline
+tools to compile Sass into CSS. Many IDEs also offer Sass compilation, as well.
+[Compass](http://compass-style.org/) is one of the more popular tools for Sass compilation.
## Compatibility
+Sass can be used in any project as long as you have something to compile it
+into CSS. You'll want to verify that the CSS you're using is compatible
+with your target browsers.
-## Further Reading
+[QuirksMode CSS](http://www.quirksmode.org/css/) and [CanIUse](http://caniuse.com) great resources for checking compatibility. \ No newline at end of file