首页 > > 网页制作 > css >

sass初学入门笔记（一）

2018-06-24 00:18:51来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

我本身是个新手，一边学sass一边记下的笔记，可能有点罗嗦，但是复习起来的话还是比较全面直观的。当然，最重要的还是去实践，实践得真理

其它 CSS 预处理器语言：

CSS 预处理器技术已经非常的成熟，而且也涌现出了很多种不同的 CSS 预处理器语言，比如说：

  • Sass（SCSS）
  • LESS
  • Stylus
  • Turbine
  • Swithch CSS
  • CSS Cacheer
  • DT CSS
在众多优秀的 CSS 预处理器语言中就属 Sass、LESS 和 Stylus 最优秀，讨论的也多，对比的也多。
 

Sass 是最早的 CSS 预处理语言，有比 LESS 更为强大的功能，Sass 虽然出现得最早，但远不如 LESS 普及。

 

其一开始的缩进式老版本语法，不能被大众接受，由于其强大的功能和 Ruby on Rails 的大力推动，还是有很多开发者选择了 Sass。

 

Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，最初它是为了配合 HAML（关于haml：http://www.bianceng.cn/web/Html/201411/46562_2.htm

一种缩进式 HTML 预编译器）而设计的，因此有着和 HTML 一样的缩进式风格。

 

Sass 和 SCSS 有什么区别？

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

  1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
  2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)
  3. 而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似（SCSS 和 CSS 写法无差别）。简单点说，把你现有的“.css”文件直接修改成“.scss”即可使用。
 
“.sass”只能使用 Sass 老语法规则（缩进规则），“.scss”使用的是 Sass 的新语法规则，也就是 SCSS 语法规则（类似 CSS 语法格式）。
 

Sass 的编译有多种方法：

  • 命令编译
        命令编译是指使用你电脑中的命令终端，通过输入 Sass 指令来编译 Sass。
  • GUI工具编译

GUI 界面编译工具，目前较为流行的主要有：

    1. Koala (http://koala-app.com/)
    2. Compass.app（http://compass.kkbox.com/）
    3. Scout（http://mhs.github.io/scout-app/）
    4. CodeKit（https://incident57.com/codekit/index.html）
    5. Prepros（https://prepros.io/）

相比之下，比较推荐使用以下两个：

    • Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html) 
    • CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)
  • 自动化编译
        Grunt 和 Gulp ，可以通过他们来配置 Sass 的编译【Grunt-beginner前端自动化工具学习：http://www.imooc.com/learn/30】

常见的编译错误：

最为常见的一个错误就是字符编译引起的。在Sass的编译的过程中，是不支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”。
另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。
注意：全文用的是scss写法

不同样式风格的输出方法：

在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格：
代码例子：
  • 嵌套输出方式 nested
           
 
  • 展开输出方式 expanded  
           
                
  • 紧凑输出方式 compact 
           
        
  • 压缩输出方式 compressed
           
 
Sass 调试
浏览器支持“sourcemap”功能即可。早一点的版本，需要在编译的时候添加“--sourcemap”  参数：
sass --watch --scss --sourcemap style.scss:style.css
 

在 Sass3.3 版本之上（测试使用的版本是 3.4.7），不需要添加这个参数也可以：

sass --watch style.scss:style.css
 
SASS无法兼容已有的CSS代码：sass编译成css之后，无法反编译成sass了。就比如生出来塞不回去的意思

Sass 和 SCSS 有什么区别？

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

  1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
  2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：字符串分割split()

下一篇：css: 照片有如层叠效果

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签