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
230
SASS介绍
介绍了sass的安装、使用、调试及常见问题的解决办法,并对compass进行了简单介绍
三 桂
March 31, 2014
Tweet
Share
More Decks by 三 桂
See All by 三 桂
Cache你好,Cahche再见!
and1coder
0
150
SASS实战
and1coder
2
240
iconfont实操
and1coder
0
72
PMS新版预研与总结
and1coder
0
110
Web前端开发规范
and1coder
7
300
Other Decks in Technology
See All in Technology
クラシルの現在とこれから
am1157154
1
320
LLMOps : ΔMLOps
shuntaito
14
2.8k
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
130
EKS初心者が早めに知っておきたかったこと
cuorain
0
130
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
140
バイセルにおけるAI活用の取り組みについて紹介します/Generative AI at BuySell Technologies
kyuns
1
150
端末が簡単にリモートから操作されるデモを通じて ソフトウェアサプライチェーン攻撃対策の重要性を理解しよう
kitaji0306
0
130
ガバメントクラウド単独利用方式におけるIaC活用
techniczna
2
120
CI/CDやテスト自動化の開発プロジェクトへの適用
megascus
2
300
dbt-coreで実現するCore DataMartsのデータモデリング〜dbt編〜 / Core DataMarts Modeling with dbt-core
i125
3
1k
Tokyo dbt Meetup #10 dbt Cloudユーザー会 & パネルディスカッション
dbttokyo
1
160
WebRTC と Wasm の関係を振り返ってみた
tetter27
0
230
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Navigating Team Friction
lara
183
14k
A Tale of Four Properties
chriscoyier
156
23k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
[RailsConf 2023] Rails as a piece of cake
palkan
50
4.8k
Unsuck your backbone
ammeep
668
57k
Into the Great Unknown - MozCon
thekraken
31
1.4k
Designing Experiences People Love
moore
138
23k
Code Reviewing Like a Champion
maltzj
519
39k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
How GitHub (no longer) Works
holman
311
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