summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--sass.html.markdown74
1 files changed, 58 insertions, 16 deletions
diff --git a/sass.html.markdown b/sass.html.markdown
index 77e82a09..e03231ff 100644
--- a/sass.html.markdown
+++ b/sass.html.markdown
@@ -28,9 +28,9 @@ easier.
// Sass also supports single line comments that use double slashes. These
// comments will not be rendered in your compiled CSS
-/* ####################
+/* ############
## VARIABLES
- #################### */
+ ############ */
/* Sass allows you to define variables that can be used throughout
your stylesheets. Variables are defined by placing a '$' in front
@@ -60,9 +60,9 @@ h1 {
font-size: 24px;
}
-/* ####################
+/* ##########
## NESTING
- #################### */
+ ########## */
/* Nesting allows you to easily group together statements and nest them
in a way that indicates their hierarchy */
@@ -114,9 +114,9 @@ article img {
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
@@ -151,9 +151,9 @@ body.noLinks a {
}
-/* ####################
+/* #########
## MIXINS
- #################### */
+ ######### */
/* 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 very
@@ -179,9 +179,9 @@ body.noLinks a {
border-radius: 4px;
}
-/* ####################
+/* ############
## FUNCTIONS
- #################### */
+ ############ */
/* Sass provides functions that can be used to accomplish a variety of
tasks. Consider the following */
@@ -240,6 +240,48 @@ $main-content: calculate-percentage(600px, 960px);
width: 31.25%;
}
+/* #######################
+ ## PARTIALS AND IMPORTS
+ ####################### */
+/* Sass allows you to create partial files. This can help keep your Sass
+ code modularized. Partial files should begin with an '_', e.g. _reset.css.
+ Partials are not generated into CSS. */
+
+/* Consider the following CSS which we'll put in a file called _reset.css */
+
+html,
+body,
+ul,
+ol {
+ margin: 0;
+ padding: 0;
+}
+
+/* Sass offers @import which can be used to import partials into a file.
+ This differs from the traditional CSS @import statement which makes
+ another HTTP request to fetch the imported file. Sass takes the
+ imported file and combines it with the compiled code. */
+
+@import 'reset';
+
+body {
+ font-size: 16px;
+ font-family: Helvetica, Arial, Sans-serif;
+}
+
+/* Generated CSS result */
+
+html, body, ul, ol {
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ font-size: 16px;
+ font-family: Helvetica, Arial, Sans-serif;
+}
+
+
/* #####################
## EXTEND/INHERITANCE
##################### */
@@ -301,9 +343,9 @@ $main-content: calculate-percentage(600px, 960px);
that called the mixin. While it won't affect your workflow, it will
add unnecessary bloat to the files created by the Sass compiler. */
-/* #########################
+/* ########################
## 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,
@@ -335,9 +377,9 @@ $main-content: calculate-percentage(600px, 960px);
background-color: #0000ff;
}
-/* ####################
+/* ##################
## MATH OPERATIONS
- #################### */
+ ################## */
/* Sass provides the following operators: +, -, *, /, and %. These can
be useful for calculating values directly in your Sass files instead
@@ -397,8 +439,8 @@ tools to compile Sass into CSS. Many IDEs also offer Sass compilation, as well.
## Compatibility
-Sass can be used in any project as long as you have something to compile it
+Sass can be used in any project as long as you have a program to compile it
into CSS. You'll want to verify that the CSS you're using is compatible
with your target browsers.
-[QuirksMode CSS](http://www.quirksmode.org/css/) and [CanIUse](http://caniuse.com) great resources for checking compatibility. \ No newline at end of file
+[QuirksMode CSS](http://www.quirksmode.org/css/) and [CanIUse](http://caniuse.com) are great resources for checking compatibility. \ No newline at end of file