iskm/learnxinyminutes-docs
1
0
Fork 0
mirror of https://github.com/adambard/learnxinyminutes-docs.git synced 2024-12-26 10:48:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Cleaning up formatting. Adding usage and compatibility text

Browse Source
This commit is contained in:
Sean Corrales 2015-10-12 17:21:03 -05:00
parent 25d5d07dd3
commit 9c267f1473
1 changed files with 46 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
sass.html.markdown
View File

@ -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 the tools to write your CSS more efficiently and make maintenance much
easier. 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 ```sass
/* Like CSS, Sass uses slash-asterisk to denote comments. Slash-asterisk comments /* Like CSS, Sass uses slash-asterisk to denote comments. Slash-asterisk
can span multiple lines. These comments will appear in your compiled CSS */ 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 // Sass also supports single line comments that use double slashes. These
// not be rendered in your compiled CSS // comments will not be rendered in your compiled CSS
/* #################### /* ####################
## VARIABLES ## VARIABLES
@ -52,8 +49,7 @@ h1 {
font-size: $headline-size; font-size: $headline-size;
} }
/* After compiling the Sass files into CSS, you'll have the following code /* Generated CSS result */
in your generated CSS file */
a { a {
color: #0000ff; color: #0000ff;
@ -91,7 +87,7 @@ article {
} }
} }
/* The above will compile into the following CSS */ /* Generated CSS result */
article { article {
font-size: 14px; font-size: 14px;
} }
@ -115,16 +111,16 @@ article img {
} }
/* It is recommended to not nest too deeply as this can cause issues with /* 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 specificity and make your CSS harder to work with and maintain. Best
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 to /* Reference parent selectors are used when you're nesting statements and want
reference the parent selector from within the nested statements. You can reference to reference the parent selector from within the nested statements. You can
a parent using & */ reference a parent using & */
a { a {
text-decoration: none; text-decoration: none;
@ -139,7 +135,7 @@ a {
} }
} }
/* The above Sass will compile into the CSS below */ /* Generated CSS result */
a { a {
text-decoration: none; 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 /* 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 arguments to allow you to make reusable pieces of styling. Mixins very
be very helpful when dealing with vendor prefixes. */ helpful when dealing with vendor prefixes. */
@mixin form-button($color, $size, $border-radius) { @mixin form-button($color, $size, $border-radius) {
color: $color; color: $color;
@ -175,7 +171,7 @@ body.noLinks a {
@include form-button(#0000ff, 16px, 4px); @include form-button(#0000ff, 16px, 4px);
} }
/* The above mixin will compile into the following css */ /* Generated CSS result */
.user-form .submit { .user-form .submit {
color: #0000ff; color: #0000ff;
@ -187,9 +183,11 @@ body.noLinks a {
## FUNCTIONS ## 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 { body {
width: round(10.25px); width: round(10.25px);
} }
@ -198,7 +196,7 @@ body {
background-color: fade_out(#000000, 0.25) background-color: fade_out(#000000, 0.25)
} }
/* The above Sass will compile into the following CSS */ /* Generated CSS result */
body { body {
width: 10px; width: 10px;
@ -208,14 +206,15 @@ body {
background-color: rgba(0, 0, 0, 0.75); background-color: rgba(0, 0, 0, 0.75);
} }
/* You may also define your own functions. Functions are very similar to mixins. When trying /* You may also define your own functions. Functions are very similar to
to choose between a function or a mixin, remember that functions are best for returning mixins. When trying to choose between a function or a mixin, remember
values while mixins are best for generating CSS while functions are better for logic that that functions are best for returning values while mixins are best for
might be used throughout your Sass code. The examples in the Math Operators' section are generating CSS while functions are better for logic that might be used
ideal candidates for becoming a reusable function. */ 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 /* This function will take a target size and the parent size and calculate
the percentage */ and return the percentage */
@function calculate-percentage($target-size, $parent-size) { @function calculate-percentage($target-size, $parent-size) {
@return $target-size / $parent-size * 100%; @return $target-size / $parent-size * 100%;
@ -231,7 +230,7 @@ $main-content: calculate-percentage(600px, 960px);
width: calculate-percentage(300px, 960px); width: calculate-percentage(300px, 960px);
} }
/* The above Sass will compile into the following CSS */ /* Generated CSS result */
.main-content { .main-content {
width: 62.5%; width: 62.5%;
@ -241,9 +240,9 @@ $main-content: calculate-percentage(600px, 960px);
width: 31.25%; width: 31.25%;
} }
/* #################### /* #####################
## EXTEND/INHERITANCE ## EXTEND/INHERITANCE
#################### */ ##################### */
/* Sass allows you to extend an existing CSS statement. This makes it /* Sass allows you to extend an existing CSS statement. This makes it
very easy to write CSS that does not violate DRY principles. Any 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; background-color: #ccc;
} }
/* The above Sass will be compile into the following CSS */ /* Generated CSS result */
.content-window, .content-window,
.message-window, .message-window,
@ -306,10 +305,10 @@ $main-content: calculate-percentage(600px, 960px);
## PLACEHOLDER SELECTORS ## PLACEHOLDER SELECTORS
######################### */ ######################### */
/* Placeholders are useful when creating a CSS statement to extend. If you wanted to create /* Placeholders are useful when creating a CSS statement to extend. If you
a CSS statement that was exclusively used with @extend, you can do so using a placeholder. wanted to create a CSS statement that was exclusively used with @extend,
Placeholders begin with a '%' instead of '.' or '#'. Placeholders will not appear in the you can do so using a placeholder. Placeholders begin with a '%' instead
compiled CSS. */ of '.' or '#'. Placeholders will not appear in the compiled CSS. */
%content-window { %content-window {
font-size: 14px; font-size: 14px;
@ -323,7 +322,7 @@ $main-content: calculate-percentage(600px, 960px);
background-color: #0000ff; background-color: #0000ff;
} }
/* The above Sass would compile to the following CSS */ /* Generated CSS result */
.message-window { .message-window {
font-size: 14px; font-size: 14px;
@ -369,7 +368,7 @@ body {
width: $gutter; width: $gutter;
} }
/* The above Sass would compile to the CSS below */ /* Generated CSS result */
body { body {
width: 100%; width: 100%;
@ -391,9 +390,15 @@ body {
## Usage ## 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 ## 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.