码迷,mamicode.com
首页 > 其他好文 > 详细

sass

时间:2015-02-13 17:58:40      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:

在线转换器 http://sassmeister.com/

http://www.ruanyifeng.com/blog/2012/06/sass.html

一、什么是SASS

SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。

本文总结了SASS的主要用法。我的目标是,有了这篇文章,日常的一般使用就不需要去看官方文档了。

二、安装和使用

2.1 安装

SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。

假定你已经安装好了Ruby,接着在命令行输入下面的命令:

  gem install sass

然后,就可以使用了。

2.2 使用

SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。

下面的命令,可以在屏幕上显示.scss文件转化的css代码。(假设文件名为test。)

  sass test.scss

如果要将显示结果保存成文件,后面再跟一个.css文件名。

  sass test.scss test.css

SASS提供四个编译风格的选项:

  * nested:嵌套缩进的css代码,它是默认值。

  * expanded:没有缩进的、扩展的css代码。

  * compact:简洁格式的css代码。

  * compressed:压缩后的css代码。

生产环境当中,一般使用最后一个选项。

  sass --style compressed test.sass test.css

你也可以让SASS监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。

  // watch a file

  sass --watch input.scss:output.css

  // watch a directory

  sass --watch app/sass:public/stylesheets

SASS的官方网站,提供了一个在线转换器。你可以在那里,试运行下面的各种例子。

 

 

/*sass基本用法解析*/
/*1.sass允许使用变量,以$开头*/
$blue : #1875e7;
$num: 8px;
$side: left;

.div {
  color : $blue;
}
.rounded {
  border-#{$side}-radius: 5px;
}
.ml {
  margin-#{$side}:$num;
}

/*2.sass 允许代码中使用公式 */
.div2 {
  margin:(14px/7);
  top:50px + 100px;
  left:$num*2;
}

/*3.1 SASS允许选择器嵌套*/
.div3 {
  .div4 {
    color:$blue;
  }
}
/*3.2 SASS 属性也可以嵌套(注意:属性后面必须加冒号border:)*/
.div5 {
  border:{
    left:{
      color:#000;
    }
  }
}
/*4 SASS有两种注释风格*/
  //4.1 /**/ 标准的CSS注释 /* comment */ ,会保留到编译后的文件
  //4.2 // 单行注释 // comment,只保留在SASS源文件中,编译后被省略
  //4.3 /*! */ 在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

/*5 sass可以继承 */
.div6 {
  @extend .div5 ;
  @extend .div3;
  font-size:12px;
}

/*6 Mixin*/
//Mixin有点像C语言的宏(macro),是可以重用的代码块
//使用@mixin命令,定义一个代码块
@mixin fl($val:10px) {
  float:left;
  margin-top:5px;
  margin-right:$val;
}
//使用@include命令,调用这个mixin
.div7 {
  @include fl(20px);
  @extend .div2;
}
//mixin的强大之处,在于可以指定参数和缺省值
@mixin corner($v,$h,$radius:10px){
  border-#{$v}-#{$h}-radius:$radius;
  -moz-border-#{$v}-#{$h}-radius:$radius;
  -webkit-border-#{$v}-#{$h}-radius:$radius;
}
.div8 {
  @include corner(left,top);
}
.div9 {
  @include corner(left,top,5px);
}

/*7 颜色函数 */
//SASS提供了一些内置的颜色函数,以便生成系列颜色
.c1 {
  color:lighten(#cc3, 10%);
}
.c2 {
  color:darken(#cc3, 10%);
}
.c3 {
  color:grayscale(#cc3);
}
.c4 {
  color:complement(#cc3);
}

/*8 插入文件@import */

/*9 高级语法 */
//9.1 条件语句
//9.2 循环语句
//9.3 自定义函数

//@if可以用来判断:配套的还有@else命令:
.div10 {
  @if 1+1==2 { border:1px solid #000;}
  @if 5<3 { border:2px solid #000;}
}
.div11 {
  @if lightness(#cc3)>30%{
    background-color: #000;
  }@else {
    background-color: #ff0000;
  }
}
//SASS允许用户编写自己的函数
@function db($n){
  @return $n*2;
}
.div12 {
  width:db(15px);
}










sass

标签:

原文地址:http://www.cnblogs.com/fang51/p/4290611.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!