码迷,mamicode.com
首页 > 其他好文 > 详细

Sass学习之路(1)——Sass简介

时间:2016-12-11 15:33:12      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:时代   强制   老版本   class   回归   rac   预处理   推出   word   

Sass是CSS的一种预处理器语言,类似的语言还有Less,Stylus等。

 

那么什么是CSS预处理器?

CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。

换言之就是说,CSS预处理器是一种专门的变成语言,在通过这种语言编写之后,再将其编译成正常的CSS文件。

CSS预处理器给CSS增加了编程的特性,例如可以使用变量、函数、以及逻辑。

 

CSS预处理器的优势:

可以让你的CSS变得更加简洁,适应性,可读性都变得更好,同时代码的维护也变得更方便。

 

关于Sass:

引用一段Sass官网上的描述:

 

Sass是一门高于CSS的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通CSS更加强大的功能。
Sass能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。

 

 

Sass是最早的CSS预处理语言,诞生于2007年,采用Ruby语言编写。比LESS的功能更加强大,不过早期的缩进式语法(Sass的老版本语法,抛弃CSS的封号,大括号等符号)无法被大众接受(无法想象没有大括号的CSS的世界)。

虽然像html一样的缩进式风格可以缩减代码量,强制规范的变成风格,但是大部分的前端工程师都难以接受没有花括号的世界,倒是Sass早起没有LESS普及。

 

Sass和SCSS:

其实Sass和SCSS是同一种东西,平时都被我们称之为SCSS,不过还是一些区别:

1.文件拓展名不同,拓展名分别是".sass"和".scss"。

2.语法书写方式不同:Sass使用严格的缩进式语法书写,不使用大括号和封号(换行解决一切问题)。而SCSS更接近我们平时书写CSS的方式。

下边是两种语法的示例:

 

 

Sass 语法

 

[css] view plain copy
 
  1. $font-stack: Helvetica, sans-serif  //定义变量  
  2. $primary-color: #333 //定义变量  
  3.   
  4. body  
  5.   font: 100% $font-stack  
  6.   color: $primary-color  

 

SCSS 语法

 

[css] view plain copy
 
  1. $font-stack: Helvetica, sans-serif;  
  2. $primary-color: #333;  
  3.   
  4. body {  
  5.   font: 100% $font-stack;  
  6.   color: $primary-color;  
  7. }  

 

编译出来的 CSS

[css] view plain copy
 
  1. body {  
  2.   font: 100% Helvetica, sans-serif;  
  3.   color: #333;  
  4. }  


其实SCSS语法便是Sass后续推出的新版本语法,可以理解成一种语法糖,不再沿用ruby的语法习惯。(熟悉的大括号和封号又回归了)。

Sass学习之路(1)——Sass简介

标签:时代   强制   老版本   class   回归   rac   预处理   推出   word   

原文地址:http://www.cnblogs.com/YuuyaRin/p/6159459.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!