Sass&&Compass

实时编译:Sass-Build-SublimeText:安装后使用快捷键Ctrl+B打开

compass:可在命令行中,项目目录下使用compass watch实时监听,这样还可以实时@debug xxx(eg.@debug brightness(#000);@debug browsers();)compass compile --force实时编译

Compass:

1.切换到工作路径下,compass create xxx//项目名,创建compass项目

2.在koala中编译时,需要导入整个项目,否则会出错。


sass中使用css原生@import的既定规则:

1.当@import后边跟的文件名是以.css结尾的时候!

2.当@import后边跟的是http://开头的字符串的时候!

3.当@import后边跟的是一个url()函数的时候。

4.当@import后边带有media queries的时候。

基于sass的既定规则:

1.没有文件后缀名的时候,sass会添加.scss或者.sass的后缀。

2.同一目录下,局部文件和非局部文件不能重名。

sass中变量操作:

1.直接操作变量,即变量表达式。

2.通过函数。{①跟代码块无关的函数,多是自己内置函数,称functions;②可重用的代码块,称mixin(①@include的方式调用;②extend的方式调用)}

sass中的数值计算时带单位的。

sass中的color支持HSL色彩表示法(色相,饱和度,亮度:Hue,Saturation,Lightness)

sass中的@media跟CSS区别:

sass中的media query可以内嵌在css规则中,在生成CSS的时候,media query才会被提到样式的最高层级。好处:避免了重复书写选择器或者打乱样式表的流程。

样式表嵌套的缺点:样式渲染低效,增加了样式修饰的权重,制造了这种样式位置的依赖。

sass中@at-root:明确指定被嵌套的内容输出在样式表的底层,虽然嵌套书写,但最后在.css文件中生成时却不包含嵌套

sass中@if:条件判断




Compass核心模块:Reset(浏览器样式重置模块,用来减少不同浏览器之间的差异性,更推荐Normalize);Layout(提高页面布局的控制能力)

两种模块必须单独引入:@import "compass/reset"    @import "compass/layout"

而@import"compass" 就默认包含了其它4个模块:

CSS3:主要用来提高跨浏览器的CSS3能力

Helpers:内含一系列函数,比较少用,但功能丰富强大

Typography:主要用来修饰文本样式,垂直韵律

Utilities:没有办法放到其他的模块都可以放到这个模块,顾名思义辅助模块,都是mixin.

还有一个模块就是:Browser support模块(用来配置Compass默认支持哪些浏览器,一旦修改将影响其余6个模块的输出)

如何用normalize替换掉reset?

1.在normalize官网上将文件下载下来,放到项目目录,通过import将文件引入进来。

2.命令行安装:gem install compass-normalize,安装成功后,在config.rb中引入插件:require 'compass-normalize',并在.scss文件中@import "normalize".

normalize包含8个模块:base:统一html和body标签的字体,文字大小的调整,边距等等;html5:统一html5里面新增的元素;links:统一a标签的样式修饰;typography:统一D,strong,h1,sub,sup等段落文本的修饰;embeds:统一img,svg等标签的样式修饰;groups:统一pre等标签的样式修饰;forms:统一form相关的button,input,textarea等标签的样式修饰;tables:统一table相关的table,td,th等标签的样式修饰.引用方式:首先引用@import "normalize-version",再引用@import "normalize/base"等.

reset一共包含12个mixin:Compass Reset Utilities

compass中config.rb首行: require 'compass/import-once/activate'的作用:即使在.scss中重复引用@import,.css文件也只会编译第一次。如果确定要多次引用,可在@import后加!.

在config.rb第6行可修改相对路径:将第16行的“relative_assets = true”打开

compass中config.rb第12行output_style可选择编译后文件格式,当我们选择compressed压缩格式时,默认不保存注释,可通过"/*!......*/"添加!来保留 注释

Compass中封装了几乎所有css3的新属性,我们只需要调用css3的同名mixin即可.首先引入@import "compass/css3"模块,然后再需要的地方@include xxx;

Compass中有个Browser Support功能,可以查看支持的浏览器和浏览器版本,首先@import "compass/support",然后命令行项目目录下输入命令compass interactive——>回车——>browser()——>browser-versions(chrome).

通过$supported-browsers:chrome,firefox;来修改支持的浏览器。注意这个修改会影响到其它所有模块,也会影响css3中封装好的前缀,这样可以调整只支持某种浏览器的需求.

$browser-minimum-versions:("ie":"8"):修改支持的浏览器最低版本.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容