世界上最成熟、最稳定、最强大的专业级CSS扩展语言！

特性：

兼容CSS：Sass完全兼容所有版本的CSS。我们对此严格把控，所以你可以无缝地使用任何可用的CSS库。

特性丰富：Sass拥有比其他任何CSS扩展语言更多的功能和特性。Sass核心团队不懈努力，一直使其保持领先地位。

成熟：Sass已经经过其核心团队超过13年的精心打造。

行业认可：一次又一次地，行业把Sass作为首选CSS扩展语言。

社区庞大：数家科技企业和成百上千名开发者为Sass提供支持。

框架：有无数的框架使用Sass构建。比如Compass，Bourbon，和Susy。

原因：

原生css的不便

书写重复的选择器
修改css属性不方便
css代码重复。比如水平垂直居中、ul三件套
面对一些有规律的css选择器编写，效率不高

基本概念：

sass是对css的一个扩展。通过其提供的变量、嵌套、混合、条件、循环等特性能够极大的提高编写css代码的效率。

sass本质上是一个脚本（编程）语言。有自己的编写语法。编写的代码通过编译后能够转为被浏览器识别的css代码。即sass代码需要转为css代码才能够使用。

作用：能够极大的提高编写css代码的效率。

特点：

支持了很多特性。变量、嵌套、混合、条件等。

社区活跃、资料齐全，学习成本较低。

兼容所有版本的css。即sass文件里可以直接写原生的css代码。

基本使用：

一、通过命令来执行

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）

1、安装ruby（sass的底层实现）

ruby下载地址：
Downloads

安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。

运行cmd，输入 ruby -v 查看ruby版本命令，可测试是否安装成功。

ruby -v
//如安装成功会打印
ruby 2.6.4p104 (2019-08-28 revision 67798) [x64-mingw32]

安装成功后，因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源。

gem update --system //该命令请翻墙一下
gem -v
3.0.3

//删除替换原gem源
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
//打印是否替换成功
gem sources -l
https://gems.ruby-china.com
# 确保只有 gems.ruby-china.com

如果你使用 Gemfile 和 Bundler (例如：Rails 项目)

你可以用 Bundler 的 Downloads。

bundle config mirror.https://rubygems.org https://gems.ruby-china.com

2、安装sass

Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。我们可以使用这个系统来轻松地安装Sass和Compass。要安装最新版本的Sass和Compass，你需要输入下面的命令：

//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass

可通过 sass-v 和 compass -v 测试是否安装成功

sass -v
compass -v

sass常用更新、查看版本、sass命令帮助等命令：

//更新sass
gem update sass//查看sass版本
sass -v//查看sass帮助
sass -h

二、使用vscode中的easy sass插件来使用

1、安装easy sass插件

2、新建以.sass或.scss为后缀的文件，在里面书写sass代码。

.sass是旧版本的sass文件格式
.scss是sass新版本的文件格式

3、easy sass插件会自动将sass文件转为css文件。在页面上引入转换之后的css文件。

4、手动指定转换的css文件保存路径

打开settings.json：并清空
将easy sass的配置代码放入settings.json中

//保存scss代码后自动转为css代码
"easysass.comileAfterSave":ture,
//指定转为什么格式的css代码
"easysass.formats":[//neated:嵌套缩进的css代码expanded:没有缩进的、扩展的css代码compact:简洁格式的css代码compressed:压缩后的css代码{"format":"expanded","extension":".css"},{"format":"compressed","extension":".min.css"}
],
"easysass.targetDir":".css/"

转换后的css代码会放在工作区目录下的css文件夹下，当然可以更改

主要内容

变量

概念：变量可以理解为可以保存一个数据的容器，可以在代码里重复使用

语法：

$变量名：数据；
数据可以是任意css属性的属性值。比如说70px，50%，2rem，1em，vw；还可以是组合属性的数据，比如1px solid red或move 3s

变量名规范：

变量名可以包含数字、字母、-、_
尽量不要以数字开头
多个单词间尽量以-间隔

变量分类：

全局变量：指在scss文件开头定义的变量，文件里任意位置都可以使用
局部变量：定义在某个{}里的变量，局部变量只能在定义时所在的{}里使用

注意：

如果有同名的全局变量和局部变量，那么在局部变量所在{}中，会优先使用局部变量，其他位置会使用全局变量

应用场景：

当页面有个属性值重复被使用的时候，就可以使用变量来处理

嵌套

概念：sass可以支持在css选择器里直接嵌套书写子标签的css代码

作用：让css代码层次结构清晰明了，不会出现父子标签之间的权重问题

语法：

父选择器{css属性：css属性值；子标签选择器{css属性：css属性值；}
}

如果要给父标签设置伪类或伪元素怎么处理？兄弟标签选择器怎么处理？

&：当前选择器

静默注释：

概念：sass额外提供的一种注释，俗称单行注释

语法：//单行注释，而且，在转为css之后会忽略该注释

数学运算：

概念：可以使用数学中的基本运算（加减乘除取余）

注意：

运算符号两边要有空格
%尽量不要和px混算

sass提供的常用快捷数学操作代码（数学函数）：

