Sass与Compass——回顾

compass 是sass的一个工具库   compass在sass 的基础上封装了一系列有用的模块,用来补充和丰富sass的工能,

安装:     compass是用 ruby语言开发的,所以安装它之前必须安装ruby。 命令:

    gem install compass 项目初始化:     要创建一个你的Compass 项目,如果项目的名字叫 myproject       compass create myproject     会在当前的目录下生成这个目录,里面有config.rb文件,还有两个子目录sass 和 stylesheets 前者存放sass 源文件,后者放编译后的 css文件。

编译:     我在开发的时候写出来的是文件后缀名为scss的文件。只有编译成css文件,才能用到网站上。       compass 的编译命令为         compass compile     该命令在项目根目录下运行,将会sass 子目录中的scss 文件编译成css文件,保存在stylesheets子目录中。       默认编译出来的css 文件带有大量的注释,生产环境需要压缩后的css文件         compass compile --output-style compressed     如果重新编译未修改过的文件         compass compile --force     除了使用命令参数,还可以在配置文件config.rb 中指定编译模式。

      output_style = :expanded         :expanded 表示编译后保留原格式, 其他值还包括: nested,         :compact和compressed 进入生产阶段后,就要改为:compressed模式。           output_style = :compressed     也可以通过指定environment的值(:production或者:development),智能判断编译模式。

      environment = :development         output_style = (environment == :production) ? :compressed : :expanded

    在命令行模式下,除了一次性编译命令,compass还有自动编译命令

      compass watch         只要scss文件发生变化,就会被自动编译成css文件。

compass 的模块

    compass采用模块结构,不同模块提供不同的功能,内置5个模块。     reset css3 layout typography unilities

reset模块

    在编写自己的样式之前,有必要重置浏览器的默认样式。       写法是:         @import "compass/reset"     上面的@import命令,用来指定加载模块,这里就是加载reset模块。编译后,会生成相应的css reset代码。

CSS3模块     该模块提供24 中css3命令。如:       圆角(border-radius) 的写法,         @import "compass/css3";             .rounded {                 @include border-radius(5px);             }     上面的@include命令,表示调用某个mixin(类似于C语言的宏),5px是参数,这里用来指定圆角的半径。

    编译后的代码为:

      .rounded {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
        -ms-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
      }

    如果只需要左上角为圆角,写法为     @include border-corner-radius(top, left, 5px);

layout模块     该模块提供布局功能,     比如,指定页面的footer部分出现在浏览器的最低端。

      @import "compass/layout";
        #footer {
          @include sticky-footer(54px);
        }

    指定子元素占满父元素的空间:

      @import "compass/layout";
        #stretch-full {
          @include stretch; 
        }

typography模块     该模块提供板式功能       比如,指定链接颜色的mixin为:         link-colors($normal, $hover, $active, $visited, $focus);       使用时写成:

        @import "compass/typography";
          a {
            @include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
        }

utilities模块

    该模块提供某些不属于其他模块的功能。     比如,清除浮动:

      import "compass/utilities/";
        .clearfix {
          @include clearfix;
       }

比如表格:

      @import "compass/utilities";
        table {
          @include table-scaffolding;
        }

    编译后

       table th {
        text-align: center;
        font-weight: bold;
        }
      table td,
      table th {
        padding: 2px;
      }
      table td.numeric,
      table th.numeric {
        text-align: right;
      }

Helper函数       除了模块外,compass还提供了一系列函数。       有一些有用的函数,image-width() 和image-height() 返回图片的宽和高       再比如,inline-image()可以将图片转为data协议的数据。

        @import "compass";
        .icon { background-image: inline-image("icon.png");}

        编译后得到           .icon { background-image: url('data:image/png;base64,iBROR...QmCC');}             函数与mixin的主要区别是,不需要使用@include命令,可以直接调用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逻辑熊猫带你玩Python

Linux | 像Windows一样,复制移动重命名等操作

小编在上一篇文章中讲到Linux下的目录操作,一共讲了三个命令,分别是cd、ls、和pwd。但是这里有个问题,既然目录就是文件夹,那么,怎样新建或者删除文件夹,...

57820
来自专栏Java后端生活

Linux(九)实用指令

20930
来自专栏Java帮帮-微信公众号-技术文章全总结

Linux命令(面试+工作版)

Linux命令(面试+工作版) ? ? ? ? ? ? ? 1. tar 创建一个新的tar文件 ? 解压tar文件 ? 查看tar文件 ? 2. grep 在...

49440
来自专栏章鱼的慢慢技术路

Linux命令_搜索文件

19950
来自专栏吴伟祥

Linux软件包管理(四) 原

包全名:操作的包是没有安装的软件包时, 使用包全名。而且要注意路径      安装 升级 包名:操作已经安装的软件包时,使用包名。 是搜索/var/lib/r...

13620
来自专栏向治洪

android Native堆

Android 应用开发大家都知道可以通过DDMS来查看应用程序进程占用的内存大小;然而Native 内存并不能在虚拟堆上看到;Android系统基于Li...

24060
来自专栏黑泽君的专栏

若想在当前路径下去运行非当前路径下的.class文件(即java可执行文件),该如何操作?

想在当前路径下去运行非当前路径下的.class文件(即java可执行文件),亦即可在任意目录下都可以执行java程序。

42610
来自专栏hbbliyong

OpenGL学习笔记:Console工程下如何不显示控制台黑窗口只显示Windows窗口

刚学习OpenGL,绘制图形的时候,如果不进行设置,运行的时候会先出现黑窗口再出现Windows窗口。 其实要去除控制台窗口非常简单,只需要修改工程设置,把子系...

36570
来自专栏郭耀华‘s Blog

QQ聊天记录备份助手 v1.0——搜索、备份、恢复QQ聊天记录文件,重装系统必备

项目地址 https://github.com/guoyaohua/QQBackUp 开发环境 Netbean JAVA 功能描述 自动搜索硬盘中的QQ聊天记录...

35360
来自专栏遊俠扎彪

使用VMware tools解决VMware中Linux虚拟机时间同步问题

VMware中虚拟机的时间同步,在虚拟机不能连接外网的情况下,时间吧同步是一个很大的问题,尤其是写程序中需要时间戳的时候。解决方法有很多,其中包括在Window...

20980

扫码关注云+社区

领取腾讯云代金券