Sass---CSS扩展语言

た入场券 2023-06-23 13:16 7阅读 0赞

[Sass][]世界上最成熟、最稳定、最强大的专业级CSS扩展语言！

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 [Compass][]）有助于更好地组织管理样式文件，以及更高效地开发项目

1.将Sass编译成CSS

sass sass/style.scss:css/style.css

2.自动编译Sass

sass --watch sass:css
    >>> Sass is watching for changes. Press Ctrl-C to stop.

3.修改编译输出的CSS格式:nested默认样式

sass --watch sass:css --style nested/compact/compressed/expanded

4..scss和.sass

.sass缩进式

5.变量

6.嵌套

嵌套时调用父选择器&

嵌套属性font

7.混合-Mixins

@mixin alert($text-color,$background) {
      color: $text-color;
      background-color: $background;
      a {
        color: darken($text-color,10%);
      }
    }
    .alert-warning {
      @include  alert(#0f7e8a, #f7fc76);
    }

转化之后的CSS文件

.alert-warning {
      color: #0f7e8a;
      background-color: #f7fc76;
    }
    .alert-warning a {
      color: #0a545c;
    }

8.继承/扩展-inheritance

.alert {
      padding:15px;
    }
    .alert a {
      font-weight: bold;
    }
    .alert-info {
      @extend .alert;
      background-color: aqua;
    }

CSS样式文件

.alert, .alert-info {
      padding: 15px;
    }
    
    .alert a, .alert-info a {
      font-weight: bold;
    }
    
    .alert-info {
      background-color: aqua;
    }

9.@import与Partials

Partials的文件名:sass/\_base.scss

在sass/style.scss中导入:

@import "base";

10.interpolation插入值

$version:"0.0.1";
    /*项目版本是:#{$version}*/
    $name: "info";
    $attr: "border";
    .alert-#{$name} {
     #{$attr}-color:#ccc;
    }
    ---------
    .alert-info {
      border-color: #ccc;
    }

11.控制指令Control Directives

@if @for @for @each @while

@if $var==true \{ \}

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

`@for $var from through`，或者 `@for $var from to`，区别在于 `through` 与 `to` 的含义：*当使用 `through` 时，条件范围包含 `与` 的值，而使用 `to` 时条件范围只包含 `的值不包含` 的值*。另外，`$var` 可以是任何变量，比如 `$i`；`和` 必须是整数值。

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

@each $var in $list

$icons: success error warning;
    @each $icon in $icons {
    	.icon-#{$icon} {
    		background-image:url(../images/icons/#{$icon}.png);
    	}
    }

`@while` 指令重复输出格式直到表达式返回结果为 `false`。这样可以实现比 `@for` 更复杂的循环，只是很少会用到。

$i: 6;
    @while $i > 0 {
      .item-#{$i} { width: 2em * $i; }
      $i: $i - 2;
    }
    -----------
    .item-6 {
      width: 12em; }
    
    .item-4 {
      width: 8em; }
    
    .item-2 {
      width: 4em; }

12.自定义函数

$colors:(light:#fff,dark:#000);
    @function color($key) {
    	@if not map-has-key($colors,$key) {
    		@warn "在 $colors里面没找到#{$key} 这个key";
    	}
    	@return map-get($colors,$key);
    }
    
    body {
    	background-color:color(gray);
    }

[Sass]: https://www.sass.hk/
[Compass]: http://compass-style.org/