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, 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)
运算
符号: + - * / % == != > >= < <=
颜色值运算
p {
color: #010203 + #040506;
}
计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为
p {
color: #050709;
}
11. 函数
1.RGB Functions
rgb( $red,$ green, $blue) : Creates a Color from red, green, and blue
values.
rgba( $red,$ green, $blue,$ 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,$ 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($ color) : Gets the alpha component (opacity) of a color.

rgba( $color,$ alpha) : Changes the alpha component for a color.

opacify( $color,$ amount) / fade-in( $color,$ amount) : Makes a color more opaque.

transparentize( $color,$ amount) / fade-out( $color,$ amount) : Makes a color more transparent.

4 Other Color Functions
adjust-color( $color, [$ red], [ $green], [$ blue], [ $hue], [$ saturation], [ $lightness], [$ alpha]) : Increases or decreases one or more components of a color.

scale-color( $color, [$ red], [ $green], [$ blue], [ $saturation], [$ lightness], [$alpha]) : Fluidly scales one or more properties 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.

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,$ insert, $index) : Inserts $insert into $string at $index.

str-index( $string,$ substring) : Returns the index of the first occurrence of $substring in $string.

str-slice( $string,$ 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,$ n) : Returns a specific item in a list.

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

join( $list1,$ list2, [ $separator,$ bracketed]) : Joins together two lists into one.

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

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

index( $list,$ 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,$ key) : Returns the value in a map associated with a given key.

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

map-remove( $map,$ 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,$ 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,$ extendee, $extender) : Extends $extendee with $extender within $selector.

selector-replace( $selector,$ original, $replacement) : Replaces $original with $replacement within $selector.

selector-unify( $selector1,$ selector2) : Unifies two selectors to produce a selector that matches

elements matched by both.

is-superselector( $super,$ 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,$ number2) : Returns whether two numbers can be added, subtracted, or compared.

call( $function,$ args…) : Dynamically calls a Sass function reference returned by get-function.

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

and returns a reference to it.

原文链接：https://blog.csdn.net/LXIBEI/article/details/82559411