Sass---CSS扩展语言

最新推荐文章于 2025-10-20 08:13:29 发布

原创最新推荐文章于 2025-10-20 08:13:29 发布 · 385 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Sass #CSS扩展语言

html5+css3 专栏收录该内容

6 篇文章

订阅专栏

Sass作为CSS的扩展语言，提供变量、嵌套、混合等功能，使CSS更强大、优雅。支持自动编译、格式调整，利于项目管理和高效开发。

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);
}