当前位置：K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS01 → 文章内容

使用sass+compass编写前端页面（入门篇）

减小字体 增大字体 作者：佚名  来源：网上搜集  发布时间：2019-1-4 8:47:05

时会在目录下生成三个文件：

  • config.rb这是个配置文件，主要指定sass源文件地址，以及编译后生成的css文件地址
  • sass存放sass源文件
  • stylesheets存放编译后生成的css

已有工程的初始化

对于已经创建好的工程，要想支持compass编译，只需要初始化一下就可以(切换到指定目录下)：

1
 compass init

编译

完成sass的开发后，只需要运行下编译命令：

1
compass compile

compile支持多种模式的编译，详细信息可通过

1
compass compile -h

查看。

每次编写sass完成后，都需要手动运行下编译命令，能不能自动编译呢？那当然是可以的，只需要对当前工程添加watch监视，如下：

1
compass watch

组件模块

前面我们提到compass提供了便捷的组件模块，我们来一起看看有哪些常用的组件吧：

  • reset 浏览器样式重置模块，减少不同浏览器间的差异性
  • css3 css3命令模块
  • layout 布局模块
  • typography 版式模块
  • utilities 工具类

reset使用：

1
<span class="at_rule">@<span class="keyword">import</span> <span class="string">"compass/reset"</span></span>;

这样就会在css中生成重置样式了，不用我们再自己定义重置样式了。

css3使用：

1
<span class="at_rule">@<span class="keyword">import</span> <span class="string">"compass/css3"</span></span>;

这是个绝对好用的特性，我们知道由于浏览器对css3支持的差异性，我们很多时候需要写一堆针对不同浏览器前缀样式，着实很烦人，css3命令模块帮我们解决了这个问题，我们只需include相应样式定义即可，compass会自动为我们生成针对不同浏览器的样式定义：

1
2
3
4
　<span class="variable">@import</span> <span class="string">"compass/css3"</span>;
　　.circle {
　　　　<span class="variable">@include</span> border-radius(<span class="number">5</span>px);
　　}

编译后：

1
2
3
4
5
6
7
8
　　<span class="class">.circle</span> <span class="rules">{
　　　　<span class="rule"><span class="attribute">-moz-border-radius</span>:<span class="value"> <span class="number">5</span>px;</span></span>
　　　　<span class="rule"><span class="attribute">-webkit-border-radius</span>:<span class="value"> <span class="number">5</span>px;</span></span>
　　　　<span class="rule"><span class="attribute">-o-border-radius</span>:<span class="value"> <span class="number">5</span>px;</span></span>
　　　　<span class="rule"><span class="attribute">-ms-border-radius</span>:<span class="value"> <span class="number">5</span>px;</span></span>
　　　　<span class="rule"><span class="attribute">-khtml-border-radius</span>:<span class="value"> <span class="number">5</span>px;</span></span>
　　　　<span class="rule"><span class="attribute">border-radius</span>:<span class="value"> <span class="number">5</span>px;</span></span>
　　<span class="rule">}</span></span>

以上只是sass和compass简单入门介绍。

上一页  [1] [2] 


使用sass+compass编写前端页面（入门篇）



[] [返回上一页] [打 印]

文章评论评论内容只代表网友观点，与本站立场无关！