Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SASS介绍
Search
三 桂
March 31, 2014
Technology
1
240
SASS介绍
介绍了sass的安装、使用、调试及常见问题的解决办法,并对compass进行了简单介绍
三 桂
March 31, 2014
Tweet
Share
More Decks by 三 桂
See All by 三 桂
Cache你好,Cahche再见!
and1coder
0
160
SASS实战
and1coder
2
250
iconfont实操
and1coder
0
78
PMS新版预研与总结
and1coder
0
120
Web前端开发规范
and1coder
7
300
Other Decks in Technology
See All in Technology
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
340
OPENLOGI Company Profile
hr01
0
67k
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
160
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
160
MobileActOsaka_250704.pdf
akaitadaaki
0
120
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
21k
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
130
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Documentation Writing (for coders)
carmenintech
72
4.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
It's Worth the Effort
3n
185
28k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Done Done
chrislema
184
16k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Site-Speed That Sticks
csswizardry
10
690
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Fireside Chat
paigeccino
37
3.5k
Transcript
SASS介绍 Samgui 2013/08/02
主要内容 Sass安装 Sass使用 Sass用法 Compass介绍
编辑器支持 Sass调试 一些补充 一些资源
Sass安装 安装Ruby环境 安装Sass
安装Ruby环境 由于Sass依赖于Ruby环境,所以安装Sass之前先本机确认安装了 Ruby,在安装的时候,请勾选Add Ruby executables to your PATH 这个选项,添加环境变量。 Ruby一键安装包:http://rubyinstaller.org/
Rails一键安装包:http://railsinstaller.org/
安装Sass gem install sass http://sass-lang.com/
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
Sass用法 注释 变量 类型 嵌套
混入 运算 继承 函数 流程控制 导入
注释 SASS共有两种注释风格。 标准的CSS注释 /* comment */ ,会保留到编译后的文件 单行注释
// comment,只保留在SASS源文件中,编译后被删除 在/*后面加一个! ,表示这是"重要注释"。即使是压缩模式编译, 也会保留这行注释,通常可以用于声明版权信息
变量 申明: $变量名:值; 字符串插值: #{$变量名} 作用域: 根据先后顺序进行覆盖,可通过!detault来防止重新赋值
类型 数字 (如 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
嵌套 : 属性嵌套 & 引用父选择器
混入
运算 http://sass-lang.com/documentation/file.SASS_REFERENCE.html#operations
继承 http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend
函数 http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
流程控制 http://sass-lang.com/documentation/file.SASS_REFERENCE.html#control_directives
导入 http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import
Compass介绍 安装Compass 创建Compass项目
安装Compass http://compass-style.org/ gem install compass
创建Compass项目 在命令提示符下切换到项目根目录(其下有css,img等子目录): compass create 这时会在根目录下多出sass,stylesheets,.sass-cache目录以及 config.rb文件,可根据实际情况对目录以及config.rb配置文件进行调 整,然后执行如下命令即可对sass目录进行监听编译: compass watch
编辑器支持 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
一些补充 svn忽略.sass-cache文件夹 取消错误的语法检查 Sass中文注释 …
svn忽略.sass-cache文件夹 由于Sass编译时会产生缓存文件,而这些文件又不需要提交到svn, 所以需要设置全局忽略.sass-cache目录。
取消错误的语法检查 由于PhpStorm 默认的语法检查并不支持 Compass 语法,所以 @import “compass”; 会被错误警告,可以在Settings面版左侧找到 Inspection,然后勾选掉SASS/SCSS如下2个选项:
Sass中文注释 当.scss文档申明为utf-8时,如果文档里有中文注释会编译通不过! 解决方案: 在 Windows 的环境变量中添加 RUBYOPT 变量,值设为 -KU 。
http://km.oa.com/group/578/articles/show/138739
一些资源 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