isass 0.1.14

线路延伸

以,结尾的行将继续到下一行：

#container, #article_container, #sidebar_container,
#footer_container, #useless_container
  background-color: #DDD

第一行是一整行：

#container, #article_container, #sidebar_container #footer_container, #useless_container {
  background-color: #DDD; }

评论

注释以/*开头，并在每行上实现 依据：

/* This is a comment
/* This is another comment
body
  /* Yep, a short width
  width: 50px

将给予：

/* This is a comment */
/* This is another comment */
body {
  /* Yep, a short width */
  width: 50px; }

进口

一个方便的小命令是@importthat-surprise-supper-imports 将外部.sass文件放入当前.sass文件。

假设你有一个night.sass：

body
  background-color: black
  color: white

然后在您的文件中style.sass：

@import night.sass

#sunny-message
   background-color: white
   color: yellow

产生：

body {
  background-color: #000000;
  color: #ffffff;
}
#sunny-message {
  background-color: #ffffff;
  color: #ffff00;
}

isass查找与当前工作相关的文件名 目录。请不要滥用进口货，它不会检查通知 进口-那会对你不利。

当然，您希望利用编程语法 sass引入的扩展。这将要求您预先安装 PySCSS模块，然后编译：

import isass

s = '''
@mixin box($width)
  width: $width px
body
  @include box(500)
'''

print isass.get_css(s)

变量替换

您可以使用变量，以$：

$highlight-color: #999
#big-box
  border: 1px solid $highlight-color
#message
  color: $highlight-color

这样就更容易传递颜色 css:

#big-box {
  border: 1px solid #999999;
}
#message {
  color: #999999;
}

表达式

拼凑简单的表达式：

$big-width: 500
#container
  width: $big-width px
$panel-left
  float: left
  width: $big-width/2 px

我们在css中得到：

#container {
  width: 500 px;
}
$panel-left {
  float: left;
  width: 250 px;
}

只要注意/作为除法表达式将是无畏的，所以 如果/出现在url()参数中，请用引号将其括起来 ""。

混入参数

将公共元素组合在一起，并可以接受参数，这些参数是 以@：

@mixin left($dist)
  float: left
  margin-left: -$dist
  width: $dist - 20
  padding-right: 20

#sidebar
  @include left(200px)

给出：

#sidebar {
  float: left;
  margin-left: -200px;
  width: 180px;
  padding-right: 20;
}

嵌套

方便的嵌套和自引用&以节省更多的输入：

#article
  a
    font:
      family: Garamond
    &:link
      text-decoration: none
    &:hover
      text-decoration: underline

展开成：

#article a {
  font-family: Garamond;
}
#article a:link {
  text-decoration: none;
}
#article a:hover {
  text-decoration: underline;
}

类扩展

以新的方式扩展一个类：

#message
  border: 1px solid red

#bad-message
  @extend #message
  background-color: red

很容易创建类似的类：

#bad-message, #message {
  border: 1px solid #ff0000;
}
#bad-message {
  background-color: #ff0000;
}

规范语法引用是 sass-lang.com

cli示例：

从sources.sass读取sass，并将生成的css写入标准 输出

$ isass < source.sass
$ isass < source.sass > out.css

从源中的所有*.sass文件、额外源目录和 然后将生成的css写入标准输出

$ isass sources/ extra-sources/ myfile.sass > out.css

您可以使用-o或-output选项将生成的结果写入 特定文件。

$ isass -o out.css sources/

从sass文件生成scss而不是css

$ isass -c < source.sass

监视源文件中的更改，并自动更新 任何变化。

$ isass -wo out.css source-dir/