sass 列表函数:

1.length()返回列表项的个数。如果在参数中直接写入列表项,需要使用空格分隔,不能使用逗号。

编译为:

2.nth() 指定列表中的某个值

nth($list,$n)

$list:列表名

$n:位置,从1开始,必须是大于0的整数

编译为:

3.join() 将两个列表合并,每次只能合并两个,如果有多于三个列表合并需要使用多次join()

join($list1,$list2,参数3)

join((1,2,3),(a,b,c),参数3);

参数3指定列表项的分隔符,默认为auto,逗号为comma,空格为space.

当参数3为自动时:以列表1的分隔符来决定输出列表的分隔符,建议每次都指定

$list1 为逗号分隔,那么输出结果也是逗号分隔,

$list1 为空格分隔,那么输出结果也是空格分隔,

编译为:

4.append() 将一个列表值插入列表结尾

append($list1,$list2,参数三)

$list1,前面的列表

$list2,后面的列表

参数三,为分隔符,默认为auto,可以设置为comma逗号,space空格

编译后:

5.zip() 将多个列表组成一个多维列表,类似数组

编译为:

6.index()索引函数

index($list,值),返回值所在的$list中的位置,从1开始,如果没有返回false

编译为:

7,introspection 自查函数

(1)type-of() 判断一个值是什么类型

返回值:

number 为数值型,可以带单位

string 为字符串型,两边用引号

bool为布尔型,true或false

color为颜色型,#000,red,rgb(0,0,0)等

编译为:

(2)unit() 获取一个值的单位,

如果值是表达式有多个单位,乘除单位可以不同,加减单位必须相同

当除两个单位相同时,返回空

编译为:

(3)unitless() 判断一个值有没有单位,如果没有返回true,如果有false

编译为:

实际中可以判断值有没有单位,如果没有自动给其加上

编译为:

(4)comparable() 判断两个数是否可以进行加 减 或 合并。

可以返回true.不可以返回false

编译为:

(5)三元函数

if($条件,$值1,$值2 )

当条件为真时,值为1

当条件为假时,值为2

编译为:

 

 

 

 

sass 数字函数应用

1.percentage() 将一个数字转换为百分比,单位必须相同

编译为:

2.round() 四余五入为最近整数

编译后:

3.ceil() 将一个数转换为最接近的数,只做入,不做舍

编译后:

4.floor() 将一个数转换为最接近的数,只做舍,不做入,和ceil相反

编译为:

5.abs() 返回一个数的相对值,可以带单位

编译为:

6.取最大值和最小值

min() 在多个数中找到最小的一个,可设置任意多个参数,如果有单位,单位必须相同

编译为:

max()在多个数中找最大值,可设置任意多个参数,如果有单位,单位必须相同

编译为:

7.random()取一个小于1的随机数

编译为:

 

sass 字符串函数应用

1.字串函数:

(1)unquote 函数

unquote($string) 删除字符串两边的单引号,双引号,不能删除中间引号,不能删除单边引号。

编译后:

 

quote($string) 给字符串两边添加双引号,字符串中间不能有空格,不能有单引号或双引号,如果字符串两边已经有单引号会被自动换为双引号,!、?、> 等,除中折号 – 和 下划线_ 都需要使用双引号括起

编译后:

(2)字符串大小写转换函数:

to-upper-case() 将小写转换成大写

编译后:

to-lower-case() 大写转小写

编译后:

 

 

 

sass 中的控制命令:

1.条件语句:@if

@if 条件为真时执行代码块,可以配合@else if 和 @else来用

编译后:

2.循环语句:

(1)@for

@for $i from <start> through <end>

@for $i from <start> to <end>

$i是变量

start:起始

end:结束

through包含end数, to 不包含end这个数

编译为:执行了三次

编译为:执行了两次

做网格案例:

编译为:

(2)@while

@whie 条件{内容 条件变化}

编译为:

(3)@each 循环

@each $var in <list>

$var 列表中对应值

list 列表名

编译为:

sass 中的运算

1.加法:

px可以和in,cm,mm相加,不能和em相加

编译后:

2.减法

px可以和in,cm,mm相减,不能和em相减

编译后:

3.乘法

被乘数和乘数不能同时都带单位,只能有一个带单位或都不带单位

编译后:

4.除法

在单表达式的两边需要加括号

在多运算符表达式中不需要加括号

当在表达式中有变量或函数时,也不需要加括号

当两个数都带单位时,当得一个无单位数

编译后:

多运算符:

编译后:

 

5.变量参于运算

编译:

6.数字运算:

加 减 乘 除 也可以使用括号提高优先集

编译后:

7.颜色运算:

可以颜色之前运算,也可以和数字一起运算,采用分段运算

编译后:

8.字符运算:

使用+号可以链接两个字符串,

编译为:

 

 

 

 

 

javascript 比较三个数案例

案例:

