下载APP 随时随地学编程
返回 首页

Sass 教程

开始阅读
手册说明:

Sass教程

SASS(Syntactically Awesome Stylesheet)是一个CSS预处理器,有助于减少CSS的重复,节省时间。 它是更稳定和强大的CSS扩展语言描述文档的风格结构。本教程包含SASS的基础知识。

适用人群

本教程将帮助学生以及希望使他们的网站或个人博客更具吸引力的专业人士。

学习前提

您应该熟悉:

  • 使用任何文本编辑器的基本字处理。

  • 如何创建目录和文件。

  • 如何浏览不同的目录。

  • 使用Internet Explorer或Firefox等流行的浏览器进行Internet浏览。

  • 使用HTML或XHTML开发简单的网页。

如果您是HTML和XHTML的新手,那么我们建议您先阅读HTML教程或XHTML教程。


Sass 在线工具

在线css转Sass/Scss

在线Scss转Css

Sass 相关教程

《sass 拓展教程》


目录

sass 教程

1. 使用变量

1-1. 变量声明
1-2. 变量引用
1-3. 变量名用中划线还是下划线分隔

2. 嵌套CSS 规则

2-1. 父选择器的标识符&
2-2. 群组选择器的嵌套
2-3. 子组合选择器和同层组合选择器:>、+和~
2-4. 嵌套属性

3. 导入SASS文件

3-1. 使用SASS部分文件
3-2. 默认变量值
3-3. 嵌套导入
3-4. 原生的CSS导入

4. 静默注释

5. 混合器

5-1. 何时使用混合器
5-2. 混合器中的CSS规则
5-3. 给混合器传参
5-4. 默认参数值

6. 使用选择器继承来精简CSS

6-1. 何时使用继承
6-2. 继承的高级用法
6-3. 继承的工作细节
6-4. 使用继承的最佳实践

7. 小结

sass 相关教程

sass 教程

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }