scss 0.8.73

Python-scss

警告

我不再支持python-scss了。请使用Kronus的pyscss。

Python-scss是Python的SCSS编译器。文档可在pypi或github上找到。这是zeta-library的一部分。

特性

Python-scss具有Sass SCSS 3.2及更高版本的几乎所有功能。它支持：

• 嵌套规则

• 关键字参数

• 混入：@mixin, @include

• 函数：@function, @return

• 继承：@extend

• 条件：@if, @else, @if else

• 循环：@for

• 变量： $，@variables，@vars

• 图片： image-url，image-width，image-height，...

• 嵌入式内联图片： inline-image

• 颜色处理： adjust-color()，scale-color()，opacify()/transparentize()，lighten()/darken()，mix()，...

• 数学函数： sin()，cos()，tan()，round()，ceil()，floor()，pi()，...

• 选项： @option compress:true, sort:false;，@option comments:false;

• Compass_ 辅助工具： enumerate，type-of，...

• 排序声明： 在 Zen 排序顺序

要求

• python >= 2.5

• pyparsing >= 1.5.5

安装

python-scss 应使用 pip 或 setuptools 安装

pip install scss

easy_install scss

用法

1. 从 Python 源代码:

   from scss import parser
   
   file_path = path_to_file
   src = open( file_path ).read()
   
   # from file
   print parser.load( 'file_path' )
   
   # from string
   print parser.parse( 'src' )
   
   # Create parser object
   p = parser.Stylesheet( options=dict( compress=True ) )
   print p.loads( src )
   p.load( file_path )
   print p

2. 从命令行:

   $ scss --help
   Usage: scss [OPTION]... [INFILE] [OUTFILE]
   
   Compile INFILE or standard input, to OUTFILE or standard output.
   
   Options:
   --version             show program's version number and exit
   -h, --help            show this help message and exit
   -c, --cache           Create and use cache file. Only for files.
   -i, --interactive     Run in interactive shell mode.
   -m, --compress        Compress css output.
   -w WATCH, --watch=WATCH
                           Watch files or directories for changes. The location
                           of the generated CSS can be set using a colon:
                           scss -w input.scss:output.css
   -S, --no-sorted       Do not sort declaration.
   -C, --no-comments     Clear css comments.
   -W, --no-warnings     Disable warnings.

3. 在交互式模式下:

   scss -i
   
   >>> 25px + 1.5em

更改

如果您是从 scss 的早期版本升级，请确保您已阅读以下文档

http://packages.python.org/scss/changes.html

示例

1. 嵌套规则

   示例

   .selector {
       a {
           display: block;
       }
       strong {
           color: blue;
       }
   }

   …产生

   .selector a {
       display: block}
   
   .selector strong {
       color: blue}

2. 变量

   示例

   $main-color: #ce4dd6;
   $style: solid;
   $side: bottom;
   #navbar {
       border-#{$side}: {
       color: $main-color;
       style: $style;
       }
   }

   …产生

   #navbar {
       border-bottom-color: #ce4dd6;
       border-bottom-style: solid}

3. 混入

   示例

   @mixin rounded($side, $radius: 10px) {
       border-#{$side}-radius: $radius;
       -moz-border-radius-#{$side}: $radius;
       -webkit-border-#{$side}-radius: $radius;
   }
   #navbar li { @include rounded(top); }
   #footer { @include rounded(top, 5px); }
   #sidebar { @include rounded(left, 8px); }

   …产生

   #navbar li {
           -moz-border-radius-top: 10px;
           -webkit-border-top-radius: 10px;
           border-top-radius: 10px}
   
   #footer {
           -moz-border-radius-top: 5px;
           -webkit-border-top-radius: 5px;
           border-top-radius: 5px}
   
   #sidebar {
           -moz-border-radius-left: 8px;
           -webkit-border-left-radius: 8px;
           border-left-radius: 8px}

4. 扩展（使用 @extend）

   示例

   .error {
       border: 1px #f00;
       background-color: #fdd;
   }
   .error.intrusion {
       background-image: url("/image/hacked.png");
   }
   .seriousError {
       @extend .error;
       border-width: 3px;
   }

   …产生

   .error, .seriousError {
       background-color: #fdd;
       border: 1px #f00}
   
   .error .intrusion, .seriousError .intrusion {
       background-image: url('/image/hacked.png')}
   
   .seriousError {
       border-width: 3px}

5. 交互式模式

   示例

   $ python scss.py --interactive
   >>> 25px + 1.5em
   44.5px
   >>> lighten(rgba(130,130,130,.4),10%)
   rgba(155,155,155,0.40)
   >>> .rule { test: red; }
   .rule {
       test: red }
   >>> _

选项

Python-scss 有以下选项

• compress：压缩输出 css，默认为 False

• cache：预缓存编译结果，默认为 False

• comments：保留 css 注释，默认为 True

• sort：排序声明，默认为 True 声明按 Zen 排序顺序 排序

• warn：启用或禁用警告：未知混入，声明名称，扩展规则集，默认为 True

选项可以定义为…

1. 从命令行

   scss -m -S file.scss

2. 从 Python

   parser = Stylesheet( options=dict( compress=True ) )

3. 从 scss 源代码

   @option compress: true, sort: false;

错误跟踪器

如果您有任何建议，错误报告或烦恼，请向问题跟踪器报告，网址为 https://github.com/klen/python-scss/issues

贡献

python-scss 的开发发生在 github： https://github.com/klen/python-scss

• klen（Kirill Klenov）

许可

在 GNU 协议 下授权。

版权

版权（c）2011 Kirill Klenov（horneds@gmail.com）

Compass:

（c）2009 Christopher M. Eppstein http://compass-style.org/

SCSS:

（c）2006-2009 Hampton Catlin 和 Nathan Weizenbaum https://sass-lang.com.cn/

注意

欢迎您的反馈！