The CSS preprocessor language Scss articles

1. Sass and Scss

Sass and Scss is actually the same thing, we usually have to call Sass; Scss Sass 3 is the introduction of new grammar, the syntax is fully compatible with CSS3, and inherited the powerful features of Sass. That is, any standard CSS3 style sheets are valid Scss file has the same semantics.

There are differences between the following two points:

1. File extension different, Sass is ".sass" suffix extension, and Scss is ".scss" suffix extension
2. Different grammatical way of writing, Sass is strictly indented grammar rules to write, without braces ({}) and semicolon (;) , and SCSS grammar and writing our CSS syntax notation is very similar.

Example:

// Sass 语法
$w:200px; //定义变量
$h:300px; //定义变量 body width:$w; height:$h;

// Scss 语法
$w:200px;
$h:300px; body{ width:$w; height:$h; }

/* 编译出来的css*/
body{
    width:200px;
    height:300px; }

2. Sass/Scss 和 Css

• Sass and Css

  Sass and there is indeed some differences in the wording of CSS, due Sass is based on the Ruby to write, so its continuation Ruby writing specifications. In writing Sass without braces and semicolons , which mainly rely on strict indentation controlled.

• Scss and Css

  SCSS and CSS writing no difference, which is subject to public Sass got more like one of the reasons. Simply put, your existing ".css" files directly modified to ".scss" can be used.

installation

Mac system

1. Ruby Installation

Confirm whether to install the Ruby, open terminal input  ruby -v .

• There ruby ​​information - has been installed.

• No ruby information, use the  brew install ruby install ruby.

  Links:  install Ruby  .

2. Sass installation

Use  sass -v View sass version, check whether the sass installation.

• Online installation

  • Use  sudo gem install sass the installation sass.

• Local installation

  Because sometimes directly above command will let you install impossible to install (network limited reasons) normal, when it comes to this kind of situation, you need to install special to deal with, can be implemented properly installed Sass by the following method :

  • Download sass files, links:  Sass download  .

• Use  sudo gem install XXX/sass-3.7.4.gem the installation sass.

  XXX: Download the file path of sass.

Windows System

1. Ruby Installation

• Ruby installation package download link:  Ruby's official website  .

• Install Ruby, Ruby executable file is added to your PATH

  

• After the installation is complete Ruby, Ruby find newly installed in the Start menu and start the Command Control Panel Ruby

  

2. Sass installation

• Online installation

  • Use  gem install sass the installation sass.

  • Or: Use  gem install compass install Sass by Compass.

    Compass is based on a framework developed by Sass. In other words, you install the Compass, while also installed the Sass.

    Compass is a mature, based on a framework developed by Sass, there integrates a number of written and Sass mixins function.

• Locally ( local system Sass mounting through the Mac )

Check test, update and uninstall

// 查看
sass -v

// 更新
gem update sass

// 卸载
gem uninstall sass

Syntax

1. Sass syntax

Sass syntax is here that the initial syntax Sass, he is controlled by the tab key to indent a grammatical rule, and this indentation was very strict. In addition it does not contain any semicolons and braces. This format is often called Sass old version of the file name to ".sass" extension.

2. Scss syntax

SCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是一模一样，代码都包裹在一对大括号里，并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名。

【注】：

“.sass”只能使用 Sass 老语法规则（缩进规则），“.scss”使用的是 Sass 的新语法规则，也就是 SCSS 语法规则（类似 CSS 语法格式）。

编译调试

1. Sass 编译

①、命令编译

使用电脑中的命令终端，通过输入 Sass 指令来编译 Sass

• 单文件编译 sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css .

  // ex: 有一个 test.scss 文件需需要编译
  sass test.scss:test.css

• 多文件编译 sass sass/:css/.

  上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。

• 开启“watch”功能 sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css.

  // 单文件
  sass --watch test.scss:test.css
  
  // 多文件
  sass --watch sass/:css/

  这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：

②、GUI 界面工具编辑

推荐：Koala .

③、自动化编译(X)

2. 不同样式风格的输出方法

①、嵌套输出方式 nested

sass --watch test.scss:test.css --style nested

②、展开输出方式 expanded

输出的 CSS 样式风格和 nested 类似，只是大括号在另起一行

sass --watch test.scss:test.css --style expanded

③、紧凑输出方式 compact

sass --watch test.scss:test.css --style compact

④、压缩输出方式 compressed

压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格

sass --watch test.scss:test.css --style compressed

3. 调试(X)

基本特性

基础

1. 变量

Sass 的变量包括三个部分：

1. 声明变量的符号“$”
2. 变量名称
3. 赋予变量的值

• 默认变量

  值后面加上!default 。

  $color : #fff !default;

  sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖，覆盖的方式 - 只需要在调用该变量之前重新声明下变量即可。

  

