002.sass的使用及与scss的转换

1. sass与scss简介

Sass 有两种语法。 第一种被称为 SCSS (Sassy CSS),是一个 CSS3 语法的扩充版本,以 .scss 为扩展名。

h1{
    font-size:72px;
}

另一种语法,不使用花括号,而是通过缩排的方式来表达选择符的嵌套层级,也不使用分号,而是用换行符来分隔属性,以 .sass 作为扩展名。

h1
  font-size: 72px

2. sass与scss的转换

任一语法都可以导入另一种语法撰写的文件中。 只要使用 sass-convert 命令行工具,就可以将一种语法转换为另一种语法:

# 将 Sass 转换为 SCSS
$ sass-convert style.sass style.scss

# 将 SCSS 转换为 Sass
$ sass-convert style.scss style.sass

没有文件名时 sass命令默认编译 .sass 文件,添加 --scss 选项或者使用 scss命令编译scss文件。

3. 使用sass

sass文件或scss文件转换为css文件

sass index.sass index.css
sass index.scss index.css

你还可以命令 Sass监视文件的改动并更新 CSS :

sass --watch input.scss:output.css

如果目录里有很多Sass文件,可以Sass命令监视整个目录:

sass --watch app/sass:public/stylesheets

4. 在WebStrom中配置sass,

文件-》设置-》工具集-》File Watcher-》添加Scss Arguments中填watch path/to/dir $UnixSeparators($FilePath$)$
Working directory和Output paths to refresh中填path/to/dir
注:path/to/dir中为config.rb的父目录,一般会配置为compass

5. config.rb 转换相关的配置

5.1. 配置文件根目录

http_path = "/" //项目根目录  
css_dir = "stylesheets" //css文件放在stylesheets目录  
sass_dir = "sass" //sass文件放在sass目录  
images_dir = "images" //图片文件放在images目录  
javascripts_dir = "javascripts" //js文件放在javascripts目录

5.2. 缓存文件生成设置

设置不生成缓存,不会生成.sass-cache文件夹

cache = false

5.3. 在浏览器调试

在浏览器中显示生成后css在sassscss文件中的行数

sourcemap = true

5.4. 输出样式

  • nested:嵌套缩进的css代码,它是默认值。
#main {
    color: #fff;
    background-color: #000; }
#main p {
    width: 10em; }

.huge {
    font-size: 10em;
    font-weight: bold;
    text-decoration: underline; }
  • expanded:没有缩进的、扩展的css代码。
#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}
  • compact:简洁格式的css代码。
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
  • compressed:压缩后的css代码。
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

项目上线后应设置

output_style = :compressed

或者

sass --watch app/sass:public/stylesheets --style compressed

输出压缩的css代码以节约流量。

5.5. 产生相对路径

默认关闭,当我们使用compass精灵sprite输出图片时会发现输出的精灵图路径并不是我们要的,这时候需要激活这个选项。

relative_assets = true

5.6. 取消注释

line_comments = false

在线css转sass网站

预处理图形编译工具
Koala是一个国产免费前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。

results matching ""

    No results matching ""