一、概念

1.Sass是什么？

Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言
Sass 是一个 CSS 预处理器
Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。
Sass 完全兼容所有版本的 CSS
Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性
Sass 生成良好格式化的 CSS 代码，易于组织和维护
Sass 文件后缀为 .scss

2.Sass的特点

兼容CSS：Sass完全兼容所有版本的CSS，可以无缝地使用任何可用的CSS库
特性丰富：Sass拥有比其他任何CSS扩展语言更多的功能和特性
成熟：Sass已经经过其核心团队超过13年的精心打造
行业认可：一次又一次地，行业把Sass作为首选CSS扩展语言
社区庞大：数家科技企业和成百上千名开发者为Sass提供支持
框架：有无数的框架使用Sass构建比如Compass、Bourbon 和 Susy

3.为什么使用Sass

css本身语法不够强大重复编码导致代码量大无法实现复用也不方便维护
Sass引入了合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性

二、Sass语法格式

1.SCSS（Sassy CSS）:

仅在 CSS3 语法的基础上进行拓展，所有CSS3 语法在 SCSS 中通用，同时加入 Sass 的特色功能
支持大多数 CSS hacks 写法及浏览器前缀写法 (vendor-specific syntax)和早期的 IE 滤镜写法
以 .scss 作为拓展名

2. Sass（Indented Sass）：

是最早的 Sass 语法格式被称为缩进格式通常简称 "Sass" 是一种简化格式
使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性
也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式
以 .sass 作为拓展名

三、Sass变量

1.变量声明：

可把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值
使用 $ 符号来标识变量
以$开头，字母数字下划线 - 组成但不能以数字开头
变量使用前必须声明
变量可以存储：字符串、数字、颜色值、布尔值、列表、null 值

语法：

$variablename:value;

实例：

/* 定义变量 */
$bgc1: yellow;
$color1: #123456;
/* 使用变量 */
.box2 {width: 200px;height: 200px;background-color: $bgc1;color:$color1
}

2.作用域:

全局变量：没有被包含在任意的选择器{}中的变量称为全局变量任意地方可使用
局部变量：有被包含在任意的选择器{}中的变量称为局部变量当前{}里面去使用
内层可以使用外层外层不能使用内层的变量
局部变量变为全局变量：变量值后 ;前加 !global

3.!global:

使用 !global 关键词来设置变量是全局的
所有全局变量一般定义在同一个文件如：_globals.scss 然后使用 @include 来包含该文件

4.变量引用：

凡是css属性的标准值可存在的地方，变量就可以使用
css生成时，变量会被它们的值所替代，之后如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变
在声明变量时，变量值也可以引用其他变量
一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值

5.- 与 _

中划线命名的内容和下划线命名的内容是互通的无区别，包括变量、混合器 和 Sass函数 的命名
但是在sass中纯css部分不互通，比如类名、ID或属性名

四、Sass嵌套规则与属性

1.嵌套规则：

将子级选择器放在父级选择器内部

2.父选择器&：

若想要在嵌套的选择器里面使用一个类似 :hover 的伪类用 &
当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换

3.嵌套属性：

有同样前缀的属性名
把属性名从中划线-的地方断开，在根属性后边添加一个冒号: 紧跟一个{ }块，把子属性部分写在这个{ }块中

实例：

.parent {width: 300px;height: 300px;background-color: red;// 父元素选择器&:hover {background-color: yellow;a {color: #fff;}}.fa {$color: yellow;width: 260px;height: 260px;background-color: blue;.sn {width: 100px;height: 100px;background-color: green;}a {text-decoration: none;color: $color;// font-size: 100px;// font-weight: bold;// font-style: italic;// font-family: Georgia, 'Times New Roman', Times, serif; // 属性嵌套font: {size: 100px;weight: bold;style: italic;family: Georgia, 'Times New Roman', Times, serif; }}}
}

五、@import

css的`@import`规则：

允许在一个css文件中导入其他css文件
但只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢

sass的`@import`规则：

在生成css文件时就把相关文件导入进来
这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求
所有在被导入文件中定义的变量和混合器均可在导入文件中使用
不需要指明被导入文件的全名可以省略 .sass 或 .scss 文件后缀

语法：

@import "filename";

六、@mixin 与 @include

1.概念：

通过sass的混合器实现大段类似样式的重用

