scss 编译

是什么

webpack 编译 scss
sublime-text 编译 scss
ruby compass 编译 scss
node-sass 编译
语法

sass

Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。

sublime-text 编译scss

ruby compass 编译 scss

1、依次执行下面三条命令，移除旧源，改用新源
> gem sources --remove http://rubygems.org/  
> gem sources --remove https://rubygems.org/  
> gem sources -a https://rubygems.org/

2、然后执行下面的命令，查看源列表
> gem sources -l  

应该会是下面输出
*** CURRENT SOURCES ***  
https://gems.ruby-china.org/  
（请确保只有 https://gems.ruby-china.org/）

3、然后就可以安装compass了
> gem install compass
> gem install sass
> 或则
sudo apt-get install ruby ruby-sass ruby-compass

4. https://rubygems.org/search?utf8=%E2%9C%93&query=compass

5. 编译
sass sass 文件 css 文件

node-sass 编译

cnpm install -g node-sass

node-sass src/input.scss dist/output.css
node-sass –watch src/input.scss dist/output.css

变量

变量用来存储需要在CSS中复用的信息，例如颜色和字体。SASS通过$符号去声明一个变量。

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

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

引入

SASS能够将代码分割为多个片段，并以underscore风格的下划线作为其命名前缀（_reset.scss），SASS会通过这些下划线来辨别哪些文件是SASS片段，并且不让片段内容直接生成为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;
}

父级选择器"&"

/*===== SCSS =====*/
a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body & { font-weight: normal; }
}

嵌套

SASS允许开发人员以嵌套的方式使用CSS

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

混合

混合（Mixin）用来分组那些需要在页面中复用的CSS声明，该特性在添加浏览器兼容性前缀的时候非常有用。

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

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

继承

通过@extend指令在选择器之间复用CSS属性，并且不会产生冗余的代码。

// 这段代码不会被输出到最终生成的CSS文件，因为它没有被任何代码所继承。
%other-styles {
  display: flex;
  flex-wrap: wrap;
}

// 下面代码会正常输出到生成的CSS文件，因为它被其接下来的代码所继承。
%message-common {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-common;
}

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

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

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

操作符

提供了标准的算术运算符，例如+、-、*、/、%。可以在aside和article选择器当中对宽度进行简单的计算。

.container { width: 100%; }

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

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

嵌套属性

CSS许多属性都位于相同的命名空间（例如font-family、font-size、font-weight都位于font命名空间下），Scss当中只需要编写命名空间一次，后续嵌套的子属性都将会位于该命名空间之下。

.demo {
  // 命令空间后带有冒号:
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

文档

https://www.sass.hk/guide/

wolichuang / dailyInterview

scss 使用 #43