Tweet
Tweet

Slide 1

Slide 1 text

SASS介绍 Samgui 2013/08/02

Slide 2

Slide 2 text

主要内容  Sass安装  Sass使用  Sass用法  Compass介绍  编辑器支持  Sass调试  一些补充  一些资源

Slide 3

Slide 3 text

Sass安装  安装Ruby环境  安装Sass

Slide 4

Slide 4 text

安装Ruby环境 由于Sass依赖于Ruby环境，所以安装Sass之前先本机确认安装了 Ruby，在安装的时候，请勾选Add Ruby executables to your PATH 这个选项，添加环境变量。 Ruby一键安装包：http://rubyinstaller.org/ Rails一键安装包：http://railsinstaller.org/

Slide 5

Slide 5 text

安装Sass gem install sass http://sass-lang.com/

Slide 6

Slide 6 text

Sass使用  编译文件 sass input.scss output.s.css  监听文件 sass --watch input.scss output.s.css  监听目录 sass --watch public/sass:public/stylesheets  输入风格 sass --style compressed[nested|expanded|compact] test.sass test.s.css http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Slide 7

Slide 7 text

Sass用法  注释  变量  类型  嵌套  混入  运算  继承  函数  流程控制  导入

Slide 8

Slide 8 text

注释 SASS共有两种注释风格。  标准的CSS注释 /* comment */ ，会保留到编译后的文件  单行注释 // comment，只保留在SASS源文件中，编译后被删除  在/*后面加一个! ，表示这是"重要注释"。即使是压缩模式编译， 也会保留这行注释，通常可以用于声明版权信息

Slide 9

Slide 9 text

变量 申明: $变量名:值; 字符串插值: #{$变量名} 作用域: 根据先后顺序进行覆盖,可通过!detault来防止重新赋值

Slide 10

Slide 10 text

类型  数字 (如 1.2, 13, 10px)  文本字符串,包含或者不包含引号 (如 "foo", 'bar', baz)  颜色(如 blue, #04a3f9, rgba(255, 0, 0, 0.5))  布尔值 (如 true, false)  空值(如 null)  列表, 通过空格或逗号分隔(如 1.5em 0 2em, Arial, sans-serif) http://sass-lang.com/documentation/file.SASS_REFERENCE.html#data_types

Slide 11

Slide 11 text

嵌套 : 属性嵌套 & 引用父选择器

Slide 12

Slide 12 text

混入

Slide 13

Slide 13 text

运算 http://sass-lang.com/documentation/file.SASS_REFERENCE.html#operations

Slide 14

Slide 14 text

继承 http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend

Slide 15

Slide 15 text

函数 http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

Slide 16

Slide 16 text

流程控制 http://sass-lang.com/documentation/file.SASS_REFERENCE.html#control_directives

Slide 17

Slide 17 text

导入 http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import

Slide 18

Slide 18 text

Compass介绍  安装Compass  创建Compass项目

Slide 19

Slide 19 text

安装Compass http://compass-style.org/ gem install compass

Slide 20

Slide 20 text

创建Compass项目 在命令提示符下切换到项目根目录(其下有css,img等子目录)： compass create 这时会在根目录下多出sass，stylesheets，.sass-cache目录以及 config.rb文件，可根据实际情况对目录以及config.rb配置文件进行调 整，然后执行如下命令即可对sass目录进行监听编译： compass watch

Slide 21

Slide 21 text

编辑器支持 Jetbrains系列如Intellij IDEA,WebStorm,PhpStorm默认支持Sass 当开启File Watchers后IDC会自动生成Sass配置如下图，不过需要做点小调整： Program： D:\env\RailsInstaller\Ruby1.9.3\bin\scss.bat (本机安装路径，IDE会自动查找) Arguments： --no-cache --update $FileName$: $FileNameWithoutExtension$.s.css Working directory： $FileDir$ Output paths to refresh： $FileNameWithoutExtension$.s.css

Slide 22

Slide 22 text

一些补充  svn忽略.sass-cache文件夹  取消错误的语法检查  Sass中文注释  …

Slide 23

Slide 23 text

svn忽略.sass-cache文件夹 由于Sass编译时会产生缓存文件，而这些文件又不需要提交到svn， 所以需要设置全局忽略.sass-cache目录。

Slide 24

Slide 24 text

取消错误的语法检查 由于PhpStorm 默认的语法检查并不支持 Compass 语法，所以 @import “compass”; 会被错误警告，可以在Settings面版左侧找到 Inspection，然后勾选掉SASS/SCSS如下2个选项：

Slide 25

Slide 25 text

Sass中文注释 当.scss文档申明为utf-8时，如果文档里有中文注释会编译通不过! 解决方案: 在 Windows 的环境变量中添加 RUBYOPT 变量，值设为 -KU 。 http://km.oa.com/group/578/articles/show/138739

Slide 26

Slide 26 text

一些资源 Sass之namespace http://thechangelog.com/namespace-support-is-being-added-to-sass/ https://gist.github.com/chriseppstein/5649985 Koala http://koala-app.com Codekit http://www.cnblogs.com/aNd1coder/archive/2012/03/05/2380480.html Phamlp https://code.google.com/p/phamlp/ Sass指南 http://www.w3cplus.com/sassguide/index.html Sass变量默认作用域 http://stackoverflow.com/questions/5469931/sass-variable-default-scope Compass开发原则:禁用 @import 'compass'; http://blog.rocodev.com/posts/11-dont-import-compass