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
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
250
MobileActOsaka_250704.pdf
akaitadaaki
0
120
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
47
18k
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
220
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
6.9k
OPENLOGI Company Profile
hr01
0
67k
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
16k
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
270
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
130
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
120
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
ゼロからはじめる採用広報
yutadayo
3
910
Featured
See All Featured
Practical Orchestrator
shlominoach
189
11k
How to Ace a Technical Interview
jacobian
278
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Building Applications with DynamoDB
mza
95
6.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Become a Pro
speakerdeck
PRO
29
5.4k
Scaling GitHub
holman
460
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Documentation Writing (for coders)
carmenintech
72
4.9k
Unsuck your backbone
ammeep
671
58k
Faster Mobile Websites
deanohume
307
31k
RailsConf 2023
tenderlove
30
1.1k
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