1. 认识 SASS

2. sass 的编译

3. sass 语法

1. sass 的注释

2. sass 的变量

3. sass 的循环

4. sass 的嵌套

5. sass 的混入 mixin

6. sass 的继承

7. sass 的导入

4. SASS 简图 :

1. 认识 SASS

SASS

+ 一个 css 的预编译语言

+ 也是一个工具, 专门用来 书写 css 的工具

+ 作用: 帮助你快速方便简洁的书写 css

sass 的文件 :

+ 有两种文件都是用来书写 sass 内容的

1. .sass 后缀的文件

2. .scss 后缀的文件

+ 以上两种方式, 在语法和编译上没有区别

+ 唯一的区别是, { } 和分号(  ; )

=> .sass 文件 不允许 出现 { } 和 ;

=> .scss 文件必须要写 { } 和 ;

sass 的引入需要编译后使用

=> 如果直接在 html 文件内引入 .scss 或者 .sass 文件 , 浏览器不识别

+ 因为浏览器不认识 .sass 或者 .scss 文件

+ 需要一个工具把 .sass 和 .scss 文件编译成 .css 文件再次使用

=> 在浏览器内引入的还是 .css 文件

常见的 sass 文件编译方式 :

  1. 使用编辑器插件进行转换

=> VS Code 里面有一个叫做 Easy Sass 的插件

=> 你只要安装了这个插件, 你写完的 .sass 和 .scss 文件会 自动编译 成 .css 文件

=> 缺点: 依赖 VS Code 编辑器

  2. 使用一个叫做 SASS 的全局系统工具来完成转换

=> 可以进行编译, 需要你在命令行通过指令的形式

=> 进行文件的编译

  3. 使用前端的打包构建工具 , 进行配置

=> 在项目打包的时候, 可以使用打包功能内的某些功能来编译 sass 文件

=> 打包工具, 不是专门用来编译 sass 文件的

=> 只是对当前项目进行打包的时候, 可以一起编译打包 sass 文件

sass 工具 :

+ 目的: 为了把 .scss 和 .sass 文件编译成 .css 文件

+ 是一个可以基于 node 的 "软件"(环境 / 工具)

+ 依赖环境

=> 最早依赖 ruby 环境运行的

=> 后来依赖 python 环境运行

=> 现在依赖 node 环境运行

+ sass 工具的下载 :

=> 因为是一个依赖 node 环境运行的工具

=> 因为是一个全局工具

=> 可以使用 npm 下载安装

=> 打开命令行, 目录无所谓

=> 输入指令:

-> win: $   npm install --global sass

-> OS: $ sudo npm install --global sass

+ sass 工具的检测 :

=> 打开命令行, 目录无所谓

=> 输入指令: $   sass --version

+ sass 工具的卸载 :

=> 打开命令行, 目录无所谓

=> 输入指令:

-> win: $   npm uninstall --global sass

-> OS: $ sudo npm uninstall --global sass

sass 工具的作用 :

+ 在命令行通过指令的形式把 .sass 文件或者 .scss 文件转换成 .css 文件

2. sass 的编译

利用我们下载好的全局 sass 工具来编译 .sass 和 .scss 文件

sass 编译工具在编译之后会给出一个 map 文件

作用是映射内容到 sass 文件内

1. 单文件编译 :
=> 使用这个工具编译一个文件 , 把该文件编译成 .css 文件
+ 打开命令行, 切换目录到你要编译的 sass 文件的目录结构
+ 输入指令: $ sass 源文件名称生成的文件名称
$ sass xxx.scss xxx.css
=> 编译成功以后
-> 会得到一个 .css 文件和一个 .css.map 文件
-> .css 文件是为了给你引入页面使用的
-> .map 文件是为了映射到源文件使用的
+ 缺点:
> 一次只能编译一个文件
源文件每次修改都需要重新编译
2. 单文件实时编译 :
+ 打开命令行, 目录切换到你要编译的 sass 文件的目录
+ 输入指令: $ sass --watch 源文件名称:生成的文件名称
$ sass --watch xxx.scss:xxx.css
+ 缺点: 一个命令行只能监控一个文件实时编译

3. 文件夹实时编译 :

+ 打开命令行, 切换目录到你要编译的 sass 文件夹 所在的目录

+ 输入指令: $ sass --watch 要编译的源文件夹名称:生成后的文件夹名称

3. sass 语法

1. sass 的注释

在 sass 中注释分成三种 :

// 1. 单行注释
// 注释一行代码
// 特点 : 在编译的时候不会保留
div {// 这个是设置 div 的宽度width: 100px;// 这个是 弹性盒子display: flex;
}
/*2. 多行注释+ 可以注释多行代码+ 特点 : 在编译的时候会保留在打包的时候, 不会保留
*/
/*!3. 强力注释+ 可以注释多行代码+ 和多行注释是一个道理+ 在编译的时候会保留+ 在打包的时候, 也会保留
*/
/*!@author@date...
*/

