sass的安装、概念和使用_安装并使用sass

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

特性：

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

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

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

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

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

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

原因：

原生css的不便

1. 书写重复的选择器
2. 修改css属性不方便
3. css代码重复。比如水平垂直居中、ul三件套
4. 面对一些有规律的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 结束数字{
    //需要重复编写的代码 
}