random（）：返回0~1之间的随机小数
- 配合乘法可以用于生成随机的数据，比如rgb、尺寸等。
round（）：四舍五入
floor（）：向下取整，即获取不大于数字的最接近的整数
ceil（）：向上取整，即获取不小于该数字的最接近的整数
max（）：在多个数之间取最大的数字
min（）：在多个数之间取最小的数字

混合

背景：页面上在处理一些常见操作的时候（比如水平垂直居中，或修改默认样式）时，会出现重复的代码块。

解决：利用sass提供的混合来减少代码块的重复编写

概念：混合即一段代码的容器，当页面需要使用到该段代码时，直接引用该混合即可。可以重复使用，而无需重复编写。

基础语法：

1、定义混合：

@mixin 混合名{包含的一段scss代码
}

2、使用混合：

@include 混合名;

例：文字溢出

@mixin text-overflow{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
}

在引用混合的地方会自动将混合里的scss代码放入到引用的位置。即使用了一次混合里的scss代码。

混合需先定义再使用，不能在定义之前使用。

混合名规范：

见词达义：尽量混合名能够表达该混合的作用

混合参数：指我们可以给混合提供数据，在混合中使用。这样可以达到定制混合的目的。混合参数是指混合定义时圆括号里的变量

1、定义混合，添加参数：

@mixin 混合名（$变量名：默认值）{$变量的数据来自于使用混合时用户传入的数据，如果没有传入数据，则使用默认值$变量只能在混合里使用
}

2、使用混合时，传入数据：

@include 混合名（数据）;//该数据会自动赋给混合里的$变量

应用场景：

scss代码中有重复的代码块。

默认值

条件判断

概念：scss可以对某个数据进行判断，根据判断的结果不同可以使用不同的样式

语法：

@if 判断条件1{判断条件1成立时会使用的样式}@else if 判断条件2{判断条件1不成立同时判断条件2不成立时会使用的样式}@else {判断条件都不成立时会使用的样式
}

scss中常用的判断符号（关系运算符）：

==：判断是否等于某个数据
!=:判断是否不等于某个数据
>:大于
<:小于
>=:大于或等于
<=:小于或等于

注意：无论有多少个else if，最终if、else if、else只会执行其中一个

循环

概念：循环本身是指重复的做某件事情。

在程序中，循环指的是某些代码在重复的使用。我们可以利用sass所提供的的for循环来帮助我们减少一段代码重复的编写。

语法：

for循环的两种使用方式：

1、不包含结束数字

@for $变量 form 开始数字 to 结束数字{//需要重复编写的代码
}

例：

 @for $i form 1 to 10{.item-#{$i}{width:20px;}
}

2、不包含结束数字

@for $变量 form 开始数字 through 结束数字{//需要重复编写的代码
}

sass的安装、概念和使用相关推荐

01 【Sass的安装使用】
Sass的安装使用 1.介绍 1.1 CSS预处理技术,及种类介绍什么是css预处理技术 CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 ...
SASS的安装与使用（windows系统）
Sass官方文档安装一.安装Ruby Sass是用Ruby语言写的,但是两者的语法没有关系,所以学 Sass 不用学 Ruby,只是必须先安装Ruby,然后再安装Sass. Linux和Mac已自 ...
史上最简单的，最直接的sass的安装教程
废话不多说直接进入主题: 1.sass基于ruby,所以安装sass前下载Ruby. 2.下载后直接安装,在这里注意选择把它添加到环境变量中,Add Ruby executables to you ...
sass教程之--sass的安装
Sass 安装本章节我们主要介绍 Sass 的安装与使用. NPM 安装我们可以使用 npm(NPM 使用介绍)来安装 Sass. npm install -g sass 注:国内 npm 建议使 ...
【sass】安装及入门教程
文章目录一.基本介绍二.安装教程三.编译教程 3.1.单次编译 3.2.实时编译 3.3.实时监控目录一.基本介绍 sass是世界上最好的css扩展语言.在正常的编写css的基础上,增加了很多 ...
SCv3000和SCv3020存储安装概念
1.SCv3000和SCv3020存储系统 2.前端连接 3.带有 Fibre Channel 前端连接的 SCv3000 和 SCv3020 存储系统 4.带有 iSCSI 前端连接的 SCv300 ...
SASS的一些使用体会（安装-配置-开启firefox的调试）
对CSS预处理这个东西的看法,基本就是2种第一种:不就是css吗,我会写就好了搞得那么复杂干嘛第二种:感觉这个东西非常有必要,它规范了代码,使开发变得更轻松好吧以前我是第一种,并且觉得又要配置环 ...
rub、sass和compass的安装
长话短说,直接进入正题. [ruby安装] ruby下载网址:http://rubyinstaller.org/downloads/ 选择适合自己电脑的版本: 下载完成后直接双击安装,记得勾选加入环境 ...
Mac环境下安装Sass
步骤一:安装ruby (1)安装 RVM 命令行窗口依次运行以下命令 ①安装: $curl -L https://get.rvm.io | bash -s stable ②载入rvm环境: $sour ...
Sass 安装到使用
sass学习 Sass 可以通过以下三种方式使用:作为命令行工具:作为独立的 Ruby 模块 (Ruby module):或者作为 Rack-enabled 框架的插件(例如 Ruby on Rail ...

sass的安装、概念和使用