2. sass 的变量

+ 在 sass 内可以 定义变量

+ 来存储一些值

变量的定义 :

=> 语法: $名字: 值;

=> 注意:

-> $ 是名字的一部分 , 不是关键字

-> 没有等于号, 而是冒号 ( : )

-> 值不管是什么, 不需要引号

=> 定义的变量是不会被解析出来的

-> 只有你使用这个变量的时候

-> 会直接把值解析出来
// 0.定义变量
$bg_color: skyblue;
$b: 1px solid #333;
$n: 10;
变量的使用 :

=> 在值的位置使用 :

-> 直接使用变量就可以了

-> 记得 $ 是名字的一部分

=> 在选择器的位置使用 :

+ li:nth-child(变量)

+ div.变量 { }

-> 不能直接使用

+ 在变量的外面包裹一个井号大括号

-> 需要使用变量, 需要写 #{ 变量 }

+ li:nth-child(#{ 变量 })

+ div.#{ 变量 }

=> 表示这里是一个变量

3. sass 的循环

循环1: @for from to 循环

+ 语法: @for 变量 from 开始数字 to 结束数字 { 内容 }

+ 变量就表示从开始数字循环到结束数字的每一个内容

+ 注意: 包含开始数字, 不包含结束数字

循环2: @for from through 循环

+ 语法: @for 变量 from 开始数字 through 结束数字 { 内容 }

+ 变量就表示从开始数字循环到结束数字的每一个内容

+ 注意: 包含开始数字, 也包含结束数字

循环3: @each 循环

+ 主要作用是用来遍历数组的

+ sass 如何定义一个数组

=> 语法: $变量: 值1, 值2, 值3, ...;

+ 循环语法: @each 变量 in 数组 { }

+ 变量就表示数组中的每一个值

4. sass 的嵌套

+ 可以把 css 写的像 html 一样有层级结构

+ 让你和 html 结构一样的书写 css

1. 后代嵌套

+ 直接在一个规则集内书写后代规则集就可以了

+ 可以直接嵌套选择器, 也可以嵌套后代选择器

2. 子代嵌套

+ 在一个规则集内书写第二个规则集的时候书写一个 >

3. 连接符嵌套

+ 一般用在伪类和伪元素选择器的时候

+ 需要在样式集内书写伪类或者伪元素嵌套的时候

=> 书写一个 & 连接符

4. 属性嵌套

+ 必须要可以嵌套的属性才能使用这个语法
+ 可以嵌套的属性:
=> 属性名中带有中划线 - 的样式
  => margin-left
  => padding-top
  => background-color
+ 语法:
=> 书写完毕属性值, 直接书写 { } 去写单独的内容
+ 嵌套方式
  => background: {
    color: red;
    position: 100px 100px;
    ...
  };
  + 扩展:
  => 有一个中划线, 就可以嵌套一次

认识 border 复合了哪几个属性
border-top
border-right
border-left
border-bottom

以 border-top 为例, 复合了哪几个属性
border-top-color
border-top-width
border-top-style

5. sass 的混入 mixin

+ 混入也叫作混合器, 在其他语言里也叫作 "函数"

+ 定义混合器和使用混合器

1. 基本混合器的定义和使用
+ 定义:
=> 语法 : @mixin 混合器名称 { 混合器样式 }
=> 注意: 混合器在不使用的时候, 不会被编译, 使用的时候, 直接编译 { } 内的代码
+ 使用:
=> 语法: @include 混合器名称;
=> 会把混合器内的代码直接使用
+ 缺点:
  => 不够灵活, 定义都是准确的几个属性
  => 全部使用位置都是一模一样的
  => 不能进行差异化定制

2. 定义带有参数的混合器
+ 语法: @mixin 混合器名称(变量1, 变量2, ...) { }
=> 定义带有参数的混合器, 在 {} 内可以直接使用变量
+ 使用:
=> @include 混合器名称(值1, 值2, ...);
=> 注意: 必须所有参数都传递, 你写了多少个形参, 就得写多少个实参
+ 缺点:
=> 每次使用都必须要完全传递参数

3. 定义带有参数默认值的混合器

+ 定义:

=> 语法: @mixin 混合器名称(变量1:默认值, 变量2:默认值, ...) { }

=> 我们的参数是带有默认值的

=> 当你不传递内容的时候, 会使用默认值

+ 使用:

=> 方式1: @include 混合器名称(实参1, 实参2);

按照顺序传递或者不传递参数,可以不全部填写, 没有写的会有默认值使用

=> 方式2: @include 混合器名称(变量1: 值);

指定给某一个形参赋值, 剩下的使用默认值

6. sass 的继承

+ 让一个规则集使用另一个规则集的样式内容

+ 语法: @extend 另一个规则集的选择器;

7. sass 的导入

+ 把另一个 scss 文件导入到自己文件内使用

+ 一般来说, 最基础的模块要分开两个导入

1. base.scss 文件

2. variable.scss 文件 , 变量文件

3. mixin.scss 文件 , 混合器文件

+ 语法 : @import "scss 文件地址";

=> 导入以后, 就可以使用该文件内的内容

4. SASS 简图 :

SASS _ 入门版相关推荐

ide怎么设置方法中间加一道横线_像IDE那样使用VIM（快速入门版）
Vim是一款文本编辑工具,她本身并无像 VSCode 或 Jetbrain系列那样的功能,例如:代码的诊断,重构分析等IDE功能. 但这并不意味着 :Vim不能拥有IDE的功能. 如何拥有呢? 需要 ...
屏通触摸屏软件操作手册_屏通人机界面软件操作手册快速入门版.pdf
屏通人机界面软件操作手册快速入门版 PM Designer 触控大师屏通人机界面软件操作手册快速入门版 0 目录第一章 PM Designer触控大师软件简介3 1.1 软件功能介 ...
python写因子策略_单因子策略进阶版本篇延续（第三期：单因子策略入门版），介绍如何使用优矿平台编写策略代码，以股息率作为择股条件，自动筛选出股息率前十名的股... - 雪球...
来源:雪球App,作者: 爱喝豆汁的投资者,(https://xueqiu.com/2680567071/130470562) 本篇延续(第三期:单因子策略入门版),介绍如何使用优矿平台编写策略代码, ...
安卓系统入门_阉割版安卓系统发布旧手机能够远离系统卡顿吗？
多年来,安卓系统用久了就会卡顿,这是一项铁律,也是困扰消费者的一大顽疾.相比之下,一台苹果手机用3年或4年也不会卡顿,而安卓系统用2年之后就会感受到卡顿.正因于此,卡顿也是安卓系统公认的硬伤. 最近两 ...
两直线平行交叉相乘_人教版初中数学七年级下册平行线判定2公开课优质课课件教案视频...
平行线的判定一.教材分析 1.主要内容及其地位本节的主要内容是平行线的判定公理及两个判定定理,由分析画平行线的过程得知,画平行线实际上就是画相等的同位角,由此得到平行线的判定公理--&q ...
JAVA编程习题及答案_完美版
JAVA编程习题及答案_完美版原创 lingwu7 最后发布于2017-08-15 20:01:12 阅读数 10796 收藏发布于2017-08-15 20:01:12 版权声明:本文为博主原创 ...
机器学习实现计算不规则图形面积_人教版小学数学五年级上册解决问题（不规则图形的面积）公开课优质课课件教案视频...
1 小数乘法PPT课件教案下载_小学数学人教版五年级上册师梦圆www.shimengyuan.com小数乘整数PPT课件教案下载_小学数学人教版五年级上册师梦圆www.shimengyuan.co ...
五元一次方程组计算器_人教版初中数学七年级下册列一元一次不等式解实际问题公开课优质课课件教案视频...
9.2 一元一次不等式的应用(1)教案设计一.教学目标 1.知识与技能目标 :掌握用一元一次不等式解决实际问题的步骤,能够根据具体问题中的数量关系列出一元一次不等式组解决简单的实际问题,并能根据具体 ...
语言ppt课件猜拳_人教版初中数学七年级下册阅读与思考　一次方程组的古今表示及解法公开课优质课课件教案视频...
一次方程组的古今表示教学设计一.教学目标 (一)知识与技能能掌握解二元一次方程组的步骤并能灵活应用． (二)过程与方法 1.通过认识古代的算筹与高中代数的矩阵,增强学生的分析能力,会分析不含未知数 ...

SASS _ 入门版

1. 认识 SASS

2. sass 的编译

3. sass 语法

1. sass 的注释

2. sass 的变量

3. sass 的循环

4. sass 的嵌套

5. sass 的混入 mixin

6. sass 的继承

7. sass 的导入

4. SASS 简图 :

SASS _ 入门版相关推荐

最新文章

热门文章

SASS _ 入门版

1. 认识 SASS

2. sass 的编译

3. sass 语法

1. sass 的 注释

2. sass 的 变量

3. sass 的 循环

4. sass 的 嵌套

5. sass 的 混入 mixin

6. sass 的 继承

7. sass 的 导入

4. SASS 简图 :

SASS _ 入门版相关推荐

最新文章

热门文章

1. sass 的注释

2. sass 的变量

3. sass 的循环

4. sass 的嵌套

5. sass 的混入 mixin

6. sass 的继承

7. sass 的导入