zoukankan      html  css  js  c++  java
  • Compass用法

    一、什么是Compass?

    Compass是Sass的工具库,Compass在SASS的基础上,封装了一系列有用的模块去补充Sass的功能,类似Javascript和jQuery

    二、安装

    之前已经写过文章讲了sass、compass的安装,地址:http://www.cnblogs.com/laayoune/p/4105105.html

    三、创建项目

    在Ruby的命令行中输入

    compass create myproject

    会在当前目录下创建一个myproject的目录,myproject也可以是一个路径参数

    image

    上面是创建的目录结构,下面是告诉你在html中的引用

    config.rb是配置文件

    image

    上面的是css、sass、image、js的存放目录

    最后是使用sass语法缩进

    可以通过修改该文件进行项目配置,也可以在使用用compass create命令时进行配置:

    --bare (不包含默认样式表进行安装);
    --syntax sass (在默认样式表中使用缩进语法);
    --sass-dir "cool" (使用'cool'目录存放Sass文件);
    --css-dir "style" (使用'style'目录存放CSS文件);
    --images-dir "img" (使用'img'目录存放图片);
    --fonts-dir "type" (使用'type'目录存放字体文件);
    --javascripts-dir "js" (使用'js'目录存放JavaScript文件)。

    如:compass create myproject --sass-dir "cool" --css-dir "style"

    四、项目编译

    编译命令:compass compile

    该命令在项目根目录下运行,会将sass子目录中的scss文件,编译成css文件,保存在config.rb配置的css-dir对应的目录中。

    默认状态下,编译出来的css文件带有大量的注释。但是,生产环境需要压缩后的css文件,这时要使用--output-style参数。

    compass compile --output-style compressed

    Compass只编译发生变动的文件,如果你要重新编译未变动的文件,需要使用–force参数

    compass compile –force

    每次都要进行编译太麻烦,可以自动检测,只要sass文件夹发生变化(修改、增加文件),scss文件就会被自动编译成css文件。

    compass watch

    一些其他的命令

    compass init——为一个已经存在的项目(Rails)添加compass;
    compass clean——移除生成的文件和缓存;
    compass stats——查看样式表的统计数据;
    compass unpack <extension>——解压扩展到你的项目;
    compass validate——验证你生成的CSS文件;
    compass version——显示版本、许可证,等等;
    compass interactive——进入一个用于测试Compass中SassScript的控制台。

    compass help <具体命令>——获得帮助/具体命令的详细描述

    五、Compass模块

    Compass采用模块结构,不同模块提供不同的功能

    1、reset

    @import "compass/reset";   //reset模块,重置浏览器的默认样式

    有时不需要进行全局的样式重置,可以单独重置某一块

    reset-html5                  HTML5样式重置

    reset-box-model           移除元素的内外边距和边框
    reset-font                    重置文字的字号和基线
    reset-focus                  移除浏览器提供的轮廓线(比如Safari给<input>元素加上的那一圈线)
    reset-table 和 reset-table-cell              重置表格的边框和对齐方式
    reset-quotation                                 为<blockquotes>添加仅存在于样式表中的双引号

    用法:

    @import "compass/reset/utilities";

    @include reset-html5;

    2、layout

    @import "compass/layout"; 

    如:

    @include sticky-footer(54px);   //页脚54px高,始终位于页面底部

    3、CSS3

    提供CSS3命令,常用的如圆角等

    @import "compass/css3";

    使用时:

    @include border-radius(5px);

    4、typography

    该模块提供版式功能

    @import "compass/typography";

    如:链接颜色

    link-colors($normal, $hover, $active, $visited, $focus)

    5、utilities

    提供某些不属于其他模块的功能,如reset中引入的混合器就包含在utilities中

    @import "compass/utilities/";

    如:清除浮动

    @include clearfix;

    六、Helper函数

    Compass还提供一系列函数,如:

    image-width($image)、cos($number)

    有关compass的所有相关模块和函数,可以查看http://compass.aether.ru/,里面有详细的用法讲解和例子

  • 相关阅读:
    基于springboot1.5.9整合shiro时出现静态文件找不到的问题
    基于springboot多模块项目使用maven命令打成war包放到服务器上运行的问题
    关于使用map存放数据乱序”问题“
    springboot1.5.9整合websocket实现实时显示的小demo
    SpringBoot1.5.10.RELEASE配置mybatis的逆向工程
    SpringBoot1.5.10.RELEASE整合druid时,在druid monitor界面出现(*) property for user to setup
    SpringBoot1.5.10.RELEASE整合druid
    SpringBoot1.5.10.RELEASE项目如何在tomcat容器中运行
    JS学习-01
    List,Set,Map在java.util包下都是接口 List有两个实现类:ArrayList和LinkedList Set有两个实现类:HashSet和LinkedHashSet AbstractSet实现了Set
  • 原文地址:https://www.cnblogs.com/laayoune/p/4105415.html
Copyright © 2011-2022 走看看