发表于: 2017-03-24 22:32:14
1 652
- 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
- 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
- 数值(可包括单位)
- 颜色
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
了解什么是CSS 预处理器
了解了Sass
了解了Less
明天计划的事情:(一定要写非常细致的内容)
任务11:基于css的更高级语言——使用less/sass重写任务4(登录页),并编译
遇到的问题:(遇到什么困难,怎么解决的)
收获:(通过今天的学习,学到了什么知识)
什么是 CSS 预处理器?
CSS 预处理器定义了一种新的语言,其基本思想是用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。
通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
From <http://www.imooc.com/code/5993>
什么是 Sass?
Sass 官网上是这样描述 Sass 的:
Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。
Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。
From <http://www.imooc.com/code/6371>
Sass 和 SCSS 有什么区别?
Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:
先来看一个示例:
Sass 语法
$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量
body
font: 100% $font-stack
color: $primary-color
SCSS 语法
$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;
}
From <http://www.imooc.com/code/6373>
Sass支持定义变量。变量以美元符号($)作为开头。变量用冒号(:)赋值。
SassScript支持四种数据类型:
变量可以用作函数的参数或返回值。在解释过程中,解释器会把变量的值写入最终的CSS文件中。
From <https://zh.wikipedia.org/wiki/Sass#.E5.8F.98.E9.87.8F>
评论