安装 gulp

在 cmd 中输入命令全局安装 gulp

sudo npm install -g gulp 

安装完成后再输入检查是否安装成功

gulp -v

接下来，将 gulp 安装到项目本地，作为项目的开发依赖（devDependencies）安装

npm install --save-dev gulp

在项目根目录下创建一个名为 gulpfile.js 的文件

1
2
3
4
5

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

禁止右键点击

1
2
3
4
5

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

隐藏搜索文本框文字

1
2
3
4
5
6
7
8
9
10
11
12
13

$(document).ready(function() {
$("input.text1").val("Enter your search text here");
   textFill($('input.text1'));
});
function textFill(input){ //input focus text function
  var originalvalue = input.val();
  input.focus( function(){
    if( $.trim(input.val()) == originalvalue ){ input.val(''); }
  });
  input.blur( function(){
    if( $.trim(input.val()) == '' ){ input.val(originalvalue); }
  });
}

前台调用

1
2
3

var $ = function() {
   return new Base();
}

基础类

1
2
3
4
5

function Base() {
    //创建一个类
    //创建一个数组来获取一个节点和节点数组
    this.elements = [];
}

运算

加法/减法

加法/减法运算是 Sass 中运算中的一种，在变量或属性中都可以做加法运算。

但对于携带不同类型的单位时，在 Sass 中计算会报错：20px + 3em错误

乘法/除法

当一个单位同时声明两个值时会有问题。2px*3px错误

Sass 的乘法运算和加法、减法运算一样，在运算中有不同类型的单位时，也将会报错，20px * 3em错误。

除法

/符号在 CSS 中已做为一种符号使用。因此在 Sass 中做除法运算时，直接使用/符号做为除号时，将不会生效，编译时既得不到我们需要的效果，也不会报错。

生效的前提条件：

1. 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
2. 如果数值被圆括号包围。
3. 如果数值是另一个数学表达式的一部分。

声明 Map

sass 的 map 常常被称为数据地图，也有人称其为数组，因为他总是以 key:value 成对的出现，但其更像是一个 JSON 数据。

1
2
3
4
5

$map: (
    $key1: value1,
    $key2: value2,
    $key3: value3
)

在 Sass 中常用下面的方式定义变量：

1
2

$default-color: #fff;
$primary-color: #22ae39;

我们使用 map 可以更好的进行管理：
『 Read More 』 >>

@import

Sass 扩展了 CSS 的 @import 规则，让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。

@media

sass 中的 @media 指令和 CSS 的使用规则一样的简单，但它有另外一个功能，可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样，如果在样式中使用 @media 指令，它将冒泡到外面。

@extend

Sass 中的 @extend 是用来扩展选择器或占位符。

@extend不能继承选择器序列。

@extend继承会把其下面的子类一起继承。

解决方案：使用%来构建需要被继承的元素。但是代码不会被合并。

@at-root

@at-root 从字面上解释就是跳出根元素。

当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。不适合嵌套过多的时候使用
『 Read More 』 >>

@if

@if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/** SCSS **/
@mixin blockOrHidden($boolean:true) {
  @if $boolean {
      @debug "$boolean is #{$boolean}";
      display: block;  //当不写参数或者参数为true
    }
  @else {
      @debug "$boolean is #{$boolean}";
      display: none;  //参数为false
    }
}

.block {
  @include blockOrHidden;
}

.hidden{
  @include blockOrHidden(false);
}

字符串函数

• unquote($string)：删除字符串中的引号；
• unquote() 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。
• quote($string)：给字符串添加引号。
• quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。
• To-upper-case()：函数将字符串小写字母转换成大写字母
• To-lower-case()：函数 与 To-upper-case() 刚好相反，将字符串转换成小写字母

数字函数

Sass 中的数字函数提要针对数字方面提供一系列的函数功能：
『 Read More 』 >>

全局变量/局部变量

创建变量用$符号开头。

创建变量的条件：

该值至少重复出现了两次；
该值至少可能会被更新一次；
该值所有的表现都与变量有关（非巧合）。

注意：当在局部范围（选择器内、函数内、混合宏内…）声明一个已经存在于全局范围内的变量时，局部变量只会在局部范围内覆盖全局变量。

1
2
3
4
5
6
7
8
9
10
11

/** SCSS **/
$color: orange !default;//定义全局变量
.block {
  color: $color;//调用全局变量
}
em {
  $color: red;//定义局部变量（全局变量 $color 的影子）
  a {
    color: $color;//调用局部变量
  }
}

Handlebars.js模版

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{{#each this}}
  <tr>  
    <td>{{name}}</td>
    <td>{{sex}}</td>
    <td>{{age}}</td>
    <td>
      {{#with favorite}}
        {{#each this}}
          <p>{{name}}</p>
        {{/each}}
      {{/with}}
    </td>
  </tr> 
{{/each}}