阅读目录 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又名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…

less在处理CSS动画时,非常恶心,决定转向sass了.sass诞生得比less早,只是因为它是ruby写的,因此受众面够少.但我们不需要自己下编译器或使用命令行,我们可以koala这神器 首先几个注意点,sass可以用sass后缀名,也可以用scss后缀名.前者比较恶心,像python一样没有花括号,也不让写分号,散架子一样.因此推荐用scss,这个也是目前我遇到的大部分人的选择. 关于中文编译出错的问题,需要指定字符集. @charset "utf-8";//必须设置了这个才能编…

介绍 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…

工具  : koala 学习网址 : http://www.w3cplus.com/sassguide/syntax.html  http://sass-lang.com/documentation/Sass/Script/Functions.html#unquote-instance_method 1.sass使用//双斜杠注释向JS一样是单行注释 单行注释不会输出到css中 /**/注释概念相反 2.sacc变量名必须以$开头 后面紧跟着变量名 变量名与值依然是用:分开 $fontSize…

语法 @each $var in <list>//循环就是去遍历一个列表,然后从列表中取出对应的值 @while $types > 0 //循环直到函数不成立 SASS函数 To-upper-case(); //转换成大写字母 To-lower-case(); //转换成小写字母 unquote($string)//删除字符串中的引号 quote($string)//给字符串添加引号 颜色 rgb($red,$green,$blue)//根据红.绿.蓝三个值创建一个颜色: rgba($r…

序 之前稍微看过SASS的文档,但是由于工作中没有涉及,渐渐的搁置了.最近公司新招来一个热情似火的前端,不管什么技术,不管自己能不能hold住,都提出来用一用再说.这样对我也好,跟着这个哥们混妥妥的长见识了. 安装 SASS的官网有简单的说明文档:http://sass-lang.com/install:不过安装中还是遇到了一点问题,主要是"命令行"方法.稍微查了一下发现是因为版本问题,参考链接http://stackoverflow.com/questions/28589251/er…

今天介绍sass在重用代码时最具威力的两个功能.一个是嵌套(Nesting),一个混合(Mixin). 我们在写CSS通过需要多个后代选择器组合到一起才能定位到目标元素上,而这定义过程,此元素的父元素与其他选择器都有许多相同的部分,嵌套就是把这些相同的部分放到某一层花括号里,然后通过花括号的层层缩进堆砌,找到它们的共性与特性. @charset "utf-8";//必须设置了这个才能编译有中文的注释 nav { ul { margin: 0; padding: 0; list-styl…

sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种是scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号.在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错. 所有的sass导入文件都可以忽略后缀名.scss.一般来说基础的文件命名方法以_开头,如_mixin.scss.这种文件在导入的时候可以不写下划线,可写成@import "mixin". 被导入sass文件a.scss: body { background: #…

一.什么是SASS SASS是一种"CSS预处理器"(css preprocessor)的开发工具,为CSS加入编程元素,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 二.安装和使用 2.1 安装 SASS是Ruby语言写的,但是两者的语法没有关系.不懂Ruby,照样使用.只是必须先安装Ruby,然后再安装SASS.先导官网下载个ruby 在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,…