koala 下载 将sass编译为css文件

1 嵌套

2 $变量

3 @mixin 函数名(参数)

4 @include 函数    调用

5 @import "xxx"   引入xxx.scss

5 @extend 继承

ul{
li{
a{}
}
};
$toolbar-size : 52px; @mixin opacity($opacity){
opacity:$opacity;
filter:alpha(opacity=$opacity*100)
} @include opacity(0.1) @import "toolbar" .box{
....
....
}
.box2{
@extend .box;
}

  

RequireJS 为什么使用

1、有效的防止命名冲突

2、声明不同js文件之间的依赖

3、可以让我们的代码以 模块化 的方式组织

RequireJS常用方法

1、requirejs.config  定义别名

main.js  入口文件  <script src='js/require.js' data-main='js/main'></script>  (在.html中  加载完require.js文件之后 立即调用的文件是入口文件 用data-main的方式)

reuirejs.config({
paths:{
jquery:'jquery-1.11.3.min'
}
}); requirejs(['jquery'],function($){
$("body").css('background-color','red');
});

2、requirejs

3、define  编写模块   将一个个功能定义成模块

validate.js  将密码校验功能 编译成一个模块 相当于一个文件

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

  在入口文件main.js内引入validate模块

reuirejs.config({
paths:{
jquery:'jquery-1.11.3.min'
}
}); requirejs(['jquery',’validate'],function($,validate){
console.log(validate.isEqual(1,2));
});

  

requireJs sass侧边栏的更多相关文章

  1. requirejs + sass 实现的前端及 grunt 自动化构建

    对于 现在的 vue . react .webpack 来说也许有点旧了,有时候,越简单的技术越可靠,备份一下 module.exports = function(grunt) { // Projec ...

  2. sass+require实现侧边栏

    一.效果图(如下)及使用的技术 实现用sass实现页面中右侧固定侧边栏的样式,用require.js实现返回顶部的功能 二.sass 具体的sass的介绍就不多说了,大家可以参考sass官网介绍,下面 ...

  3. vue、rollup、sass、requirejs组成的vueManager

    近段时间本人一直在思考如何基于vue搭建一个中后端管理系统的通用基础前端解决方案.思考的主要问题点如下: 如何使各个子业务模块的按需加载 css预处理方案的选择 如何引入现代的前端工程思想,也就是工程 ...

  4. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  5. 使用gulp解决RequireJS项目前端缓存问题(一)

    1.前言 前端缓存一直是个令人头疼的问题,你有可能见过下面博客园首页的资源文件链接: 有没有发现文件名后面有一串不规则的东东,没错,这就是运用缓存机制,我们今天研究的就是这种东西. 先堵为快,猛戳链接 ...

  6. 你需要知道的Sass插值

    你也许会不时地写写 Sass 玩玩,你也会很享受它带给你各种便利.但还有一件事,你并不一定完全了解:插值 (interpolation) - 将一个占位符,替换成一个值.好了,你们都很幸运,因为今天我 ...

  7. 我是如何基于angular+requirejs+node做SPA项目架构的

    本文章已经录制视频,地址是:http://v.youku.com/v_show/id_XODI3MjYyODI0.html 前端这两年技术飞速发展,各种优秀框架层出不穷.本文不是讨论各框架的比较,也不 ...

  8. Sass与Compress实战:第三章

    概要:这一章将介绍Compass如何使Web设计中最基础的部分——布局变得简单. 本章内容: ● 网格布局的基本原理以及何时使用网格布局 ● 使用Compass时的CSS网格布局框架选项 ● 使用排版 ...

  9. gulp + angular + requirejs 简单学习

    一.安装gulp(已经安装了node环境) npm  install -g gulp 二.在package.json文件中配置依赖插件 { "name": "xxxx&q ...

随机推荐

  1. Python 进阶

    高阶函数 定义 函数接受的参数是一个函数 函数的返回值为一个函数 满足以上2点中其中一个就是高阶函数 函数嵌套 定义 函数中def定义一个函数 嵌套会存在闭包, 其他情况不会有闭包(闭包闭的是变量) ...

  2. 深入理解JavaScript系列(2):揭秘命名函数表达式

    前言 网上还没用发现有人对命名函数表达式进去重复深入的讨论,正因为如此,网上出现了各种各样的误解,本文将从原理和实践两个方面来探讨JavaScript关于命名函数表达式的优缺点. 简单的说,命名函数表 ...

  3. C#事件(event)解析委托

    namespace Vczx.ProCSharp.Event { /// <summary> /// 类EatEventArgs 必须继承自类EventArgs,用来引发事件时封装数据 / ...

  4. python-requests 简单实现数据抓取

    安装包: requests,lxmlrequest包用于进行数据抓取,lxml用来进行数据解析对于对网页内容的处理,由于html本身并非如数据库一样为结构化的查询所见即所得,所以需要对网页的内容进行分 ...

  5. python学习(七)--豆瓣爬取电影名,评分以及演员

    import requestsimport re #爬取豆瓣电影排名pageNum = int(input("要查看第几页电影分数:"))#已知豆瓣默认每页展示20条#url= & ...

  6. struts2返回结果类型

    在action下还有result标签 1.result不只有name,其实还有type result返回类型在struts-default.xml默认的配置文件中有定义,可以看到有result-typ ...

  7. 数据分析核心包——pandas

    一.pandas简介 pandas是一个强大的Python数据分析的工具包,是基于NumPy构建的. 1.pandas的主要功能 (1)具备对其功能的数据结构DataFrame.Series (2)集 ...

  8. String字符串操作

    char chars[] ={'a','b','c'}; String s = new String(chars); int len = s.length();//字符串长度 System.out.p ...

  9. .NET开源工作流RoadFlow-表单设计-按钮

    在表单中添加一个按钮: 宽度,高度:按钮的宽度和高度. 文本:按钮显示的文本. 事件:点击按钮执行的操作.

  10. 增强for循环 java.util.ConcurrentModificationException

    Java中的Iterator功能比较简单,并且只能单向移动: (1) 使用方法iterator()要求容器返回一个Iterator.第一次调用Iterator的next()方法时,它返回序列的第一个元 ...