SASS

一.SASS的作用: 方便编写CSS.
二.SASS依赖的环境 : Ruby
三.如何安装SASS?
gem install sass
gem update sass (更新sass)
gem uninstall sass (删除sass)
四.如何测试sass是否安装成功? sass -v
五.如何编译sass?
1.考拉
2.gulp
六.sass有哪四种输出方式?
七.如何导入外部scss? @import "文件名";
八.sass嵌套? 如何引入父类? &
1. 选择器嵌套
2. 属性嵌套
3. 伪类嵌套
九.注释? //sass注释 /css注释/
十.SASS变量? $变量名 : 值;
1.普通引用变量 : $变量名       (值)
2.特殊引用变量: #{$变量名} (属性)
十一.数组? $变量名 : 值1 值2 值3 ……;
十二.map? $变量名 : (key : value,key : value,……);
1. length();
2. map-get();
3. map-keys();
4.map-values();
5.map-has-key();
6.map-merge();
7.map-remove();
十三.选择?
@if 条件{
执行语句
}@else if 条件{
执行语句
}@else{
执行语句
}
十四.循环?
@for $i from 1 through 5{

}
@for $i from 1 to 5{ }
区别?
十五.@each
@each $i in 数组{

}
十六.宏@mixin
@mixin 宏名 {
内容
} @mixin 宏名($变量 : 默认值){
内容
}
导入宏: @include
十七.函数
@function 函数名([参数]){
@return 内容;
}
引用函数: 函数名([参数]);
十八.继承
@extend 选择器;

require

一.html页面中:
<script src='js/require.js' defer async='true' data-main='js/main'>
二.配置主模块
1.配置依赖文件的路径
require.config({
"paths" : {
模块别名 : "模块路径", //不加扩展名
……
}
})
2.引入依赖文件
require([模块别名,……],function(模块的返回值,……){
编写代码
})
三.设置子模块
define(function(){
return {
子模块的功能
}
})
四.

AMD : 依赖前置 (reqire.js)

CMD : 按需加载 (sea.js)

29、sass的更多相关文章

  1. CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  2. CSS3与页面布局学习笔记(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  3. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图

    技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点 ...

  4. 只会CSS还不够,LESS、SASS、BootStrap、Foundation一网打尽!

    有些人想学CSS,不知如何下手:有些人已经学会CSS的各种属性,却不知如何运用:有些人会平面设计,不知道如何与网页设计结合:有些人会HTML,就是学不会CSS.试问自己,图中的技术你都会了吗? 别总是 ...

  5. nodejs、sass、backbone等api地址

    1.nodejs Node.js v4.2.4 手册 & 文档 2.sass Sass (3.4.21) 中文文档 3.backbone Backbone.js(1.1.2) API中文文档 ...

  6. Oracle数据库作业-6 29、查询选修编号为“3-105“课程且成绩至少高于选修编号为“3-245”的同学的Cno、Sno和Degree,并按Degree从高到低次序排序。 select tname,prof from teacher where depart = '计算机系' and prof not in ( select prof from teacher where depart 。

    29.查询选修编号为"3-105"课程且成绩至少高于选修编号为"3-245"的同学的Cno.Sno和Degree,并按Degree从高到低次序排序. selec ...

  7. Sublime Text 3 LESS、SASS、SCSS高亮插件、提示插件

    为sublime text 添加LESS语法高亮 功能:LESS高亮插件   下载   https://packagecontrol.io/packages/LESS 简介:用LESS的同学都知道,s ...

  8. haml、sass简单的解释

    1. Haml 全名为 HTML Abstract Markup Language,主要就是让开发者能够使用缩排的方式撰写 HTML,做到永不忘记关 Tag 的效果. 例如:%h1= "He ...

  9. 2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换

    2017春 前端自动化(二)   页面自动刷新.sass与css转换的使用.pxToRem直观转换 引言:   此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生 ...

随机推荐

  1. 《Python数据分析与挖掘实战》读书笔记

    大致扫了一遍,具体的代码基本都没看了,毕竟我还不懂python,并且在手机端的排版,这些代码没法看. 有收获,至少了解到以下几点: 一. Python的语法挺有意思的     有一些类似于JavaSc ...

  2. FFM及DeepFFM模型在推荐系统的探索及实践

    12月20日至23日,全球人工智能与机器学习技术大会 AiCon 2018 在北京国际会议中心盛大举行,新浪微博AI Lab 的资深算法专家 张俊林@张俊林say 主持了大会的 搜索推荐与算法专题,并 ...

  3. RGBA alpha 透明度混合算法实现和测试

    目录 1.算法叙述 1.1.透明度混合算法1 1.3.简易Alpha混合算法 2.算法实现代码和测试 2.1.透明度混合算法1实现代码 2.1.AlphaBlend算法实现代码 2.3.测试截图 2. ...

  4. jetty9.4缓存文件目录自定义

    jetty9.4安装包解压之后,有几个修改的地方和jetty7.6有不同,需要单独注意一下: 1. 端口设置 端口设置在${jetty_home}/start.ini中 2. 缓存文件生成目录 项目通 ...

  5. java写桌面程序

    一:使用java swing开发窗口程序 简述: 1.文章内容主要是使用java swing类库开发一个小的窗口程序,然后使用exe4j发布成exe可以安装的程序,让初学者对使用java来做pc软件开 ...

  6. 用virsh console vhosts 卡住

    [root@666 ok]# virsh list --all Id Name State ---------------------------------------------------- 1 ...

  7. 解决AndroidStudio导入项目卡在gradle加载界面

    为了节省排版时间,直接上图了,图片若看不清,可在新标签中打开查看. 文中图片上涉及到的一些链接如下: maven { url 'http://maven.aliyun.com/nexus/conten ...

  8. 严选 | Elasticsearch史上最全最常用工具清单【转】

    1.题记 工欲善其事必先利其器,ELK Stack的学习和实战更是如此,特将工作中用到的“高效”工具分享给大家. 希望能借助“工具”提高开发.运维效率! 2.工具分类概览 2.1 基础类工具 1.He ...

  9. 常用MQ及其原理

    mq为了解决什么问题?1.异步通信   有些业务不想也不需要立即处理消息.消息队列提供了异步处理机制,允许用户把一个消息放入队列,但并不立即处理它.想向队列中放入多少消息就放多少,然后在需要的时候再去 ...

  10. C#函数的默认参数——填坑记

    昨天踩了一个坑.默认参数 + 增量发布的坑. 过程是这样的. 1. 有一个底层的方法,格式形如 void Test<T>(int p1, string p2, Func<T> ...