最后
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
目前在“CSS预处理器”中，常见的有LESS，SASS等等，我还是比较喜欢SASS的，为什么呢？因为我不会LESS。
Sass(Syntactically Awesome StyleSheets)
1.sass简介
我们来看一下sass的官网简介：
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
Sass是世界上最成熟的，稳定的，功能强大的专业级CSS扩展语言。
哟，sass这口气挺大的啊，厉害了我的哥。
2.sass安装
因为sass依赖ruby环境，所以装sass之前先确认安装了ruby.
不会ruby不要紧，ruby只是sass的依赖环境，所以我们必须要安装它，在使用sass的过程中与ruby关系不大，安装ruby的过程是极其简单的。
- 在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境.
- 安装完ruby之后，在开始菜单中，打开我们的命令行，输入：
ruby -v
如果有ruby的版本号显示出来，就表示ruby安装成功了。
然后我们安装sass，依赖ruby的包管理工具，sass的安装也是非常简单的。直接在命令行中输入：
gem install sass
按回车键确认，等待一段时间的下载安装就会提示你sass安装成功。
检测是否安装成功，在命令行输入：
sass -v
如果有sass的版本号提示，则表明安装成功。
如果要安装beta版本的，可以在命令行中输入
gem install sass --pre
- 最近因为墙的比较厉害，如果你没有安装成功，那么请参考下面的淘宝的RubyGems镜像安装sass，如果成功则忽略。
由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源，先移除默认的https://rubygems.org源，然后添加淘宝的源https://ruby.taobao.org/，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令gem install sass了.
gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources -l
如果输出：
*** CURRENT SOURCES ***
https://ruby.taobao.org
则表示镜像替换成功，下一步
gem install sass
按回车键确认，等待一段时间就会提示你sass安装成功。
如果你熟悉git命令的话，你还可以从sass的Git repository来安装，git的命令行为
git clone git://github.com/nex3/sass.git
cd sass
rake install
升级sass版本的命令行指令是：
gem update sass
·
如果想要安装sass的某一特定版本，命令行指令是：
gem install sass --version=3.3.0
·
如果想要删除sass的某一特定版本，命令行指令是：
gem uninstall sass --version=3.3.0
·
卸载sass,命令行指令是：
gem uninstall sass
·
查看sass版本的命令行指令是：
sass -v
·
查看ruby安装的所有程序包，命令语句是：（这个还挺有用的）
gem list
那么到现在，我们的电脑就有了sass环境了，我们下面来进行sass的学习阶段。
sass有两种后缀的文件：
一种后缀名为.sass。这种类型的文件不使用大括号和分号；
另一种后缀名为.scss。这种和我们平时写的css文件格式差不多，使用大括号和分号。对于我们写css的人员来说，没有任何障碍，很快上手。所以，我们就使用.scss的文件类型来写sass。
例如：我们写了一个style.scss的文件，然后用sass将其编译成style.css，我们在项目依旧使用的是style.css文件。可能你就会说了，为什么要这么麻烦呢，还不如直接写css。那是因为sass强大的魅力以及用sass来写的话，能给我们带来很大的便捷，不信我们就来试试吧。
新建一个文件夹，在下面新建一个style.scss文件：
p {
background: #0982c1;
}
span {
color: #f4f5f5;
}
h1 {
color: #333;
}
h2 {
color: #999;
}
h3 {
color: #f66;
}
h4 {
color: #f69;
}
h5 {
color: #ff9;
}
h6 {
color: #eee;
}
○ 单文件转换命令
sass style.scss style.css
就会在文件夹下生成一个style.css文件了。
○ 如果不想每次修改style.scss后都要执行一次单文件转换命令，我们可以使用
单文件监听命令
sass --watch style.scss:style.css
○ 同理，我们还有文件夹监听命令，可监听一个文件夹下多个文件。
sass --watch sassFileDirectory:cssFileDirectory
○ css文件转成sass/scss文件
sass-convert style.css style.sass
sass-convert style.css style.scss
○ sass 中多值变量
多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象
list
list数据可以通过空格，逗号或者小括号分隔多个值，可用nth($val,$index)取值。关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等，具体可参考sass Functions（搜索List Functions即可）
定义
//一维数据
$px: 5px 10px 20px 30px;
//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);
使用
//sass style
//-------------------------------
$linkColor: #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a{
color:nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}
生成
//css style
//-------------------------------
a{
color:#08c;
}
a:hover{
color:#333;
}
map
map数据以key和value成对出现，其中value又可以是list。格式为：$map:(key1:value1,key2:value2,key3:value3);。可通过map-get($map,$key)取值。关于map数据还有很多其他函数如map-merge($map1,$map2)，map-key($map)，map-values($map)等，具体可参考sass Functions（搜索Map Functions即可）
定义
$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);
使用
//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
生成
//css style
//-------------------------------
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
○ sass 中全局变量
在变量值后面加上!global即为全局变量。这个目前还用不上，不过将会在sass 3.4后的版本中正式应用。目前的sass变量范围饱受诟病，所以才有了这个全局变量。
目前变量机制
在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量)
//sass style
//-------------------------------
$fontSize: 12px;
body{
$fontSize: 14px;
font-size:$fontSize;
}
p{
font-size:$fontSize;
}
生成
//css style
//-------------------------------
body{
font-size:14px;
}
p{
font-size:14px;
}
启用global之后的机制
请注意，这个目前还无法使用，所以样式不是真实解析出来的。
//sass style
//-------------------------------
$fontSize: 12px;
$color: #333;
body{
$fontSize: 14px;
$color： #fff !global;
font-size:$fontSize;
color:$color;
}
p{
font-size:$fontSize;
color:$color;
}
生成
//css style
//-------------------------------
body{
font-size:14px;
color:#fff;
}
p{
font-size:12px;
color:#fff;
}
这里设置了两个变量，然后在body里面重新设置了下，有点不同的是对于$color变量，我们设置了!global。通过编译后的css可以看到font-size取值不同，而color取值相同。与上面的机制对比就会发现默认在选择器里面的变量为局部变量，而只有设置了!global之后才会成为全局变量。
关于变量的详细分析请查阅sass揭秘之变量
嵌套（Nesting）
sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。
选择器嵌套
所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。
在选择器嵌套中，可以使用&表示父元素选择器
这个就不写demo了。
属性嵌套
所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。拿个官网的实例看下：
//sass style
//-------------------------------
.fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}
生成
//css style
//-------------------------------
.fakeshadow {
border-style: solid;
border-left-width: 4px;
border-left-color: #888;
border-right-width: 2px;
border-right-color: #ccc;
}
当然，这只是一个例子用来描述属性嵌套，实际中，关于border的样式我们肯定不会这么去写。
@at-root
sass3.3.0中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。
普通跳出嵌套
关于sass中注释中有中文编译就报错的解决：
在sass文件开头加上@charset "UTF-8";
//没有跳出
.parent-1 {
color:#f00;
.child {
width:100px;
}
}
//多个选择器跳出
.parent-3 {
background:#f00;
@at-root {
.child1 {
width:300px;
}
.child2 {
width:400px;
}
}
}
@at-root(without:...)和@at-root(with:...)
默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support，因为@support目前还无法广泛使用，所以在此不表）。我们默认的@at-root其实就是@at-root (without:rule)。
//sass style
//-------------------------------
//跳出父级元素嵌套
@media print {
.parent1{
color:#f00;
@at-root .child1 {
width:200px;
}
}
}
//跳出media嵌套，父级有效
@media print {
.parent2{
color:#f00;
@at-root (without: media) {
.child2 {
width:200px;
}
}
}
}
//跳出media和父级
@media print {
.parent3{
color:#f00;
@at-root (without: all) {
.child3 {
width:200px;
}
}
}
}
生成
//-------------------------------
@media print {
.parent1 {
color: #f00;
}
.child1 {
width: 200px;
}
}
@media print {
.parent2 {
color: #f00;
}
}
.parent2 .child2 {
width: 200px;
}
@media print {
.parent3 {
color: #f00;
}
}
.child3 {
width: 200px;
}
@at-root与&配合使用
//sass style
//-------------------------------
.child{
@at-root .parent &{
color:#f00;
}
}
生成
//css style
//-------------------------------
.parent .child {
color: #f00;
}
应用于@keyframe
如果说要体现sass的优势，我想这个最能体现了。
相比于之前在css中使用@keyframe来定义动画，然后在元素中调用，如果一个文件中@keyframe比较多的话，在我们想要调用动画的时候，动画与元素之间的关联性比较差。
我们结合@at-root的话，就会带来不一样的效果。
//sass style
//-------------------------------
.demo {
…
animation: motion 3s infinite;
@at-root {
@keyframes motion {
…
}
}
}
每一个元素的动画样式都可以写在里面
生成
//-------------------------------
.demo {
…
animation: motion 3s infinite;
}
@keyframes motion {
…
}
最后
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
t {
.parent3 {
color: #f00;
}
}
.child3 {
width: 200px;
}
@at-root与&配合使用
//sass style
//-------------------------------
.child{
@at-root .parent &{
color:#f00;
}
}
生成
//css style
//-------------------------------
.parent .child {
color: #f00;
}
应用于@keyframe
如果说要体现sass的优势，我想这个最能体现了。
相比于之前在css中使用@keyframe来定义动画，然后在元素中调用，如果一个文件中@keyframe比较多的话，在我们想要调用动画的时候，动画与元素之间的关联性比较差。
我们结合@at-root的话，就会带来不一样的效果。
//sass style
//-------------------------------
.demo {
…
animation: motion 3s infinite;
@at-root {
@keyframes motion {
…
}
}
}
每一个元素的动画样式都可以写在里面
生成
//-------------------------------
.demo {
…
animation: motion 3s infinite;
}
@keyframes motion {
…
}
最后
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-PAaew2r1-1715704710499)]
扫一扫
608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
