sass

Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。

作为一个前端,相信当我们在团队协作过程中查看别人的CSS样式时肯定一脸捉急,毕竟每个人的代码风格不太一样,就算公司有自己的规范,看到密密麻麻的一堆css样式,心头肯定也是一万头草泥马奔腾的声音,更别提新入职后开始维护“前辈们”留下的代码了。Sass的出现一定程度上拯救了我们的头发 :P 下面就让我们来自救一下吧。

  1. Sass 的功能

    • 完全兼容 CSS3
    • 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
    • 通过函数进行颜色值与属性值的运算
    • 提供控制指令 (control directives)等高级功能
    • 自定义输出格式
  2. 两种语法格式

    • 首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 这种格式仅在 CSS3 语法的基础上进行拓展,所有 CSS3 语法在 SCSS 中都是通用的,同时加入 Sass 的特色功能。这种格式以 .scss 作为拓展名。
    • 另一种也是最早的 Sass 语法格式,被称为缩进格式 (Indented Sass) 通常简称 “Sass”,是一种简化格式。这种格式以 .sass 作为拓展名。
    • 两者关系:任何一种格式可以直接导入 (@import) 到另一种格式中使用,或者通过 sass-convert命令行工具转换成另一种格式:
      # Convert Sass to SCSS
      $ sass-convert style.sass style.scss
      # Convert SCSS to Sass
      $ sass-convert style.scss style.sass
      
  3. 安装与配置Sass

    关于Sass的安装,大家可以去Sass教程网站查看说明,毕竟每个人的运行环境不一致,这里就不作赘述了。

  4. Sass用法

    把scss文件转换为css文件 :

    sass test.scss test.css
    

    监视单个 Sass 文件,每次修改并保存时自动编译:

    sass --watch input.scss:output.css
    

    监视整个文件夹:

    sass --watch app/sass:public/stylesheets
    
  5. Sass功能扩展
    5.1 嵌套规则

    Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器,例如:

     #main p {
        color: #00ff00;
        width: 97%;
       .redbox {
            background-color: #ff0000;
           color: #000000;
        }
    }
    

    编译后为

    #main p {
       color: #00ff00;
       width: 97%;
    }
    #main p .redbox {
       background-color: #ff0000;
       color: #000000; 
    }
    

    嵌套功能避免了重复输入父选择器,而且令复杂的 CSS 结构更易于管理

    5.2 父选择器 &

    1. 在嵌套 CSS 规则时,有时也需要直接使用嵌套外层的父选择器,例如,当给某个元素设定 hover 样式时,或者当 body 元素有某个 classname 时,可以用 & 代表嵌套规则外层的父选择器。例如
      a {
        font-weight: bold;
        text-decoration: none;
        &:hover { text-decoration: underline; }
        body.firefox & { font-weight: normal; }
      }
      
      编译后为
      a {
        font-weight: bold;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline; 
      }
      body.firefox a {
        font-weight: normal;
      }
      
      编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器,如果含有多层嵌套,最外层的父选择器会一层一层向下传递
    2. & 必须作为选择器的第一个字符,其后可以跟随后缀生成复合的选择器,例如:
      #main {
         color: black;
         &-sidebar { border: 1px solid; }
      }
      
      编译后
      #main {
          color: black;
      }
      #main-sidebar {
          border: 1px solid; 
      }
      
      当父选择器含有不合适的后缀时,Sass 将会报错。

    5.3 属性嵌套

    有些 CSS 属性遵循相同的命名空间 (namespace),比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性,同时也为了避免了重复输入,Sass 允许将属性嵌套在命名空间中,例如:

    .funky {
       font: 20px/24px {  #注意font后面的冒号
          family: fantasy;
          size: 30em;
          weight: bold;
       }
    }
    

    编译后

    .funky {
       font:20px/40px;
       font-family: fantasy;
       font-size: 30em;
       font-weight: bold; 
    }
    

    5.4 占位符选择器 %foo

    Sass 额外提供了一种特殊类型的选择器:占位符选择器 (placeholder selector)。与常用的 id 与 class 选择器写法相似,只是 #或 .替换成了 %
    。必须通过 @extend 指令调用.

    5.5 注释 / / 与 //

    Sass 支持标准的 CSS 多行注释 / /,以及单行注释 //,前者会 被完整输出到编译后的 CSS 文件中,而后者则不会