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