于 Linux 安装 与 SASS 简易使用纪录

SASS / SCSS 主要的用途, 就是可以用程式的方式来写 CSS, ex: 变量, for, function 等等.

程式写完后, 可以指定输出格式, 输出成各种不同的样貌, ex: 压缩过的 CSS 档.

SASS 使用后, 可以再搭配 Compass 使用. 简单说, Compass 是 SASS 的 Framework, 而且有很多前人的 template 可以套用, 不过此篇先不讲 Compass.

  • 注1: Sass / Compass 都需要 Ruby Gem, 所以需要安装 rubygems.
  • 注2: 此篇是将 SASS 安装在 Debian / Ubuntu Linux.

SASS 安装步骤

下述都需要用 Ruby Gem, 所以需要先安装 rubygems.

  1. apt-get install ruby-full
  2. apt-get install rubygems
  3. gem install sass # 会安装在 /var/lib/gems/1.8 (gem 的安装目录)
  4. 注: SASS 相关 Library 安装于: /var/lib/gems/1.8/gems/sass-3.1.1, /var/lib/gems/1.8/bin/sass
  5. ln -s /var/lib/gems/1.8/bin/sass /usr/bin/sass # 到此就完成囉~
  6. 若有使用 Vim, 可以安装 SCSS VIM Plugin

错误排除

  • 若有下述错误讯息:
    • error ./test.sass (Line 2: Invalid CSS after "80%": expected expression (e.g. 1px, bold), was ";")
    • Warning: Unable to load rb-inotify >= 0.5.1. Inotify will be unavailable.
  • 解法
    • gem install rb-inotify # 安装 rb-inotify 即可解决.

SASS 使用

详细可见此文件: SASS_REFERENCE - Using SASS

步骤顺序: 写 SCSS / SASS 档案, 再执行 Compile 程式, 再浏览器预览是否有问题即可, 测试步骤如下:

  1. vim style.scss # 新增 style.scss 档案


    /* style.scss */
    #navbar {
    width: 80%;
    height: 23px;
    }

  2. sass --watch style.scss:style.css # 将 style.scss 转换成 style.css 档
  3. 下述都可看情况使用
    1. sass --watch ./:stylesheets/compiled # sass 档 和 css 档 分开目录, 这会把目前此目录底下的 *.sass 档, compile 完成后, 都放到 stylesheets/compiled/ 下面.
    2. sass input.scss output.css # 直接 run 产生出 css 档
    3. sass --watch input.scss:output.css
    4. sass --watch app/sass:public/stylesheets
    5. 输出格式选择, 使用压缩的格式, 详见: SASS_REFERENCE - output style
    6. sass --watch --style compressed style.scss:style.css

SASS 语法

语法可见: SASS_REFERENCE, 在此只有纪录几个常用的, 详细的还是回官方看比较快.

  • function

    @mixin rounded-top {
    $side: top;
    $radius: 10px;

    border-#{$side}-radius: $radius;
    -moz-border-radius-#{$side}: $radius;
    -webkit-border-#{$side}-radius: $radius;
    }

  • include 拉进来

    #navbar li { @include rounded-top; }
    #footer { @include rounded-top; }

  • extend

    原始内容
    .error {
    border: 1px #f00;
    background-color: #fdd;
    }
    .seriousError {
    border: 1px #f00;
    background-color: #fdd;
    border-width: 3px;
    }

    使用 extend, 可写成下述:
    .error {
    border: 1px #f00;
    background-color: #fdd;
    }
    .seriousError {
    @extend .error;
    border-width: 3px;
    }

  • Parent References

    原始内容
    a {
    color: #ce4dd6;
    &:hover { color: #ffb3ff; }
    &:visited { color: #c458cb; }
    }

    Compile 后
    a:hover, a:visited ...

  • Arguments 带额外参数进去

    /* style.scss */
    @mixin rounded($side, $radius: 10px) {
    border-#{$side}-radius: $radius;
    -moz-border-radius-#{$side}: $radius;
    -webkit-border-#{$side}-radius: $radius;
    width: $navbar - width / $items - 10px; # 可以做运算
    }

    #navbar li { @include rounded(top); }
    #footer { @include rounded(top, 5px); }
    #sidebar { @include rounded(left, 8px); }

  • 要拉另一个 SCSS 档的内容, 使用注解 Import.

    有两个 css 档, style.css 要把 _rounded.scss 的内容拉进来, 要用 import (scss 的档名前面要有 "_")

    /* _rounded.scss */
    /* style.scss */
    @import "rounded";

  • Interpolation 全域变量

    原始内容
    $name: foo;
    $attr: border;
    p.#{$name} { #{$attr}-color: blue }

    Compile 后
    p.foo { border-color: blue; }

相关网页

延伸阅读


想在手机阅读更多css资讯?下载【香港硅谷】Android应用
分享到Facebook
技术平台: Nasthon Systems