Die Betriebsumgebung dieses Artikels: Windows 7-System, Bootstrap3, Dell G3-Computer.
Installation
Sass ist in Ruby geschrieben. Wenn Sie also Sass verwenden möchten, müssen Sie zuerst Ruby herunterladen. Ruby bietet nur Unterstützung für die Ausführung von Sass. Es spielt keine Rolle, ob Sie Ruby nicht verstehen
Nach der Installation von Ruby können Sie es von der offiziellen Website Sass herunterladenSass-Nutzung
1 Die Verschachtelung von Sass ist die gleiche wie bei Less und wird direkt in Just inside geschrieben
3 Wiederverwendung von Code
@mixin @include @extend @function @importSass kann @mixin
verwenden Definieren Sie Codeblöcke und verwenden Sie dann @include
. Um @mixin wiederzuverwenden, unterstützt es auch Parameter.
//Sass源码 $highlight-color: #000000; .selected { border: 1px solid $highlight-color; } //编译后的CSS .selected { border: 1px solid #000000; }
@extend
verwenden, um eine Klasse zu erben @import
zum Importieren externer Dateien. Ja. Verwenden Sie @function
, um Funktionen zu definieren4. Sass unterstützt Branching und Looping @if @else if @else @for @while
//Sass源码 @mixin border-radius($radius){ -moz-border-radius:$radius; -webkit-border-radius:$radius; border-radius:$radius; } button{ @include border-radius(5px); } //编译后的CSS button { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
(empfohlen: „@mixin
来定义代码块 然后用@include
来复用 @mixin同样也支持参数
//Sass源码 .block{ padding: 15px; margin-bottom: 15px; } .block-primary{ @extend .block; color: #00aff0; } //编译后的CSS .block, .block-primary { padding: 15px; margin-bottom: 15px; } .block-primary { color: #00aff0; }
Sass可以使用@extend
来继承一个类
//Sass源码 @mixin add-background($color){ background: $color; @if $color==#000000{ color: #666666; }@else { color: #ffffff; } } .section-primary{ @include add-background(#ffffff); } //编译后的CSS .section-primary { background: #ffffff; color: #ffffff; }
Sass 还可以使用@import
来导入外部文件 可以使用@function
Bootstrap-Tutorial