sass的学习笔记
sass初学入门笔记(一)
我本身是个新手,一边学sass一边记下的笔记,可能有点罗嗦,但是复习起来的话还是比较全面直观的。当然,最重要的还是去实践,实践得真理
其它 CSS 预处理器语言:
CSS 预处理器技术已经非常的成熟,而且也涌现出了很多种不同的 CSS 预处理器语言,比如说:
- Sass(SCSS)
- LESS
- Stylus
- Turbine
- Swithch CSS
- CSS Cacheer
- DT CSS
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,两者之间不同之处有以下两点:
- 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
- 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;)
- 而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似(SCSS 和 CSS 写法无差别)。简单点说,把你现有的“.css”文件直接修改成“.scss”即可使用。

Sass 的编译有多种方法:
- 命令编译
- GUI工具编译
GUI 界面编译工具,目前较为流行的主要有:
- Koala (http://koala-app.com/)
- Compass.app(http://compass.kkbox.com/)
- Scout(http://mhs.github.io/scout-app/)
- CodeKit(https://incident57.com/codekit/index.html)
- Prepros(https://prepros.io/)
相比之下,比较推荐使用以下两个:
常见的编译错误:
不同样式风格的输出方法:
- 嵌套输出方式 nested
- 展开输出方式 expanded
- 紧凑输出方式 compact
- 压缩输出方式 compressed
sass --watch --scss --sourcemap style.scss:style.css
在 Sass3.3 版本之上(测试使用的版本是 3.4.7),不需要添加这个参数也可以:
sass --watch style.scss:style.css
Sass 和 SCSS 有什么区别?
Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:
- 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
- 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
sass的学习笔记的更多相关文章
- sass个人学习笔记
Materliu 在慕课的视频: http://www.imooc.com/learn/364 . http://www.imooc.com/wiki/371 sass入门:http://www.w3 ...
- sass,compass学习笔记总结
最近在进行百度前端技术学院的任务,知道自己基础薄弱,可没想到弱到这种地步,同时在安装各种软件的同时遇到了各种坑,查阅了各种资料,一个个解决的时候也发现自己凌乱了.学习总结,在脑海中形成自己的学习系统才 ...
- Sass&Compass学习笔记(一)
1.sass中可以使用变量 变量名以$符号开头,可包含所有可用作CSS类名的字符,包括下划线和中划线. 可见,中划线也是可以作为命名的字符,这是与很多其他语言的不同之处.变量的使用实例: $compa ...
- Sass学习笔记之入门篇
Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...
- Sass学习笔记(补充)
阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@de ...
- Sass简单、快速上手_Sass快速入门学习笔记总结
Sass是世界上最成熟.稳定和强大的专业级css扩展语言 ,除了Sass是css的一种预处理器语言,类似的语言还有Less,Stylus等. 这篇文章关于Sass快速入门学习笔记. 资源网站大全 ht ...
- 学习笔记 - Sass的安装与使用手册
最近因为工作需要,自学了Sass.现在将学习笔记整理在这里,供大家参考. 1. Sass的安装 Sass的编辑器安装方法有很多,大致能分为两种:应用程序(application)和命令行界面(comm ...
- gulp学习笔记3
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.编译sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大 ...
- JavaScript学习笔记:数组reduce()和reduceRight()方法
很多时候需要累加数组项的得到一个值(比如说求和).如果你碰到一个类似的问题,你想到的方法是什么呢?会不会和我一样,想到的就是使用for或while循环,对数组进行迭代,依次将他们的值加起来.比如: v ...
随机推荐
- 关于"引用"的几点说明
一.引用的基本知识 引用就是某一变量(目标)的一个别名,对引用的操作与对变量直接操作完全一样.引用的声明方法:类型标识符 &引用名=目标变量名: 说明: (1)&在此不是求地址运算,而 ...
- 【Oracle】事务处理
名词解释 DML:Data Manipulation Language (数据库操纵语言) 例如:DELETE.INSERT.UPDATE.SELECT DDL:Data Definition Lan ...
- ZooKeeper安装及配置(Windows系统下)
ZooKeeper的定义用一句话就能说清:分布式服务框架 Zookeeper -- 管理分布式环境中的数据.下面从安装开始,对这个框架进行分析. 1.安装 1. 官网下载压缩包并解压到D:\Progr ...
- Linux下编辑利器vim,vimrc,viminfo的高级用法
1.ci" (由 change operator 和 text-object i" 组成) 这个命令会找到当前光标所在行的下一个 " 括起来的字符串,清除引号裏面的内容, ...
- NET的基本用法(摘)
摘自:http://baike.baidu.com/link?url=Knc-OicoX8CPcaMS0r3eU8z8ns9z1S6OsRaBTYUIT1raU0FsPWQ35xL-dlxKg9Oy# ...
- hduoj------确定比赛名次
拓扑排序结合代码的完整理解 确定比赛名次 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Oth ...
- Foundations of Machine Learning: The PAC Learning Framework(1)
写在最前:本系列主要是在阅读 Mehryar Mohri 等的最新书籍<Foundations of Machine Learning>以及 Schapire 和 Freund 的 < ...
- 近年Recsys论文
2015年~2017年SIGIR,SIGKDD,ICML三大会议的Recsys论文: [转载请注明出处:https://www.cnblogs.com/shenxiaolin/p/8321722.ht ...
- Android之SurfaceView使用总结
1.概念SurfaceView是View类的子类,可以直接从内存或者DMA等硬件接口取得图像数据,是个非常重要的绘图视图.它的特性是:可以在主线程之外的线程中向屏幕绘图上.这样可以避免画图任务繁重的时 ...
- 作业调度框架_Quartz
什么是Quartz Quartz是一个完全由Java编写的开源作业调度框架,为在Java应用程序中进行作业调度提供了简单却强大的机制.Quartz允许开发人员根据时间间隔来调度作业.它实现了作业和触发 ...