一、 变量
$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;
}
(2) 调用
.btn {
@include border-radius;
}
或者重写
.box {
@include border-radius(50%);
}
(3) 编译
.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: 22em
5. @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