Sass拾遗

Question

Sass拾遗

onvno opened this issue 8 years ago · comments

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

可以定义key和value值

$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