
这几天摸索了SASS+SCSS 的写法,发现有许多的GitHub 专案,使用它进行开发。
自己进行几个专案后,编写速度确实有提升,于是整理出这篇SASS+SCSS 教学,从SASS+SCSS 介绍→ 安装+执行→ 语法SASS教学,进行文章编写。
不敢说可以从入门到进阶,但对SASS 主观念的掌握,应该是没问题的,本篇文章内容
- SASS+SCSS介绍
- 安装+执行
- 嵌套
- 引用父选择器&
- 变量
- 引入
- 混合
- 继承
- 操作符
- 结论
1. SASS+SCSS 介绍
SASS是一个成熟且稳定的CSS预处理器,除了把普通的CSS语法强化,它还使用了SassScript增加了许多功能,如:变量、嵌套、混合、导入等…功能,在一般专案的编写或是中大型的专案上,都可以编写的更加快速。
SASS 会编译(compiled)程式码,转成一般CSS 形式,让浏览器可以解读输出,把页面呈现出来。
主要包含两种写法:分别是旧版的SASS(缩排语法,副档名.sass,使用缩排来区分程式码块,与Haml类似)和新版的SCSS(块语法,副档名.scss,使用和CSS相同方式,用大括号分开)。
/** 一般 css 写法 **/
.nav{
background: #ccc;
}
.nav li {
display: inline-block;
}
.nav li a{
display: block;
padding: 15px;
text-decoration: none;
color: #000;
}
.nav li img{
width: 100%;
}
SASS写法:采用「缩进语法(TAB)」的方式,去除了一般CSS的括号、分号等…加快编写流程,有一部分的人喜欢这样的编写方式而采用,如下:
/** sass寫法 **/
.nav
background: #ccc
li
display: inline-block
a
display: block
padding: 15px
text-decoration: none
color: #000
img
width: 100%
SCSS写法:采用「块语法(Block)」,一般从CSS转为SCSS开发比较无痛,保留了括号、分号等…元素,相对于上面的SASS是比较新的编写方式,学习成本比较低,是目前主流的方式,如下:
/** scss寫法 **/
.nav{
background: #ccc;
li {
display: inline;
a {
display: block;
padding: 15px;
text-decoration: none;
color: #000;
}
img {
width: 100%;
}
}
}
看完上面的程式码,会发现SASS 可以协助解决编写CSS 常遇到的几个问题,如:「 重复编写」、「 后续维护」、「 漏写问题」等问题…,然后加快开发流程,如下:
- 父选择器,重复编写:?如要扩充页面样式,就会不断的加上.nav li … 等父级class 名称,比较费工!
- 属性样式,重复编写:常会看到许多CSS 属性,是许多区块都需要用到,在SASS 没出来前,每个区块都需特别写一遍,现在直接引用即可。
- 后续维护:若哪天需要把.nav 这个class 名称更换,就需全部替换,比较麻烦。
- 漏写问题:SASS / SCSS 有条理的节省了许多代码编写,降低漏写的Bug。
2. 安装+执行
安装+执行SASS 的方式有满多种,有使用第三方应用程式的,也有直接安装在本机上的,这边会建议直接安装在本机上,比较一劳永逸,这边列出几种安装方式,如下:
SASS 安装
- 使用Node.js 安装
$ npm install -g sass - 使用Ruby 安装
$ gem install compass - 使用Brew 安装(Mac专用)
$ brew install sass
指令执行完成,基本上就安装好了,若想测试是否安装成功,可以输入 $sass -v 看是否有显示SASS 版本号,若有的话代表安装完成
SASS 执行
首先在专案资料夹下,生成index.html 和两个资料夹css、sass ,然后在sass 下面新增一个style.scss,这支档是我们开发,主要编写样式的档案。

我们现在要试着把sass 资料夹里的style.scss ,编译成浏览器看的懂的.css 副档名型式。
所以下指令把style.scss 档案转译生成style.css,并放置在css 资料夹里,如下:
$ sass sass/style.scss:css/style.css
如果顺利的话,应该会看到「 css 」档案夹里,新增了两个档案,分别是「 style.css 」和「 style.css.map 」,这边比较要留意的是style.css(浏览器主要解读这只档)。

- 需留意「 当前路径」,这会影响到style.scss 档案编译生

最低0.47元/天 解锁文章

被折叠的 条评论
为什么被折叠?



