29、sass

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)