From 62c6f95e9d161967cfffa43a3f9b3f8d73e2ef5f Mon Sep 17 00:00:00 2001
From: Sean Corrales <scorrales@usft.com>
Date: Mon, 5 Oct 2015 10:51:27 -0500
Subject: Initial work on learn Sass file.
---
sass.html.markdown | 234 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 234 insertions(+)
create mode 100644 sass.html.markdown
(limited to 'sass.html.markdown')
diff --git a/sass.html.markdown b/sass.html.markdown
new file mode 100644
index 00000000..35af1e67
--- /dev/null
+++ b/sass.html.markdown
@@ -0,0 +1,234 @@
+---
+language: sass
+contributors:
+ - ["Sean Corrales", "https://github.com/droidenator"]
+filename: learnsass.scss
+---
+
+Sass is a CSS pre-processor. It adds several features that plain
+CSS lacks such as variables, mixins, basic math, and inheritance.
+
+Initially, Sass was written using spacing and indention instead
+of brackets and semi-colons; these files use the extension '.sass'.
+Sass was later revised to use brackets and semi-colons and become
+a superset of CSS3. This new version uses the extension ".scss".
+Using ".scss" means that any valid CSS3 file can be converted to
+Sass by simply changing the file extension to '.scss'.
+
+If you're already familiar with CSS3, you'll be able to pick up Sass
+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 */
+
+/* ####################
+ ## VARIABLES
+ #################### */
+
+/* Sass allows you to define variables that can be used throughout
+ your stylesheets. Variables are defined by placing a '$' in front
+ of a string. Many users like to keep their variables in a single file */
+$primary-color: #0000ff;
+$headline-size: 24px;
+
+/* Variables can be used in any CSS declaration. This allows you to change
+ a single value in one place. */
+a {
+ color: $primary-color;
+}
+
+h1 {
+ color: $primary-color;
+ font-size: $headline-size;
+}
+
+/* After compiling the Sass files into CSS, you'll have the following code
+ in your generated CSS file */
+
+a {
+ color: #0000ff;
+}
+
+h1 {
+ color: #0000ff;
+ font-size: 24px;
+}
+
+/* ####################
+ ## NESTING
+ #################### */
+
+/* Nesting allows you to easily group together statements and nest them
+ in a way that indicates their hierarchy */
+article {
+ font-size: 14px;
+
+ a {
+ text-decoration: underline;
+ }
+
+ ul {
+ list-style-type: disc;
+
+ li {
+ text-indent: 3em;
+ }
+ }
+
+ pre, img {
+ display: inline-block;
+ float: left;
+ }
+}
+
+/* The above will compile into the following CSS */
+article {
+ font-size: 14px;
+}
+
+article a {
+ text-decoration: underline;
+}
+
+article ul {
+ list-style-type: disc;
+}
+
+article ul li {
+ text-indent: 3em;
+}
+
+article pre,
+article img {
+ display: inline-block;
+ float: left;
+}
+
+/* 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. */
+
+/* ####################
+ ## 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. */
+@mixin form-button($color, $size, $border-radius) {
+ color: $color;
+ font-size: $size;
+ border-radius: $border-radius;
+}
+
+/* Mixins are invoked within a CSS declaration. */
+.user-form .submit {
+ @include form-button(#0000ff, 16px, 4px);
+ margin: 10px;
+}
+
+/* The above mixin will compile into the following css */
+.user-form .submit {
+ color: #0000ff;
+ font-size: 16px;
+ border-radius: 4px;
+ margin: 10px;
+}
+
+/* ####################
+ ## EXTEND/INHERITANCE
+ #################### */
+
+/* ####################
+ ## MATH OPERATIONS
+ #################### */
+
+```
+
+## Usage
+
+Save any CSS you want in a file with extension `.css`.
+
+```xml
+<!-- you need to include the css file in your page's <head>: -->
+<link rel='stylesheet' type='text/css' href='path/to/style.css' />
+
+<!-- you can also include some CSS inline in your markup. However it is highly
+recommended to avoid this. -->
+<style>
+ a { color: purple; }
+</style>
+
+<!-- or directly set CSS properties on the element.
+This has to be avoided as much as you can. -->
+<div style="border: 1px solid red;">
+</div>
+
+```
+
+## Precedence
+
+As you noticed an element may be targetted by more than one selector.
+and may have a property set on it in more than one.
+In these cases, one of the rules takes precedence over others.
+
+Given the following CSS:
+
+```css
+/*A*/
+p.class1[attr='value']
+
+/*B*/
+p.class1 {}
+
+/*C*/
+p.class2 {}
+
+/*D*/
+p {}
+
+/*E*/
+p { property: value !important; }
+
+```
+
+and the following markup:
+
+```xml
+<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
+</p>
+```
+
+The precedence of style is as followed:
+Remember, the precedence is for each **property**, not for the entire block.
+
+* `E` has the highest precedence because of the keyword `!important`.
+ It is recommended to avoid this unless it is strictly necessary to use.
+* `F` is next, because it is inline style.
+* `A` is next, because it is more "specific" than anything else.
+ more specific = more specifiers. here 3 specifiers: 1 tagname `p` +
+ class name `class1` + 1 attribute `attr='value'`
+* `C` is next. although it has the same specificness as `B`
+ but it appears last.
+* Then is `B`
+* and lastly is `D`.
+
+## Compatibility
+
+Most of the features in CSS2 (and gradually in CSS3) are compatible across
+all browsers and devices. But it's always vital to have in mind the compatibility
+of what you use in CSS with your target browsers.
+
+[QuirksMode CSS](http://www.quirksmode.org/css/) is one of the best sources for this.
+
+To run a quick compatibility check, [CanIUse](http://caniuse.com) is a great resource.
+
+## Further Reading
+
+* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/)
+* [QuirksMode CSS](http://www.quirksmode.org/css/)
+* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)
--
cgit v1.2.3