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
i
f
r
o
m
1
t
h
r
o
u
g
h
l
e
n
g
t
h
(
i from 1 through length(
ifrom1throughlength(arr) { // 遍历数组
i
t
e
m
:
n
t
h
(
item: nth(
item:nth(arr, $i); // 获取数组中第i项的值
}
数组
KaTeX parse error: Expected '}', got 'EOF' at end of input: … width: nth(arr,2);
height: nth(
a
r
r
,
1
)
;
b
a
c
k
g
r
o
u
n
d
:
n
t
h
(
arr,1); background: nth(
arr,1);background:nth(arr,length(
a
r
r
)
)
;
z
−
i
n
d
e
x
:
i
n
d
e
x
(
arr)); z-index: index(
arr));z−index:index(arr,200px);
}
遍历数组
@for
i
f
r
o
m
1
t
h
r
o
u
g
h
l
e
n
g
t
h
(
i from 1 through length(
ifrom1throughlength(arr){
.sum#{KaTeX parse error: Expected 'EOF', got '}' at position 2: i}̲{ width: n…arr,2);
}
}
函数
w
i
d
t
h
:
20
p
x
;
@
f
u
n
c
t
i
o
n
f
u
n
(
width: 20px; @function fun(
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;
}
}
})