在例子中无礼

Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.

Sass是一种样式表语言，已编译为CSS。 它允许您使用变量，嵌套规则，混入，函数等等，都带着完全CSS兼容的语法。 Sass帮助保持大型样式表井井有条，并使在项目内和项目间共享设计变得容易。

本文将介绍的内容： (What will be covered in this article:)

1. Comments
   评论
2. Nesting
   套料
3. Variables
   变数
4. Import and use
   导入和使用
5. Mixins and Include
   混合和包含
6. Extend
   延伸
7. Functions and if/else
   函数和if / else
8. Loops
   循环
9. Media Queries
   媒体查询

1.评论(1. Comments)

The way Sass comments work differs substantially between SCSS and the indented syntax. Both syntaxes support two types of comments: comments defined using /* */ that are (usually) compiled to CSS, and comments defined using // that are not.

Sass注释的工作方式在SCSS和缩进语法之间大不相同。 两种语法都支持两种类型的注释：(通常)使用/* */定义的注释(已编译为CSS)和//定义的注释(未注释)。

// This comments
// will not be compiled
// and will not be in css


/* But this comment will */

2.嵌套(2. Nesting)

Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice.

Sass使您可以按照与HTML相同的视觉层次结构嵌套CSS选择器。 请注意，过度嵌套的规则会导致CSS资格过高，这可能难以维护，通常被认为是不好的做法。

html, body {
  height: 100%;


  #root {
    height: 100%;
  }


  .div-with-button {
    background-color: black;


    button {
      background-color: #e4c681;


      &:hover {
        background-color: #ffe082;
      }
    }
  }
}

3.变量(3. Variables)

Sass variables are simple: you assign a value to a name that begins with $, and then you can refer to that name instead of the value itself. But despite their simplicity, they're one of the most useful tools Sass brings to the table. Variables make it possible to reduce repetition, do complex math, configure libraries, and much more.

Sass变量很简单：您可以为以$开头的名称分配一个值，然后可以引用该名称而不是值本身。 但是，尽管它们很简单，但是它们却是Sass带来的最有用的工具之一。 变量使减少重复，执行复杂的数学运算，配置库等成为可能。

The Sass core library provides a couple of advanced functions for working with variables.

Sass核心库提供了一些用于处理变量的高级功能。

4.导入与使用 (4. import vs use)

The @import rule has a number of serious issues:

@import规则存在许多严重问题：

• @import makes all variables, mixins, and functions globally accessible. This makes it very difficult for people (or tools) to tell where anything is defined.

  @import使所有变量，mixin和函数都可以全局访问。 这使得人员(或工具)很难说出定义了什么。

• Because everything’s global, libraries must prefix to all their members to avoid naming collisions.
  因为所有内容都是全局的，所以库必须在其所有成员之前加上前缀，以避免命名冲突。

• @extend rules are also global, which makes it difficult to predict which style rules will be extended.

  @extend规则也是全局的，这使得很难预测将要扩展的样式规则。

• Each stylesheet is executed and its CSS emitted every time it’s @imported, which increases compilation time and produces bloated output.

  每个样式表都会被执行，并且每次@import ed都会发出其CSS，这会增加编译时间并产生produces肿的输出。

• There was no way to define private members or placeholder selectors that were inaccessible to downstream stylesheets.
  无法定义下游样式表无法访问的私有成员或占位符选择器。

$color_one: red;

The new module system and the @use rule address all these problems.

新的模块系统和@use规则解决了所有这些问题。

@use "three" with (
$color_three: green,
);
@use "three" as custom;




.one {
  // ERROR
  //background-color: one.$color_one;
}


.two {
  // ERROR
  //background-color: two.$color_two;
}


.three {
  background-color: three.$color_three;
}


.three {
  background-color: custom.$color_three;
}

5. Mixins和包括(5. Mixins and Include)

Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like .float-left, and to distribute collections of styles in libraries.

使用混合插件，您可以定义可以在整个样式表中重复使用的样式。 它们使避免使用非语义类(如.float-left )和在库中分发样式的集合变得容易。

//  If nothing will be passed - "flex-direction" will be set to "row"
@mixin flex_center($direction: row) {
  display: flex;
}


