利用RequireJs和SASS制作简单侧栏工具条-原创手记-慕课网

该实例根据慕课网视频制作

实例很简单，却运用了很多相关技术

1、三种csss实现方式

a. 使用背景图片。将多张图片合并成一张图片，减少HTTP请求，提高速度

b. 使用图标字体。代替简单图片，方便修改

c. 使用before和after伪类。减少标签的书写，降低HTML结构的复杂性

2、SASS技术

将sass编译成css——Less/Sass编译工具:Koala，下面sass简单运用

嵌套

.toolbar-item{ 
    position: relative; 
    transition: background-position 1s; 
    &:hover{ 
      .toolbar-layer{ 
      @include opacity(1); 
      } 
    } 
}

$变量

$toolbar-size:52px;

@mixin函数名(参数)-定义函数

@mixin transition($transition){ //定义一个函数 
 -webkit-transition: $transition; 
 -moz-transition: $transition; 
 -ms-transition: $transition; 
 -o-transition: $transition; 
 transition: $transition; 
}

@import -引入其他SASS文件

@import "mixin"; 如引入SASS文件_mixin.scss

@extend -继承其他样式

@extend .icon-mobile;

3、Require.js使用

使用RequireJs好处：有效的防止命名冲突；声明不同js文件之间的依赖；可以让我们的代码以模块化的方式组织。使用require.js需要了解以下三个知识点

requirejs.config -配置别名

requirejs.config({
  paths:{
    jquery:'jquery-1.12.2.min',
    validate:'validate_demo'
  }
});

requirejs -引入模块

//使用模块
requirejs(['jquery','validate'], function($,validate){ 
    $('body').css('background','red'); 
   //console.log(validate.isEqual(1,1)); 
   alert(validate.isEqual(1,1)); 
});

define -定义模块

define(['jquery'],function($){ 
   return { 
    isEmpty:function(){}, 
   checkLength:function(){}, 
   isEqual:function(str1, str2){ 
  return str1 === str2; 
  } 
 } 
});

4、CSS3实现简单的动画效果

过渡效果transition

transition: top 1s;

2D变换transform

transform-origin: 95% 95%; 
transform: scale(0.01);