@mixin 指令允许定义一个可以在整个样式表中重复使用的样式
@include 指令可以将混入（mixin）引入到文档中
混入也还可以包含选择器、属性嵌套，以及父选择器
一个mixin可以被多个地方使用

2.向混入传递变量：

（1）混入可以接收参数可以向混入传递变量(也可直接使用外部变量)

实例：

@mixin box($color1) {color: $color1;
}
.test_color {/* 在使用的时候传入实际的值 */@include box(pink);
}

（2）混入的参数可以定义默认值

实例：

/* 没有传值将使用默认值 */
@mixin box($color1: blue) {color: $color1;
}
.test_color {/* 传值则为红色 */@include box(red);
}
.test_color {/* 未传值使用默认值为蓝色 */@include box();
}

（3）设置可变参数：不能确定一个混入（mixin）或函数（function）使用多少个参数，使用 ...

实例：

@mixin box-shadow($shadows...) {box-shadow: $shadows;
}
.shadows {@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
.shadows1 {@include box-shadow(2px 6px 10px #999);
}

七、extend 与继承

选择器继承是指一个选择器可以继承另一个选择器定义的所有样式
通过 @extend 语法实现
目的是减少重复量复用代码

实例：

.fa {width: 300px;height: 300px;background-color: red;img {width: 100px;height: 100px;}div {display: flex;justify-content: center;align-items: center;.left {flex-shrink: 2;}}&:hover {background-color: red;}
}
section.fa {color: green;
}
.sn {@extend .fa;// 任何跟.fa有关的组合选择器样式也会被.sn以组合选择器的形式继承
}

八、条件判断语句

1. @if

语法：

@if 条件表达式 { 条件判断成功这里的代码就执行 不成功就不执行 }

实例：

$temp: 100;
// temp > 100 ：500px  temp < 100 ：300px  temp = 100 ：400px
header {@if $temp > 100 {// 代码是否执行 条件是否成功 条件判断成功 里面的代码才会被使用width: 500px;}@if $temp < 100 {width: 300px;}@if $temp = 100 {width: 400px;}
}

2. @else if 单分支

语法：

 @if 条件1 {条件1判断成功就执行的代码} @else {条件1判断不成功就执行的代码}

实例：

//  temp > 100：500px  temp<=100：300px
section {@if $temp > 100 {// 条件判断成功 就执行height: 500px;}@else {// 条件判断不成功 就执行height: 300px;}
}

3. @ else 多分支

语法：

  @if 条件1 {条件1判断成功就执行的代码} @else if 条件2 {条件1判断不就继续判断条件2 条件2 判断成功就执行的代码}@else if 条件3 {条件1 和 条件2判断不就继续判断条件3 条件3 判断成功就执行的代码}.....@else {以上所有条件判断不成功就执行的代码}

实例：

// temp > 100 ：500px ； temp < 100 ：300px ； temp = 100 ：400px
footer {@if $temp > 100 {// $temp > 100判断成功就执行line-height: 500px;}@else if $temp < 100 {// $temp > 100判断不成功就继续判断$temp < 100line-height: 300px;}@else {// $temp > 100  和 $temp < 100都判断不成功就执行line-height: 400px;}
}

九、总结

1. 后缀.sass格式

Sass 是由buby语言编写的一款css预处理语言，和html一样有严格的缩进风格
因不使用花括号和分号 不被广为接受
Sass 是一款强化 CSS 的辅助工具，是对 CSS 的扩展，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅
使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目

2. 后缀.scss格式

SCSS是一款css预处理语言，SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能
任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件
SCSS 需要使用分号和花括号而不是换行和缩进
SCSS 对空白符号不敏感，其实就和css3语法一样

3. CSS预处理

css预处理器是用一种专门的语言，进行网页的样式设计，之后在被编译为正常的css文件，以供项目使用
使用css预处理语言的好处：使css更简洁、方便修改、可读性强、适应性强、易于代码的维护

4. CSS和scss的关系

SCSS 和 CSS 写法无差别
把现有的“.css”文件直接修改成“.scss”即可使用

5. .sass和.scss的关系

sass和scss其实是一样的css预处理语言，scss可简单理解是sass的一个升级版本
SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss
sass时代是有严格的缩进规范并且没有‘{}’和‘；’
而scss则和css的规范是一致的

前端基础学习之Sass相关推荐

iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
前端基础学习html部分小结
前端基础学习html部分小结 1 了解知识 1.1 网页的组成 html(Hyper Text Markup Language)指的是超文本标记语言,可以加入图片.声音.动画.多媒体等内容.还可以从一 ...
前端基础学习——JavaScript之BOM模型与DOM模型
前面还有JavaScript基础介绍,有兴趣的朋友可以前往查看前端基础学习--带你夯实JavaScript基础目录一. BOM模型 1.1 BOM模型与DOM模型示意图: 1.2 浏览器窗口中的B ...
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
文章目录 HTML结构一.标签(标记.元素) 二.列表,表格,表单 1.列表 2.图片 3.超链接--实现不同页面的跳转 4.table表格 5.表单1 --收集用户信息给后端input CSS表现 ...
前端基础学习——Vue框架-AJAX的使用
目录一. AJAX基础 1.1.AJAX简介 1.2.第三方数据接口 1.3.AJAX实例 1.4.AJAX的异步特性二. axios框架 2.1.get方式与post方式请求 2.2.axios ...
【安利】前端基础学习资源
最近在边用vue做一些项目/学校的比赛, 边在补一些之前图快而落下的基础知识. 安利一下在这过程中遇到不错的资源: https://yangbo5207.github.io/wutongluo/ 这波 ...
npm 卸载_前端基础学习（一）--npm
****************************npm下载镜像********************** 淘宝 NPM 镜像参考引用:http://npm.taobao.org/ 当前 r ...
前端基础学习：javascript表达式，你知道为什么3+true=4吗？
原始表达式原始表达式是最简单的表达式.它是表达式的最小单元. Javascript中的原始表达式有:常量.直接量.关键字.变量. 1.23 //数字直接量 "hello"//字符 ...
前端基础学习——带你全面掌握HTML语言
目录一. 认识HTML 1.1 HTML简介 1.2.常用主流浏览器 1.3.前端常用开发工具 1.4 HBuilder或HBuilderX的快捷输入 1.4.1 嵌套 > 1.4.2 并列 ...
框架中的左侧菜单关联右侧页面是如何实现的_前端基础学习：Vue2.0实现移动端外卖平台项目，参考旧版饿了么！...
主要依赖基于vue@2.0 使用vue-cli@2.0搭建项目框架使用vue-router@2.1进行页面路由切换使用vue-resource@1.0.1进行http请求获取数据 mock假数据 ...

前端基础学习之Sass

一、概念

1.Sass是什么？

2.Sass的特点

3.为什么使用Sass

二、Sass语法格式

1.SCSS（Sassy CSS）:

2. Sass（Indented Sass）：

三、Sass变量

1.变量声明：

语法：

实例：

2.作用域:

3.!global:

4.变量引用：

5.- 与 _

四、Sass嵌套规则与属性

1.嵌套规则：

2.父选择器&：

3.嵌套属性：

五、@import

css的`@import`规则：

sass的`@import`规则：

六、@mixin 与 @include

1.概念：

2.向混入传递变量：

七、extend 与继承

八、条件判断语句

1. @if

2. @else if 单分支

3. @ else 多分支

九、总结

1. 后缀.sass格式

2. 后缀.scss格式

3. CSS预处理

4. CSS和scss的关系

5. .sass和.scss的关系

前端基础学习之Sass相关推荐

最新文章

热门文章

前端基础学习之Sass

一、概念

1.Sass是什么？

2.Sass的特点

3.为什么使用Sass

二、Sass语法格式

1.SCSS（Sassy CSS）:

2. Sass（Indented Sass）：

三、Sass变量

1.变量声明：

语法：

实例：

2.作用域:

3.!global:

4.变量引用：

5.- 与 _

四、Sass嵌套规则与属性

1.嵌套规则：

2.父选择器&：

3.嵌套属性：

五、@import

css的@import规则：

sass的@import规则：

六、@mixin 与 @include

1.概念：

2.向混入传递变量：

七、extend 与 继承

八、条件判断语句

1. @if

2. @else if 单分支

3. @ else 多分支

九、总结

1. 后缀.sass格式

2. 后缀.scss格式

3. CSS预处理

4. CSS和scss的关系

5. .sass和.scss的关系

前端基础学习之Sass相关推荐

最新文章

热门文章

css的`@import`规则：

sass的`@import`规则：

七、extend 与继承