sass的基本用法

sass介绍

Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码,易于组织和维护。
SASS是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状、混入、选择子继承等功能,可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用,也就是说它本身的语法并不太容易让浏览器识别(虽然它和CSS的语法非常的像,几乎一样),因为它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。

使用sass前, 必须先安装Ruby, 其次安装sass (sass依赖于Ruby环境)

变量

SASS允许使用变量,所有变量以$开头。

$blue : #1875e7; 
div {
color : $blue;
}

如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。

$side : left;
 .rounded {
border-#{$side}-radius: 5px;
}

计算功能

SASS允许在代码中使用算式:

body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $var * 10%;
  }

嵌套

SASS允许选择器嵌套。比如,下面的CSS代码:

div h1 {
    color : red;
  }
//可以写成:
  div {
    hi {
      color:red;
    }
  }

//属性也可以嵌套,比如border-color属性,可以写成:

p {
    border: {
      color: red;
    }
  }

//注意,border后面必须加上冒号。
在嵌套的代码块内,可以使用$引用父元素。比如a:hover伪类,可以写成:

a {
    &:hover { color: #ffb3ff; }
  }

注释

SASS共有两种注释风格。

标准的CSS注释 / comment / ,会保留到编译后的文件。

单行注释 // comment,只保留在SASS源文件中,编译后被省略。

在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

/*!
    重要注释!
*/

代码的重用

继承

SASS允许一个选择器,继承另一个选择器。比如,现有class1:

.class1 {
    border: 1px solid #ddd;
  }

class2要继承class1,就要使用@extend命令:

.class2 {
    @extend .class1;
    font-size:120%;
  }
分享到