概念
sass是可编译的的css程序,在sass中可以对css程序定义变量,if,for,函数等等。
scss
语法形式和普通的css语法形式完全相同,只是引入了变量,if,for等。实际项目中推荐使用scss格式的文件。
编译
浏览器不支持sass文件的执行,只支持css文件的执行。asss或者scss的we你按都必须变异成css文件,这里推荐使用gulp程序打包压缩的同时,编译sass文件。
配置安装
nodejs默认是从美国的服务器下载安装第三方依赖包,需要修改下载路径是中国服务器。
npm config set registry https://registry.npm.taobao.org
使用命令下载安装nodejs的sass模块化文件是第三方模块化文件 / 第三方依赖包
npm i -g sass 简写
npm install --global sass 完整代码
自动安装罪行版本的sass依赖包 + sass@1.49.8
有版本号就算成功。
nodejs 编译 sass文件的命令
sass 文件名.scss 文件名.css |
编译一个文件 |
sass --watch 文件名.scss:文件名.css |
监听一个文件 |
sass sass文件夹:css文件夹 | 编译一个文件夹 |
sass --watch sass文件夹:css文件夹 | 监听一个文件夹 |
编译演示:
监听演示:
可以到左边$color 的属性一变并保存,右边就也跟着变化,这就是监听。文件夹的编译与监听同理。
sass的基本语法
变量
使用 $变量名称 : 数据 ; 定义变量
使用 $变量名称 调用 执行 变量
代码演示
if语句
使用 @if @else if @else 关键词 定义 if语句
@if 等 之后 没有 ( )
sass中 只有 == 没有 ===
代码演示
for循环
@for $变量 from 数值1 to 数值2
从 数值1 循环至 数值2 但是 不包括 数值2
@for $变量 from 数值1 through 数值2
从 数值1 循环至 数值2 并且 包括 数值2
代码演示
each循环
each循环 专门针对数组的循环
创建数组
sass中的数组 索引下标 是从 1 开始
$变量 : (索引 数据) , (索引 数据) , (索引 数据) , (索引 数据).... ;
each循环数组
@each $变量1 , $变量2 in $数组{ }
$变量1 存储 数组的 索引下标
$变量2 存储 数组的 数值数据
代码演示
混合器
scss混合器 也就是函数
定义
@mixin 混合器名称( 参数1:默认值 , 参数2:默认值 .. ) {
混合器程序
}
调用
@include 混合器名称( 实参1 , 实参2... );
代码演示
选择器嵌套
选择器1{ }
选择器2{
@extend 选择器1 ;
选择器2自己的css样式
}
代码演示
特殊属性嵌套
可以在基本属性中 设定 指定 样式的特殊属性
选择器{
属性:属性值{特殊属性:属性值} ;
}
代码演示
结构嵌套
sass语法中 使用特殊的结构嵌套
表示 父子 后代 兄弟 等选择器
代码演示
文件嵌套
文件的嵌套
在 一个 sass文件中 嵌套导入 其他sass文件的内容
@import '路径' ;
代码演示
如果觉得文章对您有帮助还请点个赞再走吧~~~