Sass快速上手

作者: Bennt | 来源:发表于2017-07-02 21:56 被阅读0次

Sass快速上手
Sass 简单入门、快速上手
Sass教程：简单入门、快速上手
Sass入门篇之基础语法（二）
Masonry介绍与使用实践：快速上手Autolayout
Spring Boot-web开发详解
快速上手
sass快速入门
Sass 快速入门
Sass快速入门

众所周知，css并不是一个真正的编程语言，无法做到像其他编程语言进行嵌套、继承以及设置变量。为了解决css存在的不足，开发者开发出一个对css进行预处理的“语言”，这种“语言”能够像编程语言一样使用继承、嵌套和设置变量等操作，然后编译成浏览器能够识别的css语言，这样就弥补了css的不足，所以预处理语言SASS就应用而生了！今天我们就简单了解一下SASS，如果需要详细了解SASS，请查看官方文档。

SASS语法有SASS和SCSS两种，其中SASS的语法比较严格，和css差异比较大，而SCSS比较符合我们写css的习惯。

SASS语法如下：

div 
   color:#000

SCSS语法如下：

div{color:#000;}

1、安装
sass是基于Ruby语言开发而成，因此安装sass语言提前安装Ruby。我们可以去官网下载Ruby。安装具体流程详见官网。
我主要是使用编译软件koala（下载koala），不需要配置Ruby环境，操作也非常简单。

2、编译
SASS提供四种编译方式
nested：嵌套缩进的css代码，它是默认值。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的css代码。
compressed：压缩后的css代码。
koala监听文件或目录，源文件有变动，自动编译。

3、嵌套
选择器嵌套

div {
   color:blue;
　　h1 {
　　　　color:red;
　　}
}

编译后的代码为：

div{color:blue;}
div h1{color:red;}

属性嵌套

div {
　　h1 {
　　　　background:{
           color:red;
           url(xxx.jpg);
           position:0 0;
        }
　　}
}

引用父元素(父元素我们可以用&来代替)

a {
   color:#000;
　　&:hover { 
        color: #bbb; 
    }
}

编译后的代码为：

a{color:#000;}
a:hover{color:#bbb;}

4、变量
SASS是可以使用变量，所有变量必须以$开头

$black: #000;　
div {
　　color : $black;
    width:860px/500px*100%;     //变量计算
}

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

$top : top;
.border-round {
　　border-#{$top}-radius: 2px;
}

5、mixin

使用@mixin命令，定义一个代码块

@mixin transform($transform:rotate(45deg)){
    -webkit-transform: $transform;
    -moz-transform: $transform;
    -ms-transform: $transform;
    -o-transform: $transform;
    transform: $transform;
}

使用@include命令，调用这个mixin。

div {
　　@include transform();
}

编译后：

div{
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

传参

div {
　　@include transform(rotate(90deg));
}

6、继承
现有一个class1类

.class1{
    position：absolute;
    top:0;
    left:0;
}

class2要继承class1，就要使用@extend命令

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

此外，为了减少代码量，提高css加载速度，我们可以通过占位符来继承样式(如“%abc”)，这样就可以防止被渲染到CSS的规则集中。

%test{
    color:#fff;
}
.test1{
    @extend %test;
}
.test2{
    @extend %test;
}
/* 编译后 */
.test1, .test2 {
    color: red;
}

8、插入文件
@import命令，用来插入外部文件。

@import "path"和@import "path.scss"都是引入外部文件path.scss

如果插入的是.css文件,只需要@import "foo.css"

如果你有一个 SCSS 或 Sass 文件需要引入，但是你又不希望它被编译为一个 CSS 文件，这时，你就可以在文件名前面加一个下划线，就能避免被编译。这将告诉 Sass 不要把它编译成 CSS 文件。然后，你就可以像往常一样引入这个文件了，而且还可以省略掉文件名前面的下划线。

例如，你有一个文件叫做 _font.scss。这样就不会生成 _font.css 文件了，而且你还可以这样做：

@import "font";         //不用加下划线

来引入 _font.scss 文件。

9、条件语句
使用@if……@else……

$shadow: 5px;
p{
    @if $shadow>10px{
        border:none;
    }@else {
        box-shadow: $shadow $shadow 5px;
    }
}

10、循环语句
for循环

@for $i from 1 to 5{ .border-#{$i}{ border:#{$i}px solid #000; }}

编译生成如下:

.border-1 {border: 1px solid  #000; }
.border-2 {border: 2px solid  #000; }
.border-3 {border: 3px solid  #000; }
.border-4 {border: 4px solid  #000; }