1.预备知识--什么是 CSS 预处理器 CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用.CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量.简单的逻辑程序.函数(如右侧代码编辑器中…

主要参考 http://www.jianshu.com/p/5bfc9411f58f -------------------------------------------- sass基于ruby 需ruby解释器 1. 安装ruby 下载地址 https://rubyinstaller.org/downloads/ 选一个合适的版本下载并安装即可.安装中勾选第二项: 检测是否安装成功 ruby -v 2.sass安装及使用 利用ruby的gem命令 ruby安装好后,打开开始菜单 ,有 sta…

如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCSS插件配合预处理器得到很好的赞誉,因为他们将功能添加到你的工作流中,让你工作变得更加轻松.如果你只使用一个预处理器,而不使用这些插件,你的工作流至少会变得更加困难. 我们会涉及一些免费的PostCSS插件,然后我们将会介绍一些配置的阐述,告诉您如何将PostCSS和你喜欢的预处理器(Sass.Sty…

Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式表.以下是我的学习笔记. Sass安装环境 1.安装sass(mac) ①:Ruby安装 ②:安装sass sudo gem install sass 可以通过 sass -v检测是否完成安装   2.更新sass gem update sass 3.卸载(删除)sass gem uninstal…

为什么要选择sass 我们在手写css中,会遇到很多很麻烦的问题.倒不是一些技术的问题,而是工程量的问题.例如,如何可以代替难记的16进制颜色,如何可以让层次更清晰,还有重复的代码该如何偷懒.其实这一切的原因,大部分是因为css并不是一个编程语言,这虽然让入门的门槛降低.但是一旦遇到工程量大的问题上,就会有些蛋疼.毕竟偷懒是人的天性. 然后一些工程师就开始琢磨如何可以让css更加的好用,于是一些less,sass/scss,就出现了.我们可以利用sass完成一些非常酷炫的事情,并且可以让你的代码…

阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@debug命令.@warn命令 9. 使用Sass时的注意事项 相关链接:Sass学习笔记前篇 Sass关于颜色函数的乐趣 在Sass学习笔记前篇,记载了Sass安装.基本用法.编程语法,在这篇,将补充在前篇未记载的知识. 1. Sass和SCSS的区别 参考链接:http://sass.bootcss…

介绍 sass 是什么?? 在sass的官网,它是这么形容给自己的 Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass 是世界上最成熟稳定强大的css扩展语言. sass并不是一种编程语言,但是我们可以用于开发网页样式,你可以称它为css预处理器.用sass来写css,然后再编译成正常的css文件. css兼容:Sass与所有版本的CS…

Sass学习 网站学习地址: Sass中文网:https://www.sass.hk/docs/#t7-3 Airen的博客:https://www.w3cplus.com/preprocessor/understanding-sass-list.html Whqet前端开发的博客:https://www.cnblogs.com/whqet/p/Sassmap.html 绿叶学习网:http://www.lvyestudy.com/sass/sass_list.aspx Sass 嵌套规则 Sa…

导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,Sass则是其中的佼佼者. 什么是Sass Sass是最成熟.稳定.强大.专业的CSS扩展语言(官方解释).直白点,Sass就是一个非常好用的CSS预处理器,为css引入部分编程语言的特性. Sass在现阶段,有两种编码的语法,一个是兼容CSS语法的Scss格式文件,一个是Haml.Ruby类似语法的…

Sass是CSS的一种预处理器语言,类似的语言还有Less,Stylus等. 那么什么是CSS预处理器? CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 换言之就是说,CSS预处理器是一种专门的变成语言,在通过这种语言编写之后,再将其编译成正常的CSS文件. CSS预处理器给CSS增加了编程的特性,例如可以使用变量.函数.以及逻辑. CSS预处理器的优势: 可以让你…