前言:
当前姐妹们对“scsscss”都比较注重,我们都想要分析一些“scsscss”的相关内容。那么小编同时在网上汇集了一些有关“scsscss””的相关内容,希望各位老铁们能喜欢,兄弟们快快来学习一下吧!一、Sass概况
今天来聊聊sass吧,之前用了很久的less,刚开始接触的时候感觉这东西就是个神器。
写CSS时间长了自然就能发现CSS在书写的时候的不足之处,不能嵌套,没有变量,更加不能像js那样用循环自动生成之类的,这些问题全部都被less解决掉了。
less加入了变量,加入了嵌套式写法,还有一大堆好用的功能,在这里就不多说了,今天要说的是sass。其实刚接触less的时候就知道有sass这个东西了,但是那时候的sass很奇怪,写法过于新颖,大家感受一下:
bodymargin: 0padding: 0height: 20pxwidth: 30px...
看出来了么? 对的,sass早期的时候有规定书写格式,不这么写它就给你报错,这个在习惯上来说一时间是比较难接受的,特别是我们这种写CSS好几年的人来说更加如此,而后面sass的升级版又把它强加的书写格式去掉了可能就是考虑到这方面。
第二个不能接受sass的点就是安装比较麻烦,从事前端开发的人员,电脑上基本上是少不了node的,less可以直接用npm包管理器进行安装,这就很方便了,而sass就相对麻烦一些了,还需要先安装ruby。 因为sass是基rub语言开发的(mac系统自带ruby,后来才知道)从过程来说就多了一步。另外一点,less可以作为一个js文件直接在客户端运行,这无疑又拉近了和前端开发者之间的距离,所以早期的时候大家都比较倾向于less。
Bootstrap也是这么选择的,Bootstrap 3.0就是用less进行开发的。而对于前几年来说,less也足以满足大家的需求了。
但是经过这几年的发展,大家的技术在进步,需求也在变得更加复杂,这时候less就显得有点力不从心了,并不是它不好了,只是对于工作几年的中高级程序员来说,大家需要一个功能更加强大的CSS预处理器。
于是这时候回头一看,sass一直都在我们身边,看看它的文档,虽然写得有点乱,但是各方面都比较符合我们的需求,越看越顺眼了。而且现在的sass也升级了,做到了完全兼容CSS3, 在CSS基础上增加变量、嵌套、混合等功能。可以通过函数进行颜色值与属性值的运算,提供控制指令等高级功能,甚至可以自定义输出格式。
另外一点,随着各大框架的推行,less和sass的编译工作变得越来越简单,安装个loader就好了,不需要全局安装编译器了。另外很多编辑器也自带编译,这样一来,less前期的那些优势荡然无存。那,接下来,跟我一起来看看sass吧。
通过前面的介绍,我想大家已经知道了,sass是一个CSS预处理语言。 在这里要明确一个概念,什么是CSS预处理语言呢?
简单来说CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
再通俗一点,就像是文言文和白话文。 文言文几个字,翻译成白话文就是一片文章。当然在这里只是一个类比。
基本概念理解清楚了,sass有这么多好用的功能,但是我要如何把sass用到我的项目当中呢?请往下看。
二、Sass的安装
前面已经提到了,Sass是用Ruby语言开发的,所以在安装Sass之前,需要先安装Ruby。
这里要注意几点:
Mac系统是自带Ruby的,所以就不需要再次安装啦,所以下面安装Ruby的方法也只适用于Windows系统。
一些基于插件的编辑器,比如vsCode、Atom之类的,不需要安装sass,直接安装插件就可以进行编译。
Windows下安装Sass首先需要安装Ruby, 先从官网下载Ruby并安装。安装的过程中请注意勾选 Add Ruby executables to your PATH添加到系统环境变量。如下图:
Windows下安装Ruby示例图
安装完成之后需要测试安装有没有成功,在命令行工具(cmd)里面运行以下下命令:
rubu -v 如果安装成功会打印下面这句话: ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]
Ruby安装好了之后,我们就可以利用Ruby的包管理工具gem安装Sass了,同样还是在Cmd里运行以下命令:
gem install sass
安装完成之后,还是老办法检查以下安装是否成功:
sass -v
如果安装成功,则会打印以下代码:
Ruby Sass 3.7.4
看到这里,我们基本上就可以顺利的玩耍啦~ 附上一些其他相关命令~
更新sass:
gem update sass
查看sass版本:
sass -v
查看sass帮助:
sass -h
现在我们写去一点sass代码吧:
body{margin: 0;background: #fefefe;}.box{width: 100px;height: 100px;border: 1px solid #899;}
你没有看错,以上看起来和CSS简直一模一样的代码其实就是sass代码!是不是很神奇?当然这段代码编译使用过后的效果当然也就和CSS一样啦。看到这里,我想说的是,大家学习sass千万不要有任何的负担,因为安装好sass之后,sass就可以和CSS一样写,如果你现在还没有任何的CSS预处理语言的编写经验,你完全可以像以前写CSS那样来写代码。如果你在看这篇文章的过程当中,一不小心学会了一招半式的,那就是提升了。
不过这里有一点需要提一下,sass有两个文件后缀,一个是.sass 一个是.scss scss是sass的升级版,他们都统称Sass 只是文件后缀不一样。然后.sass后缀的文件是固定代码格式的,就是在一开始我提到的那样写:去掉“{}”,去掉“;” 这让代码看起来有点怪,不过习惯就好了。 而.scss后缀结尾的文件就比较友好了,怎么写都可以,而且它是升级版,所以我们以后在使用的过程中就用.scss就好了
写好了sass代码之后,我们就需要把sass编译成CSS然后应用到我们的项目当中了。这个过程就可以称为编译了。
三、Sass 编译
sass编译有很多种方式,如命令行编译模式、编辑器自动编译、编译软件koala、sass-loader等。
先来看第一种:命令行编译
刚才我在test文件夹里面已经建立了一个style.scss文件,现在我需要把这个文件编译成CSS文件,那么我可以先用命令行工具进入这个文件夹 “cd”就是进入某个文件夹的命令,后面跟上你电脑上文件夹的路径就可以了:
cd test
进入文件夹之后再使用sass的编译命令:
sass input.scss output.css
编译成功不会有任何的提示,但是文件夹里面马上就会出现output.css这个文件。
这个input是原本的scss文件的名称,然后output是编译出来之后的CSS文件的名称,这个名称大家可以随意,保持基本命名规则就可以了。
利用命令还可以实时监测某个文件,当这个文件发生变化的时候,自动完成编译过程。
//单文件监听命令
sass --watch input.scss:output.css
在监听成功之后会打印以下代码:
>>> Sass is watching for changes. Press Ctrl-C to stop.
根据提示,这时候按Ctrl + C可以停止这个命令。
在监听的过程中如果文件发生改变,并且自动编译成功则会打印以下代码:
>>> Change detected to: tests.scsswrite output.csswrite output.css.map
利用命令还可以实时监测某个文件夹,这个文件夹下的所有scss文件都会被监听。
sass --watch targetFolder:outputFolder
在监听成功之后会打印以下代码:
>>> Sass is watching for changes. Press Ctrl-C to stop.
前面的targetFolder是要监听的目标文件夹,后面的outputFolder是要输出的文件夹。 比如我想把CSS文件夹里的scss文件编译到style文件夹里,就可以这样写:
sass --watch css:style
在这里要注意一点:这个时候你需要在CSS和style文件夹的共同父级文件夹里面才能开启这个功能,否则会报错。
在编译的时候,还可以配合编译选项,用于调整输出文件。
sass提供四种编译格式:
nestedexpandedcompactcompressed
看看区别:
//未编译样式
.box {width: 300px;height: 400px;&-title {height: 30px;line-height: 30px;}}
nested 编译排版格式
/*命令行内容*/
sass style.scss:style.css --style nested
/*编译过后样式*/
.box {width: 300px;height: 400px; }.box-title {height: 30px;line-height: 30px; }
expanded 编译排版格式
/*命令行内容*/
sass style.scss:style.css --style expanded
/*编译过后样式*/
.box {width: 300px;height: 400px;}.box-title {height: 30px;line-height: 30px;}
compact 编译排版格式
/*命令行内容*/
sass style.scss:style.css --style compact
/*编译过后样式*/
.box { width: 300px; height: 400px; }.box-title { height: 30px; line-height: 30px; }
compressed 编译排版格式
/*命令行内容*/
sass style.scss:style.css --style compressed
/*编译过后样式*/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}
不同的编译格式得到的代码其实是一样的,只是排版格式不同,大家看情况去用就好了。我的建议是,开发的时候用expanded格式,比较清楚。当你需要发布你的代码的时候,使用compressed格式,这个格式会让CSS文件相对较小。
第二种,编辑器直接编译
相对于第一种编译方式来说,用编辑器来帮助我们编译者省去了我们在开发过程中的很多操作,比如用cd命令进入某个文件夹,退出文件夹之类的,并且不是所有人都熟悉命令操作方式的。这时候就显得这种编译方式可能会更加好用,我在工作过程中大多数也是用这种方式来进行编译的,来看具体操作吧:
注意!用编辑器编译的基础也是安装Sass,所以Sass的安装过程是必不可少的!!!
既然想要让编辑器帮助我们做事情,那么就需要对编辑器的一些配置进行调整。
来看看 webstorm:
依次打开 setting > tools > file Watchers,界面大致如下图:
打开之后点击左下角的加号,在弹出的界面里选择scss。
选择之后,会弹出一个窗口:
在这个窗口里有两项需要调整,我已经用红框标出来了。
第一项,Program 这里是需要选择编译所用的程序,点击后面的文件夹图标进行选择;
windows电脑在安装Ruby的文件夹里,如果没有修改的话一般是在C盘:
C:/user/username/AppData/Roaming
Mac电脑一般在“usr/local/bin”,在选择文件的窗口里按快捷键:Command + Shift + G,然后输入:usr/local/bin回车,就可以找到对应的文件夹了。
在文件夹里找到一个名字为scss的文件:
第二项,Arguments 这里主要是设置编译参数,比如前面我们提到的四种编译格式就可以加载这里面,具体看前面的图片。
至此,Sass的准备工作我们就做好了,之后我们可以愉快的coding了...
以上是酷仔今日整理的“CSS扩展语言——Sass入门指南”一文,希望为正在学习Web前端的同学提供学习参考。
特殊说明:以上内容资料由开课吧提供!
标签: #scsscss