info/learnxinyminutes-docs
1
0
Fork 0
mirror of https://github.com/adambard/learnxinyminutes-docs.git synced 2025-08-11 09:14:39 +02:00
Code Issues Releases Wiki Activity

Fixing formatting. Writing section about imports and partials.

Browse Source
This commit is contained in:
Sean Corrales
2015-10-13 09:51:26 -05:00
parent 9c267f1473
commit c357be714f
1 changed files with 58 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
sass.html.markdown
View File

@@ -28,9 +28,9 @@ easier.
// Sass also supports single line comments that use double slashes. These // Sass also supports single line comments that use double slashes. These
// comments will not be rendered in your compiled CSS // comments will not be rendered in your compiled CSS
/* #################### /* ############
## VARIABLES ## VARIABLES
#################### */ ############ */
/* Sass allows you to define variables that can be used throughout /* Sass allows you to define variables that can be used throughout
your stylesheets. Variables are defined by placing a '$' in front your stylesheets. Variables are defined by placing a '$' in front
@@ -60,9 +60,9 @@ h1 {
font-size: 24px; font-size: 24px;
} }
/* #################### /* ##########
## NESTING ## NESTING
#################### */ ########## */
/* Nesting allows you to easily group together statements and nest them /* Nesting allows you to easily group together statements and nest them
in a way that indicates their hierarchy */ 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 specificity and make your CSS harder to work with and maintain. Best
practices recommend going no more than 3 levels deep when nesting. */ practices recommend going no more than 3 levels deep when nesting. */
/* ############################### /* #############################
## REFERENCE PARENT SELECTORS ## REFERENCE PARENT SELECTORS
############################### */ ############################# */
/* Reference parent selectors are used when you're nesting statements and want /* Reference parent selectors are used when you're nesting statements and want
to reference the parent selector from within the nested statements. You can to reference the parent selector from within the nested statements. You can
@@ -151,9 +151,9 @@ body.noLinks a {
} }
/* #################### /* #########
## MIXINS ## MIXINS
#################### */ ######### */
/* Mixins allow you to define reusable chunks of CSS. They can take one or more /* 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 arguments to allow you to make reusable pieces of styling. Mixins very
@@ -179,9 +179,9 @@ body.noLinks a {
border-radius: 4px; border-radius: 4px;
} }
/* #################### /* ############
## FUNCTIONS ## FUNCTIONS
#################### */ ############ */
/* Sass provides functions that can be used to accomplish a variety of /* Sass provides functions that can be used to accomplish a variety of
tasks. Consider the following */ tasks. Consider the following */
@@ -240,6 +240,48 @@ $main-content: calculate-percentage(600px, 960px);
width: 31.25%; 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 ## 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 that called the mixin. While it won't affect your workflow, it will
add unnecessary bloat to the files created by the Sass compiler. */ add unnecessary bloat to the files created by the Sass compiler. */
/* ######################### /* ########################
## PLACEHOLDER SELECTORS ## PLACEHOLDER SELECTORS
######################### */ ######################## */
/* Placeholders are useful when creating a CSS statement to extend. If you /* Placeholders are useful when creating a CSS statement to extend. If you
wanted to create a CSS statement that was exclusively used with @extend, 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; background-color: #0000ff;
} }
/* #################### /* ##################
## MATH OPERATIONS ## MATH OPERATIONS
#################### */ ################## */
/* Sass provides the following operators: +, -, *, /, and %. These can /* Sass provides the following operators: +, -, *, /, and %. These can
be useful for calculating values directly in your Sass files instead 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 ## 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 into CSS. You'll want to verify that the CSS you're using is compatible
with your target browsers. with your target browsers.
[QuirksMode CSS](http://www.quirksmode.org/css/) and [CanIUse](http://caniuse.com) great resources for checking compatibility. [QuirksMode CSS](http://www.quirksmode.org/css/) and [CanIUse](http://caniuse.com) are great resources for checking compatibility.