SCSS用法总结

一. 概述:

- 完全兼容 CSS3
- 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
- 通过函数进行颜色值与属性值的运算
- 提供控制指令 (control directives)等高级功能
- 自定义输出格式

二.命令行处理

• 在命令行中运行 Sass：

  sass input.scss output.css

• 监视单个 Sass 文件，每次修改并保存时自动编译：

  sass –watch input.scss:output.css

• 监视整个文件夹：

  sass –watch app/sass:public/stylesheets

三.嵌套规则

• 层级嵌套
  main {
  width: 97%;

  p, div {
  font-size: 2em;
  a { font-weight: bold; }
  }

  pre { font-size: 3em; }
  }

• 父选择器 &
  a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
  }

  main {
  color: black;
  &-sidebar { border: 1px solid; }
  }

• 属性嵌套
  .funky {
  font: 20px/24px {
  family: fantasy;
  weight: bold;
  }
  }

四 插值语句 #{}

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

.foo.bar .baz.bang, .bip.qux {
  $selector: &;
}

五.@import

@import “foo.css”;
@import “foo” screen;
@import “http://foo.com/bar“;
@import url(foo);

六.media

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

编译为

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

七.@extend

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

八@at-root

.parent {
  ...
  @at-root {
    .child1 { ... }
    .child2 { ... }
  }
  .step-child { ... }
}

Which would output the following:

.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }

九.指令

1.@if
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}

2.@for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

3.@each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

复杂的: 
@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

4.@while

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

5.@mixin

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
---------------------------------------------------------------------
@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

-----------------------------------------------------------------------
向混合样式中导入内容
@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

编译为

* html #logo {
  background-image: url(/logo.gif);
}

6.函数指令

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

10.变量相关

$width: 5em;

1. 数据类型

   数字，1, 2, 13, 10px
   字符串，有引号字符串与无引号字符串，”foo”, ‘bar’, baz
   颜色，blue, #04a3f9, rgba(255,0,0,0.5)
   布尔型，true, false
   空值，null
   数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
   maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

2. 运算

   符号: + - * / % == != > >= < <=

3. 颜色值运算
   p {
   color: #010203 + #040506;
   }

   计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为

   p {
   color: #050709;
   }

   11. 函数

   1.RGB Functions

   rgb( red, r e d , green, $blue) : Creates a Color from red, green, and blue

   values.

   rgba( red, r e d , green, blue, b l u e , alpha) : Creates a Color from red,
   green, blue, and

   alpha values.

   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( color1, c o l o r 1 , color2, [$weight]) : Mixes two colors together.

---

2 HSL Functions

hsl($hue, $saturation, $lightness) : Creates a Color from hue,
saturation, and

lightness values.

hsla($hue, $saturation, $lightness, $alpha) : Creates a Color from
hue, saturation,

lightness, and alpha values.

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, [$weight]) : Returns the inverse of a color.

---

3 Opacity Functions
alpha( color)/opacity( c o l o r ) / o p a c i t y ( color) : Gets the alpha component (opacity) of a color.

rgba( color, c o l o r , alpha) : Changes the alpha component for a color.

opacify( color, c o l o r , amount) / fade-in( color, c o l o r , amount) : Makes a color more opaque.

transparentize( color, c o l o r , amount) / fade-out( color, c o l o r , amount) : Makes a color more transparent.

---

