Sass和Scss常接触的一些好处/优点

目录

• • 一、CSS 功能拓展
  • • • 1、允许嵌套
      • 2、父选择器 &
      • 3、属性嵌套
      • 4、占位符选择器 %
  • 二、注释 /* */ 与 //
  • 三、SassScript
  • • • 1、变量 $
      • 2、运算
      • 3、圆括号
  • 四、@-Rules 与指令
  • • • 1、@import
      • 2、@media
      • 3. @extend继承
  • 五、控制指令
  • • • 1、@if
      • 2、@for

Scss (Sassy CSS)，一款css预处理语言，SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。SCSS 需要使用分号和花括号而不是换行和缩进。SCSS 对空白符号不敏感，其实就和css3语法一样，其后缀名是分别为 .scss。

一、CSS 功能拓展

1、允许嵌套

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

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

2、父选择器 &

在嵌套 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;
}
           

3、属性嵌套

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

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
//编译为
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}
           

4、占位符选择器 %

Sass 额外提供了一种特殊类型的选择器：占位符选择器 (placeholder selector)。与常用的 id 与 class 选择器写法相似，只是 # 或 . 替换成了 %。必须通过 @extend 指令调用。（在下面@extend模块举例子）

二、注释 /* */ 与 //

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

/* This comment is
 * several lines long. */
body { color: black; }

// These comments are only one line long each.
a { color: green; }

//编译为

/* This comment is
 * several lines long. */
body { color: black; }
a { color: green; }
           

三、SassScript

1、变量 $

SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样：

$width: 5em;
.main {
  width: $width;
}
// 编译为
.main {
  width: 5em;
}
           

2、运算

所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。

p { width: 1in + 8pt; }
// 编译为
p { width: 1.111in; }
           

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}
//编译为
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
}
           

p { color: #010203 + #040506; }
// 计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为
p { color: #050709; }

p { color: #010203 * 2; }
// 计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为
p { color: #020406; }
           

p { margin: 3px + 4px auto; }
// 编译为
p { margin: 7px auto; }

p:before { content: "I ate #{5 + 10} pies!"; }
//编译为
p:before { content: "I ate 15 pies!"; }

$value: null;
p:before { content: "I ate #{$value} pies!"; }
// 空的值被视作插入了空字符串，编译为
p:before { content: "I ate pies!"; }
           

3、圆括号

p { width: 1em + (2em * 3); }
// 编译为
p { width: 7em; }
           

四、@-Rules 与指令

1、@import

@import "foo.scss"; //引入外部样式
           

假设 example.scss 文件包含以下样式：

.example { color: red; }

然后导入到 #main 样式内

#main { @import “example”; }

将会被编译为

#main .example { color: red; }

2、@media

.sidebar { width: 300px; @media screen and (orientation:

landscape) {

width: 500px; } }

3. @extend继承

@extend让你能够在多个选择器中通过继承的方式共享一段样式:
.icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @extend .icon;
  /* error specific styles... */
}

.info-icon {
  @extend .icon;
  /* info specific styles... */
}
           

//编译为

.icon, .error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  /* error specific styles... */
}

.info-icon {
  /* info specific styles... */
}
           

如果你不想要.icon这个类，那就改为%icon,将编译为

.error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  /* error specific styles... */
}

.info-icon {
  /* info specific styles... */
}
           

五、控制指令

1、@if

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}
// 编译为
p { border: 1px solid; }
           

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明，例如：

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
//编译为
p { color: green; }
           

2、@for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
//编译为
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }