SASS教学+SCSS:CSS 再进化,掌握语法攻略!

sass-banner.png

这几天摸索了SASS+SCSS 的写法,发现有许多的GitHub 专案,使用它进行开发。

自己进行几个专案后,编写速度确实有提升,于是整理出这篇SASS+SCSS 教学,从SASS+SCSS 介绍→ 安装+执行→ 语法SASS教学,进行文章编写。

不敢说可以从入门到进阶,但对SASS 主观念的掌握,应该是没问题的,本篇文章内容

  1. SASS+SCSS介绍
  2. 安装+执行
  3. 嵌套
  4. 引用父选择器&
  5. 变量
  6. 引入
  7. 混合
  8. 继承
  9. 操作符
  10. 结论

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 常遇到的几个问题,如:「 重复编写」、「 后续维护」、「 漏写问题」等问题…,然后加快开发流程,如下:

  1. 父选择器,重复编写:?如要扩充页面样式,就会不断的加上.nav li … 等父级class 名称,比较费工!
  2. 属性样式,重复编写:常会看到许多CSS 属性,是许多区块都需要用到,在SASS 没出来前,每个区块都需特别写一遍,现在直接引用即可。
  3. 后续维护:若哪天需要把.nav 这个class 名称更换,就需全部替换,比较麻烦。
  4. 漏写问题:SASS / SCSS 有条理的节省了许多代码编写,降低漏写的Bug。

2. 安装+执行

安装+执行SASS 的方式有满多种,有使用第三方应用程式的,也有直接安装在本机上的,这边会建议直接安装在本机上,比较一劳永逸,这边列出几种安装方式,如下:

SASS 安装

  1. 使用Node.js 安装 $ npm install -g sass
  2. 使用Ruby 安装 $ gem install compass
  3. 使用Brew 安装(Mac专用)$ brew install sass

指令执行完成,基本上就安装好了,若想测试是否安装成功,可以输入 $sass -v 看是否有显示SASS 版本号,若有的话代表安装完成

SASS 执行
首先在专案资料夹下,生成index.html 和两个资料夹css、sass ,然后在sass 下面新增一个style.scss,这支档是我们开发,主要编写样式的档案。
sass 范例档案
我们现在要试着把sass 资料夹里的style.scss ,编译成浏览器看的懂的.css 副档名型式。

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

  1. 需留意「 当前路径」,这会影响到style.scss 档案编译生
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端仙人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值