[cce_js]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    第一个数
    <input type="text" id="num1" /> 第二个数
    <input type="text" id="num2" /> 第三个数
    <input type="text" id="num3" />
    <button id="bt" onclick="bjsx()">升序</button>
    <button id="bt" onclick="bjjx()">降序</button>
    <script>
    function sx(a, b) {
        return a - b;
    }

    function jx(a, b) {
        return b - a;
    }

    function bjsx() {
        var num = new Array();
       		num[0] = document.getElementById("num1").value,
            num[1] = document.getElementById("num2").value,
            num[2] = document.getElementById("num3").value;

        num.sort(sx);
        alert(num);
    }

    function bjjx() {
        var num = new Array();
        	num[0] = document.getElementById("num1").value,
            num[1] = document.getElementById("num2").value,
            num[2] = document.getElementById("num3").value;
        num.sort(jx);
        alert(num);
    }
    </script>
</body>

</html>

[/cce_js]

sass 混合宏 继承 占位符的优缺点

代码:

[cce]
//SCSS中混合宏使用
@mixin mt($var){
  margin-top: $var;  
}

.block {
  @include mt(5px);

  span {
    display:block;
    @include mt(5px);
  }
}

.header {
  color: orange;
  @include mt(5px);

  span{
    display:block;
    @include mt(5px);
  }
}

//SCSS 继承的运用
.mt{
  margin-top: 5px;  
}

.block {
  @extend .mt;

  span {
    display:block;
    @extend .mt;
  }
}

.header {
  color: orange;
  @extend .mt;

  span{
    display:block;
    @extend .mt;
  }
}

//SCSS中占位符的使用
%mt{
  margin-top: 5px;  
}

.block {
  @extend %mt;

  span {
    display:block;
    @extend %mt;
  }
}

.header {
  color: orange;
  @extend %mt;

  span{
    display:block;
    @extend %mt;
  }
}
[/cce]

编译后:

可以看出:

1.混合宏不会自动合并重复代码,会产生冗余代码,但其可以通过变量可以传参数

2. 继承和占位符都会自动合并重复代码,但不能传参数

建议:

1.有需要涉及到变量传参数,使用混合宏

2.不使用变量传参数,且在代码中已经有一个共用样式存在使用继承

3.不使用变量传参数,代码中根据需要有一个共用的样式那么就使用占位符

 

CSS 清除浮动:

早期:弊端会产生空标签

[cce].clear{clear:both;line-height:0;}[/cce]

中期:

利用IE5,6,7,不支持:after伪类

[cce]
IE5
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix { display: inline-table; }
 
* html .clearfix { height: 1%; }//Hides from IE-mac
.clearfix { display: block; }//End hide from IE-mac
[/cce]
[cce]
IE6
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
[/cce]
[cce]
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix{*zoom:1;}
[/cce]

现在:

[cce]
.clearfix:after {
    content:"\200B";//Unicode字符里有一个“零宽度空格”
    display:block;
    height:0;
    clear:both;
}
.clearfix {*zoom:1;}/*IE/7/6*/
[/cce]
[cce]
.clearfix:before,.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{clear:both;}
.clearfix{
    *zoom:1;/*IE/7/6*/
}
[/cce]

11

sass 语法

1.变量

声明变量:

$test:300px !default;

$test 是变量名 300px是变量值,中间用:号隔开 ,值后加!default 代表默认变量

全局变量:在选择器,函数,混合宏的外面定义的变量均为全局变量

普通变量在全局范围内都可以使用,可以重新赋值

默认变量是设置默认值常用于组件开发,以!default后缀赋值变量,值不变。

原码:

编译后:

全局和局部变量案例:

编译后:

2.嵌套:

(1)选择器的嵌套:&代表外层所有标签

编译后:

(2)属性嵌套:前缀相同的CSS属性:border,margin,padding,font等

编译后:

(3)伪类嵌套

使用&来代替外层的标签

编译后:

3,混合宏:

@mixin 为前缀声明混合宏

 

[cce]
@mixin 宏名($参数){

 @if 条件 {
  表达式
 }@else{
  表达式
}
}
[/cce]

调用宏:

@include 宏名;

传参:可以传一个或多个

编译后:

传默认值:

编译后:

当传的参数过多时可以使用:…

编译为:

宏的不足,当同一代码块被多次调用,并不能智能将相同的代码合在一起,容易出现冗余代码。

4.继承

@extend 样式名

继承存在的代码块,形成组合选择器,可以减少冗余代码

编译后:

5.占位符:

%占位名

在未使用@extend调用前,不会产生任何CSS,可以让代码更干净

编译后为空:

如果被调用将产生CSS代码:

编译后:

6.插值

#{变量名}

使用在属性名中,如果在属性名中直接使用变量,将报错,在@include中调用插值也会报错

编译为:

7.注释:

(1)使用/*注释*/ 这样在编译后会显示

(2)使用//注释 这样在编译后不会显示

编译后:

8.数据类型:

数字:10px,1 , 2 ,3 ..

字符串:”abc”, abc

注意在使用插值#{}时有引号字串将被编译为无引号字符串

颜色:red,#000000,rgba(255,0,0,0.5)

布尔型:true false

空:null

值列表:使用空格或逗号分开, 1.5em 1em 0 2em, Helvetica, Arial, sans-serif,可以使用()代表空列表,但是代表整个列表时会报错,只能代表列表中的一项。