Sass基本用法

一、sass是什么

传统的CSS是一种单纯的描述性样式文件，没有变量，也没有条件语句。在开发过程中，难免有些麻烦，因此有了CSS预处理器(css preprocessor)，Sass便是其中之一。

Sass (Syntactically Awesome StyleSheets)是css的一个扩展开发工具，Sass可以对CSS进行预编译处理。 在Sass源码中可以使用变量、函数、继承等动态语言的特性，并且可以编译成CSS文件。这里是官方文档

二、安装sass

可以在Windows、Mac或Linux上安装从GitHub发布页面下载的Sass包

或者使用以下命令之一安装它(取决于您首选的安装通道)：

npm install --save-dev sass@1.23.0-module.beta.1

npm install -g sass@1.23.0-module.beta.1

brew install sass/sass/sass@1.23.0-module.beta.1

choco install sass --version 1.23.0.modulebeta-1

pub global activate sass 1.23.0-module.beta.1

三、基本用法

【1】定义变量

SASS允许使用变量，所有变量以$开头。

　　$blue : #1875e7;　

　　div {
　　　color : $blue;
　　}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

　  $side : left;

　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

【2】计算

SASS允许在代码中使用算式，支持一系列运算符：+, -, *, /, 和 %

　　body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

【3】嵌套

SASS允许选择器嵌套

　　div h1 {
　　　　color : red;
　　}

    // 可以写成

    div {
        h1 {
           color: red; 
        }
    }

SASS允许属性嵌套

　　p {
　　　　border-color: red;
　　}

   // 可以写成

　　p {
　　　　border: {
　　　　　　color: red;
　　　　}
　　}
    
   // 注意border后面必须加上冒号

在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类

a:hover { color: #ffb3ff; }　

// 可以写成
　
a {　
    &:hover { color: #ffb3ff; }
}

【4】注释

/* comment */ ： 标准的CSS注释，编译后会保留。

//  comment：单行注释，只保留在SASS源文件中，编译后被省略。

/*！ comment */：重要注释，即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/* 
    标准注释
*/ 


//  单行注释


/*！ 
    重要注释
*/

【5】继承

SASS允许一个选择器，继承另一个选择器所有样式。使用@extend命令

　　.class1 {
　　　　border: 1px solid #ddd;
　　}

    // class2继承class1

　　.class2 {
　　　　@extend .class1;
　　　　font-size:18px;
　　}

【6】Mixin

Mixin有点像C语言的宏（macro），定义可重用的代码块。

使用@mixin命令定义一个代码块，使用@include命令调用这个mixin定义的代码块。

　　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

    // 调用

    div {
　　　　@include left;
　　}

mixin的强大之处，在于可以指定参数和默认值，使用的时候，根据需要加入参数，多个参数用逗号分隔

　　@mixin left($position: left, $value: 10px) {
　　　　float: $position;
　　　　margin-right: $value;
　　}

    // 加入参数

    div {
　　　　@include left(right, 20px);
　　}

【7】插入文件

使用@import命令来插入外部文件

　@import "path/filename.scss";
　@import "path/filename.css";

【8】条件语句

　　p {
　　　　@if 1 + 1 == 2 { border: 1px solid; }
　　　　@if 5 < 3 { border: 2px dotted; }
　　}

    // if...else

    $min-margin: 10px;
    @mixin init-margin($left){
        //判断传入的参数是否大于最小margin值
        @if $left > $min-margin {
            margin-left: $left;
        } @else {
            margin-left: $min-margin;
        }
    }
    body {
        @include init-margin(5px);
    }

【9】循环语句

for循环

@for $i from 1 to 5 {
    .page-index#{$i} {
        color: #FFFFFF;
    }
}

while循环

　　$i: 6;

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

each循环

　　@each $member in a, b, c, d {
　　　　.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
　　　　}
　　}

【10】自定义函数

　　@function double($n) {
　　　　@return $n * 2;
　　}

　　#sidebar {
　　　　width: double(5px);
　　}

四、在线转换工具

在线CSS转Sass工具   Sass在线编译工具