sass的语法

1.sass

sass 动态的css

写一些语法规范 变量 嵌套 类的重用....

两种格式
一：sass格式
body
background:red;
font-size:12px;
二：scss
body{
}
考拉使用：
拖拽css目录
设置输出路径 scss要输出的css文件
识别中文：@charset “utf-8”

2.sass 语法

注释：
/**/ 可见
// 不可见
嵌套：
传统css:
ul{}
ul li{}
ul li a{}
嵌套：
ul{
li{
a{}
}
}
符合属性嵌套(不提倡)
border:{
color:red;
style:solid;
width:1px;
}
变量定义 :$变量：值;

&表示继承（引用）父级标签
a{
color:blue;
&:hover{color:red}
}

@mixin混合器定义函数 代码复用

当你的样式越来越复杂，你需要大段大段的重用样式的代码，变量就没办法应付这种情况，你可以通过sass的混合器实现大段样式的重用。
混合器使用@mixin标识符定义，这个标识符给一大段样式赋予一个名字，你可以通过@include引用这个名字重用这段样式。

  @mixin public(参数1，参数2..){}//可以定义参数，使用： @include导入

    @mixin public($h:200px){//定义一个默认值
        width:960px;
        height:$h;    //使用参数
        margin:0 auto;

    }
    #header{
        @include public(400px);给具体的参数值，默认值无效，如果不传递参数，就按照默认值执行
    
    }

@extend继承
.public{width:350px; height:200px}//无参数，使用@extend .public;
@extend .public

@import导入
导入： @import “xxx.scss” 将多个scss文件或css文件合并成一个css文件

if语句：
$type : monster;
$flag : flase;

@if $type == monster {
display : inline;
}

@if $flag{
p{color:red;}
}@else{
p{color:blue;}
}

@for语句

@for KaTeX parse error: Expected '}', got '#' at position 31: …h 3{ .item-#̲{i}{width:2em * $i;}
}

$arr: (
(theme: dark, size: 40px),
(theme: light, size: 32px)
);
@for $ifrom1throughlength($arr) { // 遍历数组
$item:nth($arr, $i); // 获取数组中第i项的值

}

数组
KaTeX parse error: Expected '}', got 'EOF' at end of input: … width: nth(arr,2);
height: nth($arr,1);background:nth($arr,length($arr));z-index:index($arr,200px);
}
遍历数组
@for $ifrom1throughlength($arr){
.sum#{KaTeX parse error: Expected 'EOF', got '}' at position 2: i}̲{ width: n…arr,2);
}
}

函数
$width:20px;@functionfun($width) {
@return KaTeX parse error: Expected 'EOF', got '}' at position 16: width * 2; }̲ div { …width);
}

模块化开发

什么是模块化：

模块化开发，可以一次性引入多个模块文件 无关顺序
require.js加载的模块，采用AMD规范，也就是说模块必需按照AMD规定来写
具体来说，就是模块必须采用特定的define()函数来定义，如果一个模块不
依赖其他模块那么可以直接定义在define()函数中
require.js模块化开发解决的问题：
js引入的顺序问题
js频繁引入的问题

require.js引入（整个页面只需要引入require.js即可）

    <script src="../js/require.js" data-main="main"></script>
    data-main ：程序入口
    main ：自定义的js文件，实现程序，无需加扩展名
main实现：
    其它依赖模块注入 并重命名
    requirejs.config({
        paths : {//模块路径
            "jquery" : "js/jquery.min",//注意这里为重命名，不能加扩展名，jquery重命名名称必需为jquery
            "eq" : "js/equal"//自定义功能模块
        }
    })
    编写代码：["jquery","eq"]:依赖注入
    requirejs(["jquery","eq"],function($,obj){
        
        $("body").css("background","red");
    })
**自定义模块：equal.js,自定义模块写在define()函数中**
    define(function(){
        return {
            eq : function(a,b){
                return a == b;
            }
        }
    })