SASS学习笔记1 —— 安装、编译和调试

一、什么是SASS

SASS是一种"CSS预处理器"(css preprocessor)的开发工具,为CSS加入编程元素,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。

二、安装和使用

2.1 安装

SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。先导官网下载个ruby

在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境

ruby install

sass安装

安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with 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是什么格式,有四种取值分别为:nestedexpandedcompactcompressed
    • --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使用指南,简单操作如下图:

koala compile

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 mapdebug info

koala setting

  2.3.4 开启浏览器调试

    谷歌浏览器调试-- F12打开调试面板,点击调试面板右上角的齿轮图标打开设置,在general选项中勾选Enable CSS source map 和 Auto-reload generated CSS

open chrome css source map

开启--sourcemap编译,f12打开调试面板,就可以看到原先右边的css文件变成了我们现在的scss文件

chrome scss

点击scss文件,会跳到source里面的scss源文件,现在可以在里面进行修改,修改完成后可以右键选择savesave as命令,然后替换我们本地的scss源文件,刷新chrome就可以看到变化(注意,解析样式需要一定时间)。以后只要ctrl+s保存修改就可以在浏览器中看到修改效果了。

chrome scss source

火狐浏览器调试-  debug-info调试

firefox可以安装插件FireSass使用debug-info来调试。

开启--debug-info编译,f12打开firebug,就可以看到原先右边的css文件变成了我们现在的scss文件

firefox debug

sourcemap调试

firefox 29 将会开始支持sourcemap,注意是火狐自带的调试功能,而不是firebug。

开启--sourcemap编译,右键“查看元素”采用火狐自带的调试功能,打开调试面板,在样式上右键选择“显示原始来源”。

firefox sourcemap

点击scss文件,这样就跳到了scss文件。如下图:

firefox sourcemap

然后就可以进行我们的修改了,修改之后点击保存或者'ctrl+s'弹出我们要保存到哪里,同谷歌一样直接覆盖到我们本地的源文件就ok了。

firefox sourcemap

ps:我用29 beta版本的时候这个功能不太稳定,估计到稳定版本应该就好了。同时期待FireSass这个插件升级支持sourcemap。

参考:

 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页