CSS预处理器 Sass/Scss

文章目录

介绍
- Sass是什么
- Scss是什么
- Scss 与 Sass异同
- 为什么使用 Sass?
Sass 安装
- NPM 安装(推荐使用)
- Windows 上安装
- Mac OS X (Homebrew)安装
Sass 转化为 CSS
- 转化步骤
- 自动编译
编译输出的CSS格式
- :nested：嵌套（默认格式）
- :compact：紧凑
- :expanded：扩展
- :compressed：压缩
Sass 语法
- 注释
- 变量`$`
- 嵌套
- - 1. 选择器嵌套
  - 2. 父选择器 `&`
  - 3. 属性嵌套
- 插值语句 `#{}`
- 数据类型
- 运算
- - 数字运算
  - 颜色值运算
  - 字符串运算
  - 布尔运算
  - 数组运算
- 混合-Mixins
- 控制语句
- - @if
  - @for
  - @each
  - @while
- Partials与@import
- - @import
  - Sass 导入文件
  - 局部文件(Partial)
- 函数
- Sass 颜色函数
- - Sass 颜色设置
- @media
- 继承（@extend）
- 警告与错误
了解更多

介绍

Sass是什么

Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。Sass 是一个 CSS 预处理器，是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。
Sass 生成良好格式化的 CSS 代码，易于组织和维护。
Sass 文件后缀为 . s c s s \color{red}{.scss} .scss。

Scss是什么

Scss 是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集。说白了Scss就是Sass的升级版，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法。

所有在 CSS 中正常工作的代码也能在 Scss 中正常工作。也就是说，对于一个 Sass 用户，只需要理解 Sass 扩展部分如何工作的，就能完全理解 Scss。大部分扩展，例如变量、parent references 和指令都是一致的；唯一不同的是，SCSS 需要使用分号和花括号而不是换行和缩进 \color{red}{需要使用分号和花括号而不是换行和缩进} 需要使用分号和花括号而不是换行和缩进。

Scss 与 Sass异同

Sass 和 Scss 其实就是同一种东西，我们平时都称之为 Sass，两者之间不同之处主要有以下两点：

文件扩展名不同：Sass 是以“.sass”后缀为扩展名，而 Scss 是以“.scss”后缀为扩展名。
语法书写方式不同：Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(

CSS预处理器 Sass/Scss相关推荐
1. css预处理器sass/scss入门
  sass/scss入门一.css预处理器是什么? 二.为什么要用css预处理器? 三.sass.less.stylus的区别? 四.sass与scss 五.sass安装六.sass常见用法 6.1 ...
2. CSS预处理器sass和less
  文章目录 CSS预处理器什么是CSS预处理器 Sass和LESS背景介绍 Sass背景介绍 LESS的背景介绍 Sass 安装Sass 下载Ruby安装文件安装Ruby 安装Sass 编译Sass ...
3. 前端CSS预处理器Sass
  前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
4. css预处理器sass使用教程(多图预警)
  css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
5. CSS预处理器——Sass、LESS和Stylus区别及联系
  一.什么是CSS预处器 CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作.通俗的说 ...
6. CSS预处理器-Sass、Less和Stylus-介绍和使用
  发挥CSS预处器的作用是一种很有挑战性的事情.CSS预处器有不同的语言,有不同的语法和功能. 在这篇文章中,我们将介绍三种不同CSS预处器的蛮量.功能以及他们的好处--sass.less 和stylu ...
7. css预处理器 sass和stylus对比以及常用功能
  在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...
8. 您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
  2019独角兽企业重金招聘Python工程师标准>>> CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS ...
9. 初识css预处理器：Sass、LESS
  这篇文章是初步介绍css预处理的,详细学习请移步官网~ sass中文文档:https://www.sass.hk/docs less中文文档:http://lesscss.cn/ 什么是css预处理器 ...
最新文章
热门文章

CSS预处理器 Sass/Scss

文章目录

介绍

Sass是什么

Scss是什么

Scss 与 Sass异同

CSS预处理器 Sass/Scss相关推荐

最新文章

热门文章