目录
变量名与函数名重复
- 正常:函数整体提升,变量(声明)在提升
- 函数名称与变量名称相同时,函数提升后,变量不在提升
全局污染,不同位置的同名全局变量,值 会互相影响
全局作用域,script标签下,默认就是全局作用域
全局污染
解决方案:;(function(){})()//匿名函数自调用,自调用前加分号
回调函数
函数传递函数
- 带名字的普通函数,传递函数名
- 不带名字的匿名函数,传递匿名函数整体
- 将函数类型的值,作为参数传递,被传递的就是回调函数,回调函数自动调用
function 函数名(el){
函数体
el()//调用传入的回调函数
}
函数名(callback name)
函数名(function(){……})
预处理器
sass
Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。
变量($)
SassScript 最普遍的用法就是变量,变量以美元符号开头,赋值方法与 CSS 属性的写法一样
父选择器(&)
- 嵌套 CSS 规则时,有时也需要直接使用嵌套外层的父选择器
- 用
&
代表嵌套规则外层的父选择器
插值语句(#{变量})
通过 #{} 插值语句可以在选择器或属性名中使用变量
$abc: 10px;
$nav: nav;
$list: list;
// .nav-item
.#{$nav}-item {
color: red($color: #000000);
}
.#{$list}-item {
color: aqua;
}
混合指令
- @mixin 混入指令名称,创建混合指令名称,自定义名称不能以数字开头
- @include 混合指令名称,传参数
继承(extend)
某个元素使用另一个元素的全部样式,
注意:继承不可以选择
占位符选择器(%)
- 继承选择器,样式被继承
- 不会编译到css文件中