SASS学习笔记1 —— 安装、编译和调试
一、什么是SASS
SASS是一种"CSS预处理器"(css preprocessor)的开发工具,为CSS加入编程元素,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。
二、安装和使用
2.1 安装
SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。先导官网下载个ruby
在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境
sass安装
安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby
然后直接在命令行中输入 gem install sass
如果要安装beta版本的,可以在命令行中输入
gem install sass --pre
你还可以从sass的Git repository来安装,git的命令行为
git clone git://github.com/nex3/sass.git
cd sass
rake install
升级sass版本的命令行为 gem update sass
查看sass版本的命令行为 sass -v
你也可以运行帮助命令行来查看你需要的命令 sass -h
2.2 sass编译
2.2.1 命令行编译
- 单文件转换命令
sass style.scss style.css
- 单文件监听命令
sass --watch style.scss:style.css
- 文件夹监听命令
sass --watch sassFileDirectory:cssFileDirectory
- css文件转成sass/scss文件(在线转换工具css2sass)
sass-convert style.css style.sass
sass-convert style.css style.scss
命令行其他配置选项
- 运行命令行帮助文档,可以获得所有的配置选项
sass -h
- 我们一般常用的有
--style
,--sourcemap
,--debug-info
等。
sass --watch style.scss:style.css --style compact
sass --watch style.scss:style.css --sourcemap
sass --watch style.scss:style.css --style expanded --sourcemap
sass --watch style.scss:style.css --debug-info
--style
表示解析后的css是什么格式,有四种取值分别为:nested
,expanded
,compact
,compressed
。--sourcemap
表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map
文件。--debug-info
表示开启debug信息,升级到3.3.0之后因为sourcemap更高级,这个debug-info就不太用了。
四种style生成后的css
SASS提供四个编译风格的选项:
- * nested:嵌套缩进的css代码,它是默认值。
- * expanded:没有缩进的、扩展的css代码。
- * compact:简洁格式的css代码。
- * compressed:压缩后的css代码。 sass --style compressed test.sass test.css
生产环境当中,一般使用最后一个选项。SASS的官方网站,提供了一个在线转换器。你可以在那里,试运行下面的各种例子。
四种style生成后的css // nested
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; } .huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; } // expanded
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
} .huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
} // compact
#main { color: #fff; background-color: #000; }
#main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; } // compressed
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
四种Style生成后的css
2.2.2 gui编译
这里推荐koala,它是一个优秀的免费编译器,界面清晰简洁,操作起来也非常简单,详细的大家可以移歩到:Less/Sass编译工具,koala使用指南,简单操作如下图:
2.2.3 Webstorm编辑器编译
某些高上大的编辑器本身就内置了sass的编译,如webstorm等,如果不清楚你的编辑器是否拥有自动编译的功能,可谷歌百度。
创建一个 “style.scss”文件,打开后会显示一个bar,点击“Add watcher”
2.3 sass调试
sass调试需要开启编译时输出调试信息和浏览器调试功能,两者缺一不可。
2.3.1 开启编译调试信息
- 目前sass的调试分为两种,一种为开启
debug-info
,一种为开启sourcemap
(这个将成为主流)。 - 如开启的是
debug-info
,则解析的css文件中会有以@media -sass-debug-info
开头的代码,如没有则表明没有开启。 - 如开启的是
sourcemap
,则在解析的css文件同目录下生成一个.css.map
的后缀名文件。
2.3.2 命令行开启
两个的命令分别为--debug-info
,--sourcemap
,开启如下:
sass --watch style.scss:style.css --debug-info
sass --watch style.scss:style.css --sourcemap
2.3.3 koala开启
如下图:点击相应的文件,然后就会出现右边的编译选项,即可选择是否开启source map
,debug info
2.3.4 开启浏览器调试
谷歌浏览器调试-- F12打开调试面板,点击调试面板右上角的齿轮图标打开设置,在general
选项中勾选Enable CSS source map
和 Auto-reload generated CSS
。
开启--sourcemap
编译,f12
打开调试面板,就可以看到原先右边的css文件变成了我们现在的scss文件
点击scss文件,会跳到source
里面的scss源文件,现在可以在里面进行修改,修改完成后可以右键选择save
或save as
命令,然后替换我们本地的scss源文件,刷新chrome就可以看到变化(注意,解析样式需要一定时间)。以后只要ctrl+s
保存修改就可以在浏览器中看到修改效果了。
火狐浏览器调试- debug-info调试
firefox可以安装插件FireSass使用debug-info
来调试。
开启--debug-info
编译,f12
打开firebug,就可以看到原先右边的css文件变成了我们现在的scss文件
sourcemap调试
firefox 29 将会开始支持sourcemap
,注意是火狐自带的调试功能,而不是firebug。
开启--sourcemap
编译,右键“查看元素”采用火狐自带的调试功能,打开调试面板,在样式上右键选择“显示原始来源”。
点击scss文件,这样就跳到了scss文件。如下图:
然后就可以进行我们的修改了,修改之后点击保存或者'ctrl+s'弹出我们要保存到哪里,同谷歌一样直接覆盖到我们本地的源文件就ok了。
ps:我用29 beta版本的时候这个功能不太稳定,估计到稳定版本应该就好了。同时期待FireSass
这个插件升级支持sourcemap。
参考:
- http://www.w3cplus.com/sassguide/
SASS学习笔记1 —— 安装、编译和调试的更多相关文章
- thinkphp学习笔记3—项目编译和调试模式
原文:thinkphp学习笔记3-项目编译和调试模式 1.项目编译 在章节2.4项目编译中作者讲到使用thinkphp的项目在第一次运行的时候会吧核心需要加载的文件去掉空白和注释合并到一个文件中编译并 ...
- Sass学习笔记(补充)
阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@de ...
- CentOS学习笔记--Tomcat安装
Tomcat安装 通常情况下我们要配置Tomcat是很容易的一件事情,但是如果您要架设多用户多服务的Java虚拟主机就不那么容易了.其中最大的一个问题就是Tomcat执行权限.普通方式配置的Tomca ...
- OracleDesigner学习笔记1――安装篇
OracleDesigner学习笔记1――安装篇 QQ:King MSN:qiutianwh@msn.com Email:qqking@gmail.com 一. 前言 Oracle是当 ...
- 学习笔记:自己编译安装OpenCV+测试opencv安装是否成功
1. 安装编译依赖的软件包 # 安装读写不同图片类型的库: sudo apt-get install libjpeg8-dev libtiff4-dev libjasper-dev libpng12- ...
- Sass学习笔记之入门篇
Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...
- 菜鸟的 Sass 学习笔记
介绍 sass 是什么?? 在sass的官网,它是这么形容给自己的 Sass is the most mature, stable, and powerful professional grade C ...
- TP6学习笔记一:安装与基本配置
1 说明与概述 1.1 说明 以下内容大部分来源于TP6完全开发手册,以手册为主附上个人理解,仅作学习使用. 1.2 概述 第一篇学习笔记,主要记录TP6的基础,包括TP6简介,安装,Hello Wo ...
- webpack学习笔记—webpack安装、基本配置
文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...
随机推荐
- poj 3335(半平面交)
链接:http://poj.org/problem?id=3335 //大牛们常说的测模板题 ------------------------------------------------- ...
- Codeforces Round #380 (Div. 2, Rated, Based on Technocup 2017 - Elimination Round 2) D. Sea Battle 模拟
D. Sea Battle time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- Eclipse 高亮显示选中的相同变量
问题描述: 在 eclipse 中使用快捷键或其他原因,不小心按错了,使得变量的高亮显示没了. 1.网友解决方法: 选择:windows-> preferences->java-> ...
- Scrum Meeting---Four(2015-10-28)
今日已完成任务和明日要做的任务 姓名 今日已完成任务 今日时间 明日计划完成任务 估计用时 董元财 今日我完成了数据库表的设计以及创建 3h 进行Java Web工程的编写 4h 胡亚坤 用户之间的通 ...
- css sprites-简单实例让你快速掌握css sprites精髓
这段时间有几次接触到了css sprites的概念,一个就是在用css做滑动门的时候,另外一个就是在用YSlow分析网站性能的时候,于是对css sprites这个概念产生了浓厚的兴趣.在网上查找了很 ...
- Java编程思想学习笔记_6(并发)
一.从任务中产生返回值,Callable接口的使用 Callable是一种具有泛型类型参数的泛型,它的类型参数表示的是从方法call返回的值,而且必须使Executor.submit来去调用它.sub ...
- 【Todo】用python进行机器学习数据模拟及逻辑回归实验
参考了这个网页:http://blog.csdn.net/han_xiaoyang/article/details/49123419 数据用了 https://pan.baidu.com/s/1pKx ...
- 2年后的Delphi XE6
1.有幸下载到Delphi XE6,下载地址如下: http://altd.embarcadero.com/download/radstudio/xe6/delphicbuilder_xe6_win. ...
- Android事件传递机制(转)
Android事件构成 在Android中,事件主要包括点按.长按.拖拽.滑动等,点按又包括单击和双击,另外还包括单指操作和多指操作.所有这些都构成了Android中的事件响应.总的来说,所有的事件都 ...
- Java开发中的一些小技巧
原文:http://www.cnblogs.com/xdp-gacl/p/3490276.html 一. Java获取URL地址中传递的参数 /** * 获取URL中的参数名和参数值的Map集合 * ...