4 Other Color Functions
adjust-color( color,[ c o l o r , [ red], [ green],[ g r e e n ] , [ blue], [ hue],[ h u e ] , [ saturation], [ lightness],[ l i g h t n e s s ] , [ alpha]) : Increases or decreases one or more components of a color.

scale-color( color,[ c o l o r , [ red], [ green],[ g r e e n ] , [ blue], [ saturation],[ s a t u r a t i o n ] , [ lightness], [$alpha]) : Fluidly scales one or more properties of a color.

change-color( color,[ c o l o r , [ red], [ green],[ g r e e n ] , [ blue], [ hue],[ h u e ] , [ saturation], [ lightness],[ l i g h t n e s s ] , [ alpha]) : Changes one or more properties of a color.

ie-hex-str($color) : Converts a color into the format understood by IE filters.

---

5 String Functions
unquote($string) : Removes quotes from a string.

quote($string) : Adds quotes to a string.

str-length($string) : Returns the number of characters in a string.

str-insert( string, s t r i n g , insert, $index) : Inserts $insert into $string at $index.

str-index( string, s t r i n g , substring) : Returns the index of the first occurrence of $substring in $string.

str-slice( string, s t r i n g , start-at, [$end-at]) : Extracts a substring from $string.

to-upper-case($string) : Converts a string to upper case.

to-lower-case($string) : Converts a string to lower case.

---

6 Number Functions
percentage($number) : Converts a unitless number to a percentage.

round($number) : Rounds a number to the nearest whole number.

ceil($number) : Rounds a number up to the next whole number.

floor($number) : Rounds a number down to the previous whole number.

abs($number) : Returns the absolute value of a number.

min($numbers…) : Finds the minimum of several numbers.

max($numbers…) : Finds the maximum of several numbers.

random() : Returns a random number.

---

7 List Functions
length($list) : Returns the length of a list.

nth( list, l i s t , n) : Returns a specific item in a list.

set-nth( list, l i s t , n, $value) : Replaces the nth item in a list.

join( list1, l i s t 1 , list2, [ separator, s e p a r a t o r , bracketed]) : Joins together two lists into one.

append( list1, l i s t 1 , val, [$separator]) : Appends a single value onto the end of a list.

zip($lists…) : Combines several lists into a single multidimensional list.

index( list, l i s t , value) : Returns the position of a value within a list.

list-separator($list) : Returns the separator of a list.

is-bracketed($list) : Returns whether a list has square brackets.

---

8 Map Functions
map-get( map, m a p , key) : Returns the value in a map associated with a given key.

map-merge( map1, m a p 1 , map2) : Merges two maps together into a new map.

map-remove( map, m a p , keys…) : Returns a new map with keys removed.

map-keys($map) : Returns a list of all keys in a map.

map-values($map) : Returns a list of all values in a map.

map-has-key( map, m a p , key) : Returns whether a map has a value associated with a given key.

keywords($args) : Returns the keywords passed to a function that takes variable arguments.

---

9 Selector Functions
selector-nest($selectors…) : Nests selector beneath one another like they would be nested in the

stylesheet.

selector-append($selectors…) : Appends selectors to one another without spaces in between.

selector-extend( selector, s e l e c t o r , extendee, $extender) : Extends $extendee with $extender within $selector.

selector-replace( selector, s e l e c t o r , original, $replacement) : Replaces $original with $replacement within $selector.

selector-unify( selector1, s e l e c t o r 1 , selector2) : Unifies two selectors to produce a selector that matches

elements matched by both.

is-superselector( super, s u p e r , sub) : Returns whether $super matches all the elements $sub does, and

possibly more.

simple-selectors($selector) : Returns the simple selectors that comprise a compound selector.

selector-parse($selector) : Parses a selector into the format returned by &.

---

10 Introspection Functions

feature-exists($feature) : Returns whether a feature exists in the current Sass runtime.

variable-exists($name) : Returns whether a variable with the given name exists in the current scope.

global-variable-exists($name) : Returns whether a variable with the given name exists in the global scope.

function-exists($name) : Returns whether a function with the given name exists.

mixin-exists($name) : Returns whether a mixin with the given name exists.

content-exists() : Returns whether the current mixin was passed a content block.

inspect($value) : Returns the string representation of a value as it would be represented in Sass.

type-of($value) : Returns the type of a value.

unit($number) : Returns the unit(s) associated with a number.

unitless($number) : Returns whether a number has units.

comparable( number1, n u m b e r 1 , number2) : Returns whether two numbers can be added, subtracted, or compared.

call( function, f u n c t i o n , args…) : Dynamically calls a Sass function reference returned by get-function.

get-function( name, n a m e , css: false) : Looks up a function with the given name in the current lexical scope

and returns a reference to it.

---