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
240
iconfont实操
and1coder
0
78
PMS新版预研与总结
and1coder
0
120
Web前端开发规范
and1coder
7
300
Other Decks in Technology
See All in Technology
AI とペアプロしてわかった 3 つのヒューマンエラー
takahiroikegawa
1
660
Kubernetesで作るAIプラットフォーム
oracle4engineer
PRO
2
260
Introduction to Bill One Development Engineer
sansan33
PRO
0
250
AIコーディング新時代を生き残るための試行錯誤 / AI Coding Survival Guide
tomohisa
9
12k
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
190
Nonaka Sensei
kawaguti
PRO
3
610
Devin(Deep) Wiki/Searchの活用で変わる開発の世界観/devin-wiki-search-impact
tomoki10
0
280
活きてなかったデータを活かしてみた話 / Shirokane Kougyou vol 19
sansan_randd
1
150
Data Hubグループ 紹介資料
sansan33
PRO
0
1.8k
Amazon Q Developer for GitHubとAmplify Hosting でサクッとデジタル名刺を作ってみた
kmiya84377
0
2.5k
マルチテナント+マルチプロダクト SaaS への AI Agent の組み込み方
kworkdev
PRO
2
300
Ретроспективный взгляд на Vue 3. Даша Сабурова, Vue-разработчик Lamoda Tech
lamodatech
0
1.2k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
68
11k
Side Projects
sachag
454
42k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
650
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Six Lessons from altMBA
skipperchong
28
3.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
106
19k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
How GitHub (no longer) Works
holman
314
140k
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