DAY 03 SCSS ? SASS ?

SCSS 是什麽?跟 SASS 是什麽关系?

说到这两个看起来是一样的东西,但是每次教学文章又发现好像有点不一样但是又常看到写再一起不清不楚彼此纠缠不清的状态⋯⋯(量子纠缠?

自己在一开始初学的时候也无法分清楚他们两个是什麽,实作久了就发现,SASS 其实可以理解为 SCSS 的其中一种写法,SCSS下你可以写下兼容CSS以及不兼容的两种做法,各有利弊,可以依照个人喜好去选择~ 反正最後还是都编译成CSS XDD

这边简单贴一下官方定义两者的说明,实际理解还是靠各位的慧根了(?

Sass 有两种语法格式。
首先是 SCSS (Sassy CSS)
这种格式仅在 CSS3 语法的基础上进行拓展,所有 CSS3 语法在 SCSS 中都是通用的,同时加入 Sass 的特色功能。
此外,SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax),以及早期的 IE 滤镜写法。
这种格式以 .scss 作为拓展名。

而在官网上的范例中,也可以看到,两者的差异只在於格式,实际上使用方法是一样的。

//scss

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//sass

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

//css

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

SASS的特点

Variables、Nesting、Partials、Modules、Mixins、Extend/Inheritance、Operators ⋯⋯

以上内容自己去看官方范例(诶不是

这些内容会在之後的章节一一的详细介绍~

官方也有针对每个方法的教学文章,大家也可以先去预习看看。

Sass Basics


除此之外,也欢迎大家走走逛逛关於我们团队夥伴的文章
lu23770127 - SASS 基础初学三十天
10u1 - 糟了!是世界奇观!
juck30808 - Python - 数位行销分析与 Youtube API 教学
HLD - 浅谈物件导向与Design Pattern介绍
SiQing47 - 前端?後端?你早晚都要全端的,何不从现在开始?


<<:  入门魔法 - 变数与值

>>:  [铁人赛 Day03] 如何提升你的 React 网站易用性?(Web Accessibility)(中)- Accessible name、Keyboard Accessibility

JS Library 学习笔记:首先当然来试试 jQuery (二)

//jQuery 使用Id指定 $('#my-div') //jQuery 使用Class指定 $(...

[Day 24] 第二主餐 pt.3-贺,乔迁aws

上一篇我们成功的把server架好了 这篇我们就要来把我们的code搬到aws啦 废话不多说,咱们累...

各种电脑常见的问题与维修方法

我们常常帮客户维修电脑,因此收集了许多客户常会遇见的电脑故障问题,包含那些 电脑维修 零件有问题,以...

Genero Package 套件安装与更新方法

Genero 套件里如果在 server 上安装的,大多套件就是可执行档,以 -i 参数进行安装。...

AI & machine learning 组别

https://wolkesau.medium.com/ai-machine-learning-aa...