sass的基本介绍与常用语法

概念

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 '路径' ;

代码演示

 如果觉得文章对您有帮助还请点个赞再走吧~~~