ITPub博客

首页 > Linux操作系统 > Linux操作系统 > Sass 技术和相关工具介绍

Sass 技术和相关工具介绍

原创 Linux操作系统 作者:lkiarest 时间:2013-04-07 18:30:54 0 删除 编辑

(欢迎访问:http://www.3body.tk/iblog/

Sass是一个建立在CSS上面的元语言(meta-language),相对于CSS来说,它能够使用更加整洁和结构化的语法来描述文档的样式。Sass提供了一个简单,优雅的CSS语法,同时还实现了很多方便管理样式表的特性。

安装Sass需要的工具

Linux 用户:

sudo apt-get install ruby1.9.1 

Sass是使用Ruby实现的,所以你必须安装Ruby环境。

sudo gem install sass 

Sass是CSS3的扩展, 增加了嵌套规则,变量,混入,选择器继承等等。

sudo gem install compass

Compass是一个开源CSS生成框架

Windows 用户:

对于windows用户,需要先安装Ruby gem 然后执行下面的命令:

gem install sass
gem install compass

MAC 用户:

gem install sass
gem install compass

使用compass创建一个工程

cd path/to/where-you-want-your-project 

定位到你想创建工程的目录,对于一个自定义的theme来说,一般是 sites/all/themes。

compass create project-name 

上面的命令会使用project-name 创建一个文件夹,并将你的工程安装到这个文件夹里。

自动监视并编译compass的改变

cd path/to/project
compass watch
// 或者使用下面的快捷写法
compass watch path/to/project

如果想手动编译,执行下面的命令:

compass compile [options]

这个命令的详细参数可以参考:

http://compass-style.org/help/tutorials/command-line/

http://compass-style.org/help/tutorials/production-css/

一些实用的Sass示例

sass中的变量

全部使用同样的颜色和宽度。Sass支持变量并支持对变量做数学运算。

.SCSS Syntax
$blue: #3bbfce;
$width: 100px;
.main{
  color: $blue;
  width: $width;
}

.footer {
  width: $width / 2;
}

上面的代码会输入下面的css:

.main{
  color: #3bbfce;
  width: 100px;
}

.footer {
  width: 50px;
}

Sass的嵌套机制

Sass可以对选择子进行嵌套使用,避免重复的定义。对于属性也同样可以使用。

.SCSS Syntax

#navigation #main-menu ul {
  background: #e5e5e5;
  border: 1px solid #e2e2e2;
  li {
    padding: 5px 10px 5px 10px;
    &:hover {
      background: #ccc;
        a {
      color: #fff;
    }
    }
    a {
    text-decoration: none;
    text-shadow: 1px 2px rgb(211, 200, 200);
  }
  }

}

上面的代码会输入下面的css:

#main-menu ul {
  background: #e5e5e5;
  border: 1px solid #e2e2e2;
}

#navigation #main-menu ul li {
  padding: 5px 10px 5px 10px;
}

#navigation #main-menu ul li:hover {
  background: #ccc;
}

#navigation #main-menu ul li:hover a {
  color: #fff;
}

#navigation #main-menu ul li a {
  text-decoration: none;
  text-shadow: 1px 2px #d3c8c8;
}

Sass中的混入

混入比变量更加有用,你可以重用整个CSS,属性或者选择子的代码段。甚至可以使用传入参数。

.SCSS Syntax

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
}

上面的代码会输入下面的css:

#data {
  float: left;
  margin-left: 10px;
}

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/21394548/viewspace-757907/,如需转载,请注明出处,否则将追究法律责任。

全部评论

注册时间:2013-03-25

  • 博文量
    15
  • 访问量
    41377