什么是 sass
以 css 为基础的 预编译语言 -- 另一种形式的css
与 普通 css 的区别
可以定义变量,可以定义if判断,可以定义for循环,定义函数...等等
基本特点
sass 有两种语法形式
.sass文件 就是 没有 {} 的css
但是没有 {} 不好区分 每一个选择器
现在没人用 .sass 文件格式了
.scss文件 与普通的css语法一致,只是多了变量等内容
普通css
.div{
100px;
height:100px;
}
.div>p{
200px;
height:200px;
}
sass语法
.div
100px;
height:100px;
.div>p
200px;
height:200px;
sass的说明
sass本质上是一个可以编译的css
浏览器不支持直接执行sass文件,必须要编译转化为css文件,浏览器才能支持
编译方式有3种
1, 最简单的方式:
使用 vsCode 编辑器自带的插件 easy sass
你只需要编辑 sass文件会自动转化为css文件
但是很多我们需要的功能不能实现,不推荐使用的
2, 使用 node.js 来进行编译
node.js 中 提供了 sass 编译依赖包 可以通过 npm 来下载执行
依赖包必须定义为 全局作用域 依赖包
npm i -g sass
3, 实际项目中,是通过 gulp 编译打包压缩一起进行
在你编辑sass文件的时候,你保存sass文件
自动编译为 css文件 并且打包,存储在 dist/css 文件夹中
// 4,结构嵌套
// 父子 ,后代 关系
// 父子后代关系
// 之前的css,是 父级, 子级分开定义
// 现在是 在 父级中 嵌套定义子级属性
// 还可以嵌套定义父级的伪类选择器
/* 父级{
css属性:属性值
> 子级{ 父子
子级css属性:属性值
}
子级{ 后代
子级css属性:属性值
}
&:hover{
伪类的属性:属性值
}
}
*/
// 5,属性嵌套
// 在当前属性中,设定特殊的属性值
// 例如 margin:100px 四个方向的属性值都是100px
// 需要单独定义 margin-left : 500px
/*
div{
100px;
height: 100px;
margin: 100px {
top: 50px;
};
border: 1px solid red{
top: 4px solid blue;
};
}
*/