• 全局变量和局部变量

  定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)。

  可以简单的理解成，全局变量就是定义在元素外面的变量，而定义在元素内部的变量就是局部变量 。

• 全局变量的影子

  当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。

  

2. 嵌套

• 选择器嵌套

  

• 属性嵌套

  

  避免选择器嵌套：

  • 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。
  • 选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。

• 伪类嵌套

  

3. 混合宏

在 Sass 中，使用“@mixin”来声明一个混合宏。
使用“@include”来调用声明好的混合宏。

• 不带参数混合宏

  @mixin bdr{
      -webkit-border-radius: 5px;
      border-radius: 5px; }

  @mixin 是用来声明混合宏的关键词；
  bdr 是混合宏的名称；
  大括号里面是复用的样式代码。

• 带参数混合宏

  参数：不带值的参数、带值的参数、多个参数
  有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代。

  // 带值的参数
  @mixin bdr($radius:10px){
      -webkit-border-radius: $radius; border-radius: $radius; }

• 复杂的混合宏

  @mixin box-shadow($shadow...) {
    @if length($shadow) >= 1 {
      @include prefixer(box-shadow, $shadow); } @else{ $shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow, $shadow); } }

  这个 box-shadow 的混合宏，带有多个参数，这个时候可以使用“ … ”来替代。简单的解释一下，当 $shadow 的参数数量值大于或等于“ 1 ”时，表示有多个阴影值，反之调用默认的参数值“ 0 0 4px rgba(0,0,0,.3) ”。

• 调用混合宏

  

• 混合宏的不足

  混合宏在实际编码中给我们带来很多方便之处，特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块。

  

  在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合宏最不足之处。

4. 扩展/继承

在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。

在 Sass 中的继承，可以继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器。

5. 占位符

Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能。
他可以取代以前 CSS 中的基类造成的代码冗余的情形。
因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。

从编译出来的 CSS 代码可以看出，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起，让你的代码变得更为干净。

6. 混合宏 VS 继承 VS 占位符

• Sass 中的混合宏使用

  总结：编译出来的 CSS 清晰告诉了大家，他不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处，他可以传参数。

  个人建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。

• Sass 中继承

总结：使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现。这样编译出来的代码相对于混合宏来说要干净的多，也是 CSSer 期望看到。但是他不能传变量参数。

个人建议：如果你的代码块不需要传任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。

• 占位符

  总结：编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。”

7. 插值

{}

可构建属性、选择器、@extend 中；
不能在 Sass 变量、@include 中调用。

8. 注释

• 单行注释

  类似 JavaScript 的注释方式，使用“//”

  在编译出来的 CSS 中不会显示

• 多行注释

  类似 CSS 的注释方式，使用 ”/* ”开头，结尾使用 ”*/ ”

  在编译出来的 CSS 显示

运算

1. 加/减

携带单位类型要一致。

in 是英寸。8in 即 8英寸。
1英寸约等于 2.54厘米,1英寸大约是96像素
width: 20px + 8in;
8in = 8 * 96px = 768px
即width = 20px + 768px = 788px;

2. 乘

进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可。

乘法运算和加法、减法运算一样，在运算中有不同类型的单位时，也将会报错。

3. 除

规则 通 乘法运算，有一个特殊之处：“/” 符号在 CSS 中已做为一种符号使用。因此在 Sass 中做除法运算时，直接使用 “/” 符号做为除号时，将不会生效，编译时既得不到我们需要的效果，也不会报错。

p {
    font: 10px/8px;             // 纯 CSS，不是除法运算 $width: 1000px; width: $width/2; // 使用了变量，是除法运算 width: round(1.5)/2; // 使用了函数，是除法运算 height: (500px/2); // 使用了圆括号，是除法运算 margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算 }

编译之后

p {
    font: 10px/8px;
    width: 500px; height: 250px; margin-left: 9px; }

If the two values ​​with the same unit value will be a value without units after division.

4. Color operation

All color value arithmetic support, and segmented operation. That is, red, green, and blue color of each segment separately calculates.
And also capable of digital color values together with the operation, the same operation is segmented .

The formula is:

05,02 = 01 + 04 + 05 = 03 + 06 = 07 and 09, and are synthesized.
02,02 * 01 * 2 = 04 and 03 = 2 * 2 = 06, and are synthesized.

5. Character operation

"+" Is connected to the string by the addition symbol in Sass.

In addition to doing the connection operation in the variable character, but also directly by + characters connected together.

div {
  cursor: e + -resize;
}

// 编译之后
div {
  cursor: e-resize; }

Note that, if a quoted string is added it is not a quoted string (i.e., a quoted string left in the + sign), the result will be a quoted string. Similarly, if not a quoted string is added with a quoted string (not quoted string left in the + sign), the result is not a quoted string.