[笔记] Sass 实战全攻略 – 1 – 简介

章节连结

当撰写上千行的程式码时,模组式的管理 CSS 变成了一个需要的环节。Sass ( Syntactically Awesome Stylesheets ) ,专门将指令码解析成CSS的手稿语言。它使用缩排来区分代码块,并且用换行将不同规则分隔开。你可以像撰写 JavaScript 一样来编辑你的 CSS,在使用上更加具有逻辑性。
sass logo


课程对应章节

Course 1 ~ Course 9 (全部一共有 72 Courses)

请注意:本系列文章为个人对应课程的消化吸收后,所整理出来的内容。换言之,并不一定会包含全部的课程内容,也有可能会添加其他资源来说明。课程连结网址:http://tinyurl.com/ueo7bm2

内容

1.Sass 撰写完后,靠着编译器编译成浏览器看的懂得 .css。换言之,在网页中引入还是 .css,不过撰写时的附档名是用 .scss or .sass。
2.Sass 有两种写法。Scss 比较接近网页前端开发者习惯的 css,由 {} 和 ; 作为区隔。Sass 则比较接近后端开发者的语法,用两个空白或是 tab 来区隔。
3.若你是使用像 sublime 的编辑器,你可以下载 prepos 来即时监听你的 scss / sass 档案。它会输出成一个 all.css 档。
4.若你是使用如 VS Code,你需要下载 Sass 和 Live Sass Compiler,才能正常编译和 Highlight 表示。
5.最直觉的差别,就是支援巢状的写法,这样维护上比较容易。
6. “&” 的使用,可以节省重复撰写的时间,像是写 :hover 之类的效果时就很好用。


Sass 实战全攻略系列文章

  • [笔记] Sass 实战全攻略 – 11 – 自制格线系统
  • [笔记] Sass 实战全攻略 – 10 – 设计模式和规范
  • [笔记] Sass 实战全攻略 – 9 – 错误的 CSS 设计方式
  • [笔记] Sass 实战全攻略 – 8 – 关于命名的那些事儿
  • [笔记] Sass 实战全攻略 – 7 – Sass/CSS 设计模式 (OOCSS)
  • [笔记] Sass 实战全攻略 – 6 – Sass/CSS 设计模式 (Smacss)
  • [笔记] Sass 实战全攻略 – 5 – mixin 解决响应式网页的断点问题
  • [笔记] Sass 实战全攻略 – 4 – mixin 统整你常用的 CSS 方法
  • [笔记] Sass 实战全攻略 – 3 – import 切分档案和维护
  • [笔记] Sass 实战全攻略 – 2 – 变量的运用

  • 按赞加入粉丝团

    延伸阅读