zsyjx0115

Sass

2015-12-30
评论

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.

由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的。

body
	color: #fff
	ackground: #f36

编译格式

在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格：

  • 嵌套输出方式 nested
  • 展开输出方式 expanded
  • 紧凑输出方式 compact
  • 压缩输出方式 compressed

nested：一种嵌套显示 CSS 文件的方式

编译结果如下：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

允许使用变量

SASS允许使用变量，所有变量以$开头。 　　 $blue : #1875e7;　 　　div { 　　　color : $blue; 　　}

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

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

允许在代码中使用算式计算

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