一、 变量
$btn-bg : darken(#fff, 6.5%) !default;
$btn-bg : darken(#000, 6.5%); //重写就会覆盖，无论顺序是什么样的
$btn-border : darken($btn-bg, 5%) !default;
.btn-primary{
$btn-bg : darken(#00f, 6.5%); //定义局部变量
background-color: $btn-bg; //调用局部变量
border: 1px solid $btn-border;
}二、 嵌套
1. 选择器嵌套
nav {
a {
color: red;
header & {
color: green;
}
}
}编译结果：
nav a {
color: red;
}
header nav a {
color: green;
}2. 属性嵌套
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}编译结果：
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}3. 伪类嵌套
.clearfix {
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
overflow: hidden;
}
}编译结果：
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}三、 混合宏
1. 混合宏不带值的参数
(1) 声明
@mixin border-radius($radius){
-webkit-border-radius: $radius;
border-radius: $radius;
}(2) 调用
.box {
@include border-radius(3px);
}(3) 编译
.box {
-webkit-border-radius: 3px;
border-radius: 3px;
}2. 混合宏带值的参数
(1) 声明
@mixin border-radius($radius:3px){
-webkit-border-radius: $radius;
border-radius: $radius;
}.btn {
@include border-radius;
}或者重写
.box {
@include border-radius(50%);
}.btn {
-webkit-border-radius: 3px;
border-radius: 3px;
}或
.box {
-webkit-border-radius: 50%;
border-radius: 50%;
}3. 传多个参数
(1) 声明
@mixin center($width,$height){
width: $width;
height: $height;
position: absolute;
top: 50%;
left: 50%;
margin-top: -($height) / 2;
margin-left: -($width) / 2;
}(2) 调用
.box-center {
@include center(500px,300px);
}(3) 编译
.box-center {
width: 500px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -250px;
}4. 参数“...”
当混合宏传的参数过多之时，可以使用参数来替代
(1) 声明
@mixin box-shadow($shadows...){
@if length($shadows) >= 1 {
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
} @else {
$shadows: 0 0 2px rgba(#000,.25);
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
}(2) 调用
.box {
@include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}(3) 编译
@mixin box-shadow($shadows...){
@if length($shadows) >= 1 {
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
} @else {
$shadows: 0 0 2px rgba(#000,.25);
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
}四、 扩展/继承
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}
.btn-second {
background-color: orange;
color: #fff;
@extend .btn;
}编译结果：
.btn, .btn-primary, .btn-second {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
}
.btn-second {
background-clor: orange;
color: #fff;
}五、 占位符 %placeholder
%placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。所以它可以取代以前 CSS 中的基类造成的代码冗余的情形。
%mt {
margin-top: 5px;
}
%pt{
padding-top: 5px;
}
.btn {
@extend %mt;
}编译结果：
.btn {
margin-top: 5px;
}混合宏、继承、占位符比较
|
混合宏 |
继承 |
占位符 |
声明方式 |
@mixin |
.class |
%placeholder |
调用方式 |
@include |
@extend |
@extend |
使用环境 |
代码块中涉及到变量 |
代码块不需要专任何变量参数，而且有一个基类已在文件中存在 |
和继承基本类似 |
不足 |
多次出现调用的混合宏对应的代码块，代码冗余 |
如果基类并不存在于HTML结构时，无论调用与否，在编译出来的CSS中都将产生基类对应的样式代码 |
六、 插值#{}
可以在@extend 中使用，不能在@mixin使用
$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {
#{$prop}-#{$side}: $value;
}
}
.login-box {
@include set-value(top, 14px);
}
.login-box {
margin-top: 14px;
padding-top: 14px;
}七、 注释
/* 注释 */ |
在编译出来的 CSS 显示 |
// 注释 |
在编译出来的 CSS 中不会显示 |
八、 运算
p {
font: 10px/8px; // 纯 CSS，不是除法运算
$width: 1000px;
width: $width/2; // 使用了变量，是除法运算
width: round(1.5)/2; // 使用了函数，是除法运算
height: (500px/2); // 使用了圆括号，是除法运算
margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}编译结果：
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px;
}对于携带不同类型的单位时，在 Sass 中计算会报错，如下例所示：
.box {
width: 20px - 1em;
}编译的时候，编译器会报错：“Incompatible units: 'em' and ‘px'.”
九、 @for循环
@for $i from <start> through <end> |
through 表示包括 end 这个数 |
@for $i from <start> to <end> |
to 不包括 end 这个数 |
实例：
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;
%grid {
float: left;
margin-left: $grid-gutter / 2;
margin-right: $grid-gutter / 2;
}@for $i from <start> through <end>
@for $i from 1 through 12 {
.#{$grid-prefix}#{$i}{
width: $grid-width * $i + $grid-gutter * ($i - 1);
@extend %grid;
}
}@for $i from <start> to <end>
@for $i from 1 to 13 {
.#{$grid-prefix}#{$i}{
width: $grid-width * $i + $grid-gutter * ($i - 1);
@extend %grid;
}
}十、 @while循环
$types: 4;
$type-width: 20px;
@while $types > 0 {
.while-#{$types} {
width: $type-width + $types;
}
$types: $types - 1;
}编译结果：
.while-4 {
width: 24px;
}
.while-3 {
width: 23px;
}
.while-2 {
width: 22px;
}
.while-1 {
width: 21px;
}十一、 @each循环
$list: adam john wynn mason kuroir; //$list 就是一个列表
@mixin author-images {
@each $author in $list {
.photo-#{$author} {
background: url("/images/avatars/#{$author}.png") no-repeat;
}
}
}
.author-bio {
@include author-images;
}编译结果：
.author-bio .photo-adam {
background: url("/images/avatars/adam.png") no-repeat;
}
.author-bio .photo-john {
background: url("/images/avatars/john.png") no-repeat;
}
.author-bio .photo-wynn {
background: url("/images/avatars/wynn.png") no-repeat;
}
.author-bio .photo-mason {
background: url("/images/avatars/mason.png") no-repeat;
}
.author-bio .photo-kuroir {
background: url("/images/avatars/kuroir.png") no-repeat;
}
十二、 字符串函数
1. unquote()函数
scss |
css |
unquote('Hello Sass!') |
Hello Sass! |
unquote("'Hello Sass!") |
'Hello Sass! |
unquote("I'm Web Designer") |
I'm Web Designer |
unquote("'Hello Sass!'") |
'Hello Sass!' |
unquote('"Hello Sass!"') |
"Hello Sass!" |
unquote(Hello Sass) |
Hello Sass |
2. quote() 函数
quote() 函数刚好与 unquote() 函数功能相反，主要用来给字符串添加引号。如果字符串，自身带有引号会统一换成双引号 ""。
3. 其他函数
函数 |
作用 |
scss |
css |
To-upper-case() |
将字符串转换成大写字母 |
to-upper-case(aA-a) |
AA-A |
To-lower-case() |
将字符串转换成小写字母 |
to-lower-case(aA-a) |
aa-a |
percentage($value) |
将一个不带单位的数转换成百分数 |
percentage(2px / 10px) |
20% |
round($value) |
将数值四舍五入，转换成一个最接近的整数 |
round(12.3px) |
12px; |
ceil($value) |
将大于自己的小数转换成下一位整数 |
ceil(2.3%) |
3% |
floor($value) |
将一个数去除他的小数部分 |
floor(10.8em) |
10em |
abs($value) |
返回一个数的绝对值 |
abs(-.5%) |
0.5% |
min($numbers…) |
找出几个数值之间的最小值 |
min(1,2,1%,3,300%) |
1% |
max($numbers…) |
找出几个数值之间的最大值 |
max(1px,5px) |
5px |
random() |
获取随机数 |
random() |
随机数 |
length($list) |
返回一个列表的长度值 |
length(10px 20px (border 1px solid) 2em) |
4 |
nth($list, $n) |
返回一个列表中指定的某个标签值 |
nth((1px solid red) border-top green,1)
|
(1px "solid" #ff0000) |
join($list1, $list2, [$separator]) |
将两个列表连接合并成一个列表 |
join((blue,red),(#abc,#def),comma)
|
(#0000ff, #ff0000, #aabbcc, #ddeeff) |
append($list1, $val, [$separator]) |
将某个值放在列表的最后 |
append((blue green),red,space) |
(#0000ff #008000 #ff0000) |
zip($lists…) |
将几个列表结合成一个多维的列表 |
zip(1px 2px 3px,solid dashed dotted,green blue red) |
((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000)) |
index($list, $value) |
返回一个值在列表中的位置值，第一个值就是1，不在列表中返回false， |
index(1px solid red, red) |
3
|
type-of($value) |
返回一个值的类型 |
type-of(1 / 2 = 1) |
"string" |
unit($number) |
返回一个值的单位（只充许乘、除运算） |
unit(10px * 3em)
|
"em*px" |
|
（加、减碰到不同单位时，unit() 函数将会报错，除 px 与 cm、mm 运算之外） |
unit(1px - 1cm) |
"px" |
unitless($number) |
判断一个值是否带有单位，不带单位返回的值为 true，带单位返回的值为 false |
unitless(1 /2 + 2 )
|
true |
comparable($number-1, $number-2) |
判断两个值是否可以做加、减和合并 |
comparable(2rem,1em)
|
false |
if($condition,$if-true,$if-false) |
当条件成立返回一种值，当条件不成立时返回另一种值 |
if(true,1px,2px)
|
1px |
十三、 Map
1. map示例
$map: (
$key1: value1,
$key2: value2,
$key3: value3
)示例：
换皮肤的项目，可能每一套皮肤对应的颜色蛮多的，那么使用此功能来管理颜色的变量就非常的有条理性，便于维护与管理。
$theme-color: (
default: (
bgcolor: #fff,
text-color: #444,
link-color: #39f
),
primary:(
bgcolor: #000,
text-color:#fff,
link-color: #93f
),
negative: (
bgcolor: #f36,
text-color: #fefefe,
link-color: #d4e
)
);2. map-get($map,$key)
map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值。
map-get($map,$key) 函数的作用是根据 $key 参数，返回 $key 在 $map 中对应的 value 值。如果 $key 不存在 $map中，将返回 null 值。此函数包括两个参数：
$map：定义好的 map。
$key：需要遍历的 key。
示例：
$social-colors: (
dribble: #ea4c89,
facebook: #3b5998,
github: #171515,
google: #db4437,
twitter: #55acee
);
.btn-dribble{
color: map-get($social-colors,facebook);
}编译结果：
.btn-dribble {
color: #3b5998;
}3. map-merge($map1,$map2)
map-merge($map1,$map2) 函数是将 $map1 和 $map2 合并，然后得到一个新的 $map。
$color: (
text: #f36,
link: #f63,
border: #ddd,
backround: #fff
);
$typo:(
font-size: 12px,
line-height: 1.6
);
$newmap: map-merge($color,$typo);编译结果：
$newmap:(
text: #f36,
link: #f63,
border: #ddd,
background: #fff,
font-size: 12px,
line-height: 1.6
);注意，如果 $map1 和 $map2 中有相同的 $key 名，那么将 $map2 中的 $key 会取代 $map1 中的：
$color: (
text: #f36,
link: #f63,
border: #ddd,
backround: #fff
);
$typo:(
font-size: 12px,
line-height: 1.6,
border: #ccc,
background: #000
);
$newmap: map-merge($color,$typo);编译结果：
$newmap:(
text: #f36,
link: #f63,
font-size: 12px,
line-height: 1.6,
border: #ccc,
background: #000
);4. keywords($args)
动态创建 map 的函数。可以通过混合宏或函数的参数变创建 map
@mixin map($args...){
@debug keywords($args);
}
@include map(
$dribble: #ea4c89,
$facebook: #3b5998,
$github: #171515,
$google: #db4437,
$twitter: #55acee
);在命令终端可以看到一个输入的 @debug 信息：
DEBUG: (dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee)5. 其它
函数 |
作用 |
示例 |
编译结果 |
map-has-key($map,$key) |
当 $map 中有这个 $key，则函数返回 true，否则返回 false。 |
map-has-key($social-colors,$color) |
true/false |
map-keys($map) |
将会返回 $map 中的所有 key |
map-keys($social-colors); |
"dribble","facebook","github","google","twitter" |
map-values($map) |
)获取的是 $map 的所有 value 值，如果有相同的 value 也将会全部获取出来 |
map-values($social-colors) |
#ea4c89,#3b5998,#171515,#db4437,#55acee |
map-remove($map,$key) |
删除当前 $map 中的某一个 $key |
$map:map-remove($social-colors,dribble); |
$map:( facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); |
十四、 颜色
函数 |
作用 |
示例 |
编译结果 |
red($color) |
从一个颜色中获取其中红色值 |
red(#c82858) |
200 |
green($color) |
从一个颜色中获取其中绿色值 |
green(#c82858) |
40 |
blue($color) |
从一个颜色中获取其中蓝色值 |
blue(#c82858) |
88 |
mix($color-1,$color-2,[$weight]) |
将两种颜色根据一定的比例混合在一起（weight为第一个颜色所占比例） |
mix(#f00, #00f, 25%) |
#3f00bf |
hsl($hue,$saturation,$lightness) |
通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色 |
hsl(200,30%,60%) |
#7aa3b8 |
hsla($hue,$saturation,$lightness,$alpha) |
通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色 |
hsla(200,30%,60%,.8) |
rgba(122, 163, 184, 0.8) |
hue($color) |
从一个颜色中获取色相（hue）值 |
hue(#7ab) |
195deg |
saturation($color) |
从一个颜色中获取饱和度（saturation）值 |
saturation(#7ab) |
33.33333% |
lightness($color) |
从一个颜色中获取亮度（lightness）值 |
lightness(#ad141e) |
37.84314% |
adjust-hue($color,$degrees) |
通过改变一个颜色的色相值，创建一个新的颜色 |
adjust-hue($baseColor,30deg) |
#ad5614 |
lighten($color,$amount) |
通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色 |
lighten($baseColor,70%) |
#db1926 |
darken($color,$amount) |
通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色 |
darken($baseColor,40%) |
#7f0f16 |
saturate($color,$amount) |
通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色 |
saturate($baseColor,30%) |
#c1000d |
desaturate($color,$amount) |
通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色 |
desaturate($baseColor,30%) |
#903137 |
grayscale($color) |
将一个颜色变成灰色，相当于desaturate($color,100%) |
grayscale($baseColor) |
#616161 |
complement($color) |
返回一个补充色，相当于adjust-hue($color,180deg) |
complement(#f36) |
#33ffcc |
invert($color) |
反回一个反相色，红、绿、蓝色值倒过来，而透明度不变 |
invert(#f36) |
#00cc99 |
alpha($color) /opacity($color) |
获取颜色透明度值 |
alpha(rgba(red,.8)) |
0.8 |
opacify($color, $amount) / fade-in($color, $amount) |
使颜色更不透明 |
opacify(red,.15) |
#ff0000 |
fade-in(rgba(23,34,34,.5),.15) |
rgba(23, 34, 34, 0.65) |
||
transparentize($color, $amount) / fade-out($color, $amount) |
使颜色更加透明 |
transparentize(#fde,.9) |
rgba(255, 221, 238, 0.1) |
fade-out(hsla(98,6%,23%,.5),.6) |
rgba(58, 62, 55, 0) |
十五、 @ 规则
1. @import
引入 SCSS 和 Sass 文件
(1) 示例
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);编译结果：
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);(2) 嵌套@import
example.scss
.example {
color: red;
}
#main {
@import "example";
}编译结果：
#main .example {
color: red;
}2. @media
(1) 示例：
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}编译结果：
.sidebar {
width: 300px;
}
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}(2) 嵌套 @media
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}编译结果：
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}3. @at-root
跳出根元素.a {
color: red;
.b {
color: orange;
.c {
color: yellow;
@at-root .d {
color: green;
}
}
}
}编译结果
.a {
color: red;
}
.a .b {
color: orange;
}
.a .b .c {
color: yellow;
}
.d {
color: green;
}4. @debug
@debug 在 Sass 中是用来调试的，在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出设置的提示 Bug:@debug 10em + 12em;Line 1 DEBUG: 22em5. @warn
@warn 和 @debug 功能类似，用来帮助我们更好的调试 Sass。如：
@mixin adjust-location($x, $y) {
@if unitless($x) {
@warn "Assuming #{$x} to be in pixels";
$x: 1px * $x;
}
@if unitless($y) {
@warn "Assuming #{$y} to be in pixels";
$y: 1px * $y;
}
position: relative; left: $x; top: $y;
}6. @error
@error 和 @warn、@debug 功能是如出一辙。
@mixin error($x){
@if $x < 10 {
width: $x * 10px;
} @else if $x == 10 {
width: $x;
} @else {
@error "你需要将#{$x}值设置在10以内的数";
}
}
.test {
@include error(15);
}编译的时候：
你需要将15值设置在10以内的数 on line 7 at column 5