Sass拾遗

@onvno 2016-08-07 15:15:13发表于 iuap-design/blog

Sass拾遗

写在前边

上周的工作中,一部分是在和scss接触。之前项目中使用less更多,sass在写过几个页面后因为语法繁琐就没继续。因对sass没有充分了解,所以不敢妄自下结论,决定对sass文档做一次完整的了解。中文文档竟满篇中英文结合表示一些不满,开始翻着看看sass官网了解。了解,然后就明白了:sass官网文档,纯翻译来说,Sass中文文档已经尽力了。

本篇是对认华scss基础语法与在datatable项目中的运用的补充,和自己在整理过程中的一点看法,安装过程略。

特征Features

  • 完美兼容CSS
  • CSS拓展,如引入变量,嵌套,混合等
  • 很多useful functions 
  • 很多先进的特性如control directives
  • 良好的自定义、格式化输出

.sass文件 or .scss文件

sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,我们项目中采用scss后缀

scss基础语法与在datatable项目中的运用

两种形式可以通过输入以下命令,很容易随时转换:

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

交互界面Interactive Shell

shell中输入sass -i可以直接调出交互界面,用于打印输出:

$ sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white

预处理

书写CSS开始是件简单愉悦的事,随着项目深入,没有程序的逻辑关系,导致维护越来越麻烦。所以sass号称就是解决你的烦恼,css中没有变量,我们给你。没有嵌套,我们给你。总体来说,就是实现css代码的可复用。

如何编译?

  • 基本

    sass input.scss output.css
    
  • 实时编译

    sass --watch app/sass:public/stylesheets
    

    注意:如scss文件和css 在同一目录,执行watch没有实时监控编译效果,此部分官方未提到

缓存Caching

Sass会将编译过的模板和partials存入缓存,加快依赖关系较多的文件再次编译时的时间。

如不希望缓存,可以在执行操作时,将:cache设置为`false

操作Options

sass有四种编译风格:

  • nested:嵌套缩进的css代码,它是默认值。
  • expanded:没有缩进的、扩展的css代码。
  • compact:简洁格式的css代码。
  • compressed:压缩后的css代码。

执行以下命令,sass文件下所有的scss文件目录需要执行编译,在css文件夹下输出嵌套风格的代码

sass --style nested --watch sass/.:css/.

引入Import

scss使用@import引入其他文件,避免了大段大段代码集合在单个文件中。

注意:此部分scss改写了css原本的import方法,原因是,css使用import或多次HTTP请求,在项目中一般不会用到。

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}
// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

输出

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

注意:import如引入的文件是css,或者是url地址,仍然会按照原生的css执行,即文件会做多次http请求,所以在项目中,最好统一使用scss格式,直接输出完整编译的文件。

片段Partials

通过_partial.scss方式命名。scss编译时会自动忽略此部分文件,不会直接输出partial.css文件。同时也可以通过import partial引入,无需加下划线。

变量Variables

scss使用$符号来定义变量,例子

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

输出

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

嵌套Nesting

嵌套顾名思义,俄罗斯套娃,一层套一层,使用类似html层级的写法,解决默认css样式堆积的问题,简化了继承的操作,更直观。

但官方也提到:过犹不及,过度使用,造成代码维护困难。恩,是的,变通的方法是可以选择给对应的元素增加类,减少嵌套带来的后期维护问题。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

输出

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

混合Minxins

Minxins可解决枯燥的写css3前缀属性带来的繁琐(当然构建工具更方便解决此类问题,此处只是举例说明Minxins用法)

定义@mixin

使用@include

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

输出

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

继承Extend/Inheritance

类似混合实现的效果,不过继承无需@mixin定义,使用@extend继承之前定义的类或其他。

吐槽:混合和继承,在less中完全可以通过定义一个类函数如message(){…}轻松实现,是为sass不够友善的地方。

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

输出

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

占位选择%

考虑到项目的推进,很多依赖无需层层嵌套,可以选择使用占位符来解决输出冗余问题:

%message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend %message;
  border-color: green;
}

输出

.success{
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

操作符Operators

基本的+,-,*,/,%

.container { width: 100%; }


article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

输出

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

数组List

sass中的数组,有两种形式可以任意选择:

//使用空格
$list1: 1px 2px 3px 4px;

//使用逗号
$list2: 1px,2px,3px,4px;

键值对Maps

可以定义keyvalue

$map: (key1: value1, key2: value2, key3: value3);

插入值Interpolation

scss中插入值,需要使用#{变量}的形式,示例如下:

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

输出:

p.foo {
  border-color: blue; }

函数Function

sass提供的函数用到的比较少,以下给出链接以后查找时方便一些:

Sass Function

以上,了解过程中,sass开始接触,会有很变扭的感觉,因为包括文档在内,有一部分都在说明ruby环境下如何执行...同时发挥sass的能力,需要结合compass。关于compass,目前粗浅有以下两点了解:

  • 再一次拉高sass的学习成本
  • 最后一次更新是2014年

最后

从前端发展角度,目前compass有点尴尬处境,个人认为可以采用PostCss + Sass/Less配合自动化工具来推动新的项目。

参考:
Sass官网
PostCSS 是个什么鬼东西?

另外,附一个compass学习地址:
Sass和Compass必备技能之Compass