@mixin flex_with_color($direction: row, $color: black) {
  @include flex_center($direction);
  background-color: $color;
}


@mixin colors($color: #424242, $background-color: red) {
  background-color: $background-color;
  color: $color;
}


@mixin hover_button() {
  background-color: green;
  width: 250px;
}


.div-with-button {
  @include flex_with_color;


  button {
    @include colors(#424242, blue);


    &:hover {
      @include hover_button();
    }
  }
}

6.延伸(6. Extend)

Sometimes you want to write a style rule that’s only intended to be extended. In that case, you can use placeholder selectors, which look like class selectors that start with % instead of .

有时您想要编写仅用于扩展的样式规则。 在这种情况下，您可以使用占位符选择器，它们看起来像以%而不是开头的类选择器.

%flex {
  display: flex;
}


.some-class {
  height: 50%;
  background-color: black;
}


%flex_with_color {
  @extend %flex;
  @extend .some-class;
}


%button_styles {
  height: 50px;
  width: 200px;
}


div {
  @extend %flex_with_color;


  button {
    @extend %button_styles;
    color: #424242;
    background-color: #d966fb;
  }
}

7.函数和if / else(7. Functions and if/else)

Functions allow you to define complex operations on SassScript values that you can re-use throughout your stylesheet. They make it easy to abstract out common formulas and behaviors in a readable way.

函数使您可以对SassScript值定义复杂的操作，您可以在整个样式表中重复使用这些操作。 它们使以可读方式抽象出常见的公式和行为变得容易。

The @if rule is written @if <expression> { ... }, and it controls whether or not its block gets evaluated (including emitting any styles as CSS). The expression usually returns either true or false—if the expression returns true, the block is evaluated, and if the expression returns false it’s not.

@if规则写为@if <expression> { ... } ，它控制是否评估其块(包括发出任何样式CSS)。 表达式通常返回true或false －如果表达式返回true ，则对块求值，如果表达式返回false则不是。

$theme: dark;
$height: 100%;


/* Simple function */
@function calculate_height() {
  // very weird function, but still :)
  @return $height / 2;
}


/* if/else function */
%button_theme_color {
  @if $theme == dark {
    background-color: #e4c681;
    color: #424242;
  } @else if ($theme == light) {
    background-color: #b59749;
    color: #ffffff;
  } @else {
    background-color: grey;
    color: #000000;
  }
}


button {
  @extend %button_theme_color;
  height: calculate_height();
}


// loops

8.循环(8. Loops)

The @each rule makes it easy to emit styles or evaluate code for each element of a list or each pair in a map. It’s great for repetitive styles that only have a few variations between them. It’s usually written @each <variable> in <expression> { ... }, where the expression returns a list. The block is evaluated for each element of the list in turn, which is assigned to the given variable name.

@each规则可以轻松地为列表中的每个元素或映射中的每个对发出样式或评估代码。 这对于重复性样式非常有用，它们之间只有很少的变化。 通常将其写@each <variable> in <expression> { ... }中的@each <variable> in <expression> { ... } ，其中表达式返回一个列表。 依次为列表的每个元素评估该块，并将其分配给给定的变量名称。

$avatars: 96 97 98 99;


@each $avatar in $avatars {
  .avatar-#{$avatar} {
    background: url(https://randomuser.me/api/portraits/men/#{$avatar}.jpg);
  }
}

9.媒体查询(9. Media Queries)

/* Variant - 1 */
button {
  background-color: red;


  @media (min-width: 700px) {
    background-color: green;
  }
}


/* Variant - 2 */


$media-tablet: 700px;


@mixin respond-to($media: tablet) {
  @if $media == tablet {
    @media (min-width: $media-tablet) {
      @content
    }
  } @else {
    @media (min-width: 320px) {
      @content
    }
  }
}


.button-class {
  width: 100px;
  height: 40px;


  &:hover {
    width: 90%;
    background-color: #ffe89d;
  }


  @include respond-to(tablet) {
    width: 200px;
    height: 80px;
  }
}

翻译自: https://medium.com/swlh/sass-in-examples-5fb9b205c3a8