Sass之二(进阶篇)
1. 数据类型
1.1 Number
- 数字类型,小数类型,带有像素单位的数字类型,所有都属于Number类型
- Number类型详情请点击这里,下面是小例子
$n1: 1.2;
$n2: 12;
$n3: 14px;
$n4: 1em;
1.2 String
- 不加双引号的,加双引号的,加单引号的所有都属于String类型
- String类型详细内容请点击这里, 下面是小demo
$s1: container;
$s2: 'container';
$s3: "container";
1.3 List
- List类型的取值,语法
nth(list, index),第一个参数表示要取谁的,也就是list类型的变量的名称,第二个表示索引,这里的索引和JavaScript略有不一样,JavaScript索引基本上都是从零开始,而这里是从一开始的.
- List类型的方法的详情请点击这里, 下面是小demo
$padding: 1px 5px 10px 15px;
.container {
padding: nth($padding,2) nth($padding,4);
}
.container { padding: 5px 15px; }
1.4 Map
- Map类型取值,语法
map-get(map, key),第一个参数表示要取谁的,也就是map类型的变量的名称,第二个参数表示要取的key
- Map类型的方法的详情请点击这里, 下面是小demo
$map: (color: red,background-color: #f00);
body {
color: map-get($map, color);
}
body { color: red; }
1.5 Color
$c1: blue;
$c2: #fff;
$c3: rgba(255,255,0,0.5);
body {
color: $c3;
}
body { color: rgba(255, 255, 0, 0.5); }
1.6 Boolean
- 布尔类型分为两种
true和false
$bt: true;$bf: false;
$null: null;
body {
@if $null == null{
color: red;
}
}
body { color: red; }
2. 变量的操做
2.3 +,-,*,/,%
- 进行计算的时候最好用空格进行隔开,例如减号若是不隔开,会把两个变量当成一个变量来处理.
- 下面是一些小例子
$width1: 100px;
$width2: 125px;
span {
width: $width1 + $width2;
}
a:hover {
cursor: e + -resize;
}
a::before {
content: A + 'bc';
}
a::before {
content: "A" + bc;
}
p {
padding: 3px + 4px auto;
}
$version: 3;
p::before {
content: "hello,Sass #{$version}";
}
p {
font: (20px/10px);
width: $width2 / 2;
width: round($width2 / 2);
height: (100px / 2);
}
span { width: 225px; }
a:hover { cursor: e-resize; }
a::before { content: Abc; }
a::before { content: "Abc"; }
p { padding: 7px auto; }
p::before { content: "hello,Sass 3"; }
p { font: 2; width: 62.5px; width: 63px; height: 50px; }
3.Mixin
3.1简单实例
- 学过JavaScript的都对方法耳熟能详,那么Scss中的mixin就相似于JavaScript中的方法
@mixin test1 {
color: red;
}
body {
@include test1;
}
@mixin test2($color: red) {
color: $color;
}
body {
@include test2(#fff);
}
@mixin test3($color: red, $fontSize: 12px) {
color: $color;
font-size: $fontSize;
}
body {
@include test3($fontSize: 18px, $color: blue);
}
body { color: red; }
body { color: #fff; }
body { color: blue; font-size: 18px; }
3.2 传递多值参数
- 传递多值参数的时候,须要在参数后面加上三个点
...表示这个参数可能含有多条属性,告诉sass不要区分逗号了,把传递的参数当作一个参数来解析.
@mixin test4($shadow...) {
text-shadow: $shadow;
-webkit-text-shadow: $shadow;
-moz-text-shadow: $shadow;
}
.text {
@include test4(1px 1px 10px red, 0 0 5px blue);
}
.text { text-shadow: 1px 1px 10px red, 0 0 5px blue; -webkit-text-shadow: 1px 1px 10px red, 0 0 5px blue; -moz-text-shadow: 1px 1px 10px red, 0 0 5px blue; }
3.3 传递内容
- 传递内容就比如在方法中弄了个占位符, 当你调用的时候,所写的内容会直接放在占位符那里;
@mixin style-for-iphone {
@media only screen and (min-width:320px) and (max-width:568px){
@content;
}
}
@include style-for-iphone {
height: 100px;
font-size: 12px;
}
@media only screen and (min-width: 320px) and (max-width: 568px) { height: 100px; font-size: 12px; }
4. 函数
4.1 内置函数
- 内置函数是系统给咱们定义好了的一些函数,详情请点击这里
4.2 自定义函数
- 提到函数咱们不有自主的想到JavaScript中的函数,Sass须要在
function和return前面加一个@符号,例如:
@function double($width){
@return $width * 2;
}
body {
$color: rgba(255,0,0, .3);
color: $color;
width: 100%;
height: 100%;
p {
color: darken($color, 0.5);
background-color: lighten($color, 0.9);
z-index: str-length('aaaa');
z-index: str-index('aaabddd','b');
width: double(5px);
}
}
body { color: rgba(255, 0, 0, 0.3); width: 100%; height: 100%; }
body p { color: rgba(252, 0, 0, 0.3); background-color: rgba(255, 5, 5, 0.3); z-index: 4; z-index: 4; width: 10px; }
5. 编译输出
5.3 error
6. 条件语句及循环语句
$width: 800;
body {
color: if($width > 800, blue, red);
}
@if $width > 800 {
body {
color: red;
}
}
@else if $width == 800 {
p {
color: blue;
}
}
@else {
body{
color: blue;
}
}
body { color: red; }
p { color: blue; }
6.2 循环语句
- 语法1
for $i from 1 to 10
- 语法2
for $i from 1 through 10
- 下面代码是
through的用法,to的用法在这里就不演示了
@for $i from 1 through 5 {
.span#{$i} {
width: 20% * $i;
}
}
.span1 { width: 20%; }
.span2 { width: 40%; }
.span3 { width: 60%; }
.span4 { width: 80%; }
.span5 { width: 100%; }
6.3 while
- 使用while 须要注意一下几点,
- 第一: 变量要提早声明
- 第二: while里面能够设置步长
$j: 6;
@while $j > 0 {
.p#{$j} {
width: 20% * $j;
}
$j: $j - 3;
}
.p6 { width: 120%; }
.p3 { width: 60%; }
7. each
7.1 常规遍历
$k: 1;
$color: red, green, blue;
@each $c in $color {
.div#{$k} {
color: $c;
}
$k: $k + 1;
}
.div1 { color: red; }
.div2 { color: green; }
.div3 { color: blue; }
7.2 遍历list
- 这里出现的方式是以一个键一个值的形式出现的,若是是但数据的变量,那么能够在外边顶一个索引,内部执行加1 操做,也能够获得相应的效果.
$key表示键值,$color表示值
@each $key, $color in (default, green), (dange,blue), (error, red) {
.aler-#{$key} {
color: $color;
}
}
.aler-default { color: green; }
.aler-dange { color: blue; }
.aler-error { color: red; }
@each $key, $val in (default: green, dange: blue, error: red) {
.alert-#{key} {
color: $val;
}
}
.alert-key { color: green; }
.alert-key { color: blue; }
.alert-key { color: red; }
8. 小实例
- 这里写了个小实例, 有兴趣的朋友能够看看,其实我也是抄的别人的实例,等会去写个小项目,orz我要睡觉了,明天写吧….好累的说,代码粘在下面了…
@function buildContainer($num: 5) {
$map: (defaultValue: 0);
$rate: percentage(1 / $num);
@for $i from 1 through 5 {
$tempMap: (col#{$i} : $rate * $i);
$map: map-merge($map, $tempMap);
}
$map: map-remove($map, defaultValue);
@return $map;
}
@mixin buildContainer($num: 5) {
$map: buildContainer($num);
@each $key, $val in $map {
.#{$key} {
width: $val;
}
}
}
@include buildContainer();
.col1 { width: 20%; }
.col2 { width: 40%; }
.col3 { width: 60%; }
.col4 { width: 80%; }
.col5 { width: 100%; }