SASS Sass / SCSS文档参考
######################################################
## Sass and SCSS Summarized Documentation Reference ##
######################################################
Contents:
Command Line Tools________________________Line 29
Operators_________________________________Line 39
Data Types________________________________Line 53
Interpolation_____________________________Line 62
Comments__________________________________Line 71
Flags_____________________________________Line 76
@RULES
@import______________________________Line 84
@extend______________________________Line 105
@debug_______________________________Line 129
@warn________________________________Line 137
@if__________________________________Line 144
@else________________________________Line 152
@for_________________________________Line 167
@each________________________________Line 176
@while_______________________________Line 185
@mixin_______________________________Line 193
@inlcude_____________________________Line 221
@function____________________________Line 226
######################################################
# Summary based on Official Sass/SCSS Documentation #
######################################################
// COMMAND LINE TOOLS //
// NOTE: On .scss and .sass files, order can be reversed for compiling, converting and monitoring
gem install sass // Install Sass
sass input.scss output.css // Run Sass Compiler On File
sass-convert style.scss style.sass // Convert SCSS File
sass --watch input.scss:output.css // Monitor/Update File
sass --watch app/sass:public/stylesheets // Monitor/Update Directory
sass --help // Help Docs
// OPERATORS //
== // Equal to
!= // Not equal to
+ // Addition / String concatenation
- // Subtraction
* // Multiplication
/ // Division - SEE NOTE BELOW OPERATORS
% // Modulo - Returns remainder after division of 2 numbers: 3 % 2 = 1
< // Less than
<= // Less than or equal to
> // Great than
>= // Greater than or equal to
// DATA TYPES //
Numbers // Any positive or negative integer
String // With or without quotes
Color // CSS color name, hex or rgba
Booleans // true/false/and/or/not
Null // null or empty value
List // Values seperated by , or space
// INTERPOLATION //
// Syntax: #{} - Used to reference variables within selectors and property names
//example:
$name: foo;
$attr: border;
p.#{$name} {
#{attr}-color: blue; }
// COMMENTS //
// Single line, does not compile to css
/* */ Multiple line, compiles to css
// !FLAGS //
!default // Set variable's value as default if not previously defined
!optional // Allow @extend to be empty without outputting error
!important // Style always applied regardless of location within document
// @ RULES //
// @IMPORT //
@import //Merge and compile .scss or .sass into current file
//example:
@import “header.scssâ€; OR “header.sassâ€
@import (multi) // @import can be used once with multiple files
//example:
@import “nav.scss, header.scss, footer.scssâ€;
@import (partial) // Sass can be prevented from compiling a .scss or .sass file.
1. Append underscore to beginning of .scss or .sass filename
2. Reference filename without underscore in @import statement
@import (override conditions) // @import can be overrided by the CSS @import rule
.css filename
Begins with http://
If filename is url()
If import contains media queries
// @EXTEND //
@extend // Tell one selector to inherit the styles of another selector.
//Multiple @extend calls can be made within a statement.
//example:
.error {
border: 1px #f00; }
.seriousError {
@extend .error; }
@extend (complex selector) // @extend can be used with complex selectors
//example:
.hoverlink {
@extend a:hover; }
@extend (%selector) // Selectors with the placeholder prefix (%) are not rendered until called upon by @extend
//example:
%selector {
color: blue; }
.newSelector {
@extend %selector; }
// @DEBUG //
@debug // Prints the value of the SassScript expression
//example:
@debug 5px + 3px;
//output:
Line1 DEBUG: 8px;
// @WARN //
@warn // Prints the value of expression to error output stream.
//example:
@warn “This is a console error message!â€
// ADVANCED CONTROL DIRECTIVES //
@if // The @if directive takes a SassScript expression and uses the styles nested beneath it if the expression returns anything other than false or null
example:
p {
@if 1 + 1 == 2 { color: blue;}
@if 5 < 3 { color: red;}
@if null { color: yellow;}
}
@else / @else if // @else if is used within an @if statement to call another @if function
// @else is used at the end of an @if statement to end the evaluation
//example:
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else $type == monster {
color: green;
}
}
@for (form 1) // Iterate through range including <end> value
//example:
@for $var from <start> through <end>
@for (form 2) // Iterate through range up to <end> value
//example:
@for $var from <start> to <end>
@each // The each rule sets each $var to each item in the list, then outputs the styles it contains using that value of $var.
//example:
@each $color in blue, red, yellow {
.#{$color}-icon {
background-image: url('/images#{$color}.png');
}
}
@while // Takes a SassScript expression and repeatedly outputs styles until expression evaluates to false
//example:
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i – 2; }
// @MIXINS //
@mixin // Allows the defining of styles that can be reused throughout the stylesheet in addition to taking arguments
//example:
@mixin large-text {
font: {
family: arial;
size: 20px;
weight: bold;
}
color: #ff0000; }
@mixin (arguments) // User specified arguments can be passed to a mixin. Mixin can also accept a variable number of arguments
//example:
@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width; }
@mixin (default arguments) // Arguments can be assigned defaults when no values are passed
//example:
@mixin sexy-border($color: blue, $width: 1px) {
border: {
color: $color;
width: $width; }
@include // Use to include @mixin with a document
//example:
.page-title { @include large-text; }
@function / @return // Custom functions can be created and used throughout the document
// @return outputs the current value of the function
//example:
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n – 1) * $gutter-width; }
#sidebar { width: grid-width(5); }SASS Sass / SCSS函数参考
######################################################
## Sass and SCSS Function Reference ##
######################################################
Contents:
RGB Functions__________________________________Line 19
HSL Functions__________________________________Line 29
Opacity Functions______________________________Line 45
Other Color Functions__________________________Line 52
String Functions_______________________________Line 63
Number Functions_______________________________Line 68
List Functions_________________________________Line 78
Introspective Functions________________________Line 85
Misc Functions_________________________________Line 92
######################################################
# Summary based on Official Sass/SCSS Documentation #
######################################################
// RGB FUNCTIONS //
rgb($red, $green, $blue) // Converts an rgb(red, green, blue) triplet into a color.
rgba($red, $green, $blue, $alpha) // Converts an rgba(red, green, blue, alpha) quadruplet into a color.
rgba($color, $alpha) // Adds an alpha layer to any color value.
red($color) // Gets the red component of a color.
green($color) // Gets the green component of a color.
blue($color) // Gets the blue component of a color.
mix($color-1, $color-2, [$weight]) // Mixes two colors together.
// HSL FUNCTIONS //
hsl($hue, $saturation, $lightness) // Converts an hsl(hue, saturation, lightness) triplet into a color.
hsla($hue, $saturation, $lightness, $alpha) // Converts an hsla(hue, saturation, lightness, alpha) quadruplet into a color.
hue($color) // Gets the hue component of a color.
saturation($color) // Gets the saturation component of a color.
lightness($color) // Gets the lightness component of a color.
adjust-hue($color, $degrees) // Changes the hue of a color.
lighten($color, $amount) // Makes a color lighter.
darken($color, $amount) // Makes a color darker.
saturate($color, $amount) // Makes a color more saturated.
desaturate($color, $amount) // Makes a color less saturated.
grayscale($color) // Converts a color to grayscale.
complement($color) // Returns the complement of a color.
invert($color) // Returns the inverse of a color.
// OPACITY FUNCTIONS //
alpha($color) / opacity($color) // Gets the alpha component (opacity) of a color.
rgba($color, $alpha) // Add or change an alpha layer for any color value.
opacify($color, $amount) / fade-in($color, $amount) // Makes a color more opaque.
transparentize($color, $amount) / fade-out($color, $amount) // Makes a color more transparent.
// OTHER COLOR FUNCTIONS //
adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
// Increase or decrease any of the components of a color.
scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])
// Fluidly scale one or more components of a color.
change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
// Changes one or more properties of a color.
ie-hex-str($color)
// Converts a color into the format understood by IE filters.
// STRING FUNCTIONS //
unquote($string) // Removes the quotes from a string.
quote($string) // Adds quotes to a string.
// NUMBER FUNCTIONS //
percentage($value) // Converts a unitless number to a percentage.
round($value) // Rounds a number to the nearest whole number.
ceil($value) // Rounds a number up to the nearest whole number.
floor($value) // Rounds a number down to the nearest whole number.
abs($value) // Returns the absolute value of a number.
min($x1, $x2, �) // Finds the minimum of several values.
max($x1, $x2, �) // Finds the maximum of several values.
// LIST FUNCTIONS //
length($list) // Returns the length of a list.
nth($list, $n) // Returns a specific item in a list.
join($list1, $list2, [$separator]) // Joins together two lists into one.
append($list1, $val, [$separator]) // Appends a single value onto the end of a list.
// INTROSPECTIVE FUNCTIONS //
type-of($value) // Returns the type of a value.
unit($number) // Returns the units associated with a number.
unitless($number) // Returns whether a number has units or not.
comparable($number-1, $number-2) // Returns whether two numbers can be added or compared.
// MISC FUNCTIONS //
if($condition, $if-true, $if-false) // Returns one of two values, depending on whether or not a condition is true.SASS 指南针Mixins
@mixin placeholder($color){
&::-webkit-input-placeholder {
color: $color;
}
&:-moz-placeholder { /* Firefox 18- */
color: $color;
}
&::-moz-placeholder { /* Firefox 19+ */
color: $color;
}
&:-ms-input-placeholder {
color: $color;
}
}
input{
background-color: $cyan;
color:white;
@include placeholder(white);
}SASS SASS网格系统
// Custom Grid System
$grid_width : 960px;
$grid_col : 12;
$grid_gut : 20px;
body { min-width: $grid_width; }
.container_#{$grid_col} { margin-left: auto; margin-right: auto; width: $grid_width;
@for $i from 1 through $grid_col {
.grid_#{$i} { display: inline; float: left; margin-left: $grid_gut / 2; margin-right: $grid_gut / 2; }
.push_#{$i}, .pull_#{$i} { position: relative; }
.grid_#{$i} { width: ( ($grid_width / $grid_col - $grid_gut) * $i ) + (($i - 1) * $grid_gut); }
.prefix_#{$i} { padding-left: $grid_width / $grid_col * $i ; }
.suffix_#{$i} { padding-right: $grid_width / $grid_col * $i ; }
.push_#{$i} { left: $grid_width / $grid_col * $i ; }
.pull_#{$i} { right: $grid_width / $grid_col * $i ; }
}
.alpha { margin-left: 0; } // no left margin
.omega { margin-right: 0; } // no right margin
}SASS CSS3 mixins
/*****
SCSS CSS 3 Property Maxin v 0.1
by Dele O
*******/
@mixin rounded($radius: 10px) {
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
@mixin roundedSides($topLeft, $topRight, $bottomRight, $bottomLeft) {
-moz-border-radius-topleft: $topLeft;
-moz-border-radius-topright: $topRight;
-moz-border-radius-bottomright: $bottomRight;
-moz-border-radius-bottomleft: $bottomLeft;
border-top-left-radius:$topLeft;
border-top-right-radius: $topRight;
border-bottom-right-radius: $bottomRight;
border-bottom-left-radius: $bottomLeft;
}
@mixin shadow( $off-y, $off-x, $blur, $color){
-moz-box-shadow: $off-y $off-x $blur $color; /* FF3.5+ */
-webkit-box-shadow: $off-y $off-x $blur $color; /* Saf3.0+, Chrome */
box-shadow: $off-y $off-x $blur $color; /* Opera 10.5, IE9 */
}
@mixin gradient($baseColor, $toColor){
background-color:$baseColor;
background-image: -moz-linear-gradient(top, $baseColor, $toColor); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, $baseColor),color-stop(1, $toColor)); /* Saf4+, Chrome */
background-image: linear-gradient(top,$baseColor, $toColor);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='$baseColor', EndColorStr='$toColor'); /* IE6�IE9 */
}
@mixin trasition($property, $duration:0.3s, $function: ease-out){
-moz-transition: $property $durations $function; /* FF3.7+ */
-o-transition: $property $durations $function; /* Opera 10.5 */
-webkit-transition: $property $durations $function; /* Saf3.2+, Chrome */
transition: $property $durations $function;
}
@mixin transform($scale, $rotate, $trans-x, $trans-y, $skew-x, $skew-y){
-moz-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
-webkit-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
-o-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
